Conas a ríomhtar sonraireacht CSS?

Question

Accepted Answer

Nuair a bhíonn rialanna iolracha ag díriú ar an eilimint céanna, socraíonn **sonraireacht** cén ceann a bhíonn ann. Is scór atá ann a ríomhtar ó na codanna den roghnóir, agus é a bheith i gcomparáid mar tupla `(ids, classes, elements)`.

```text
Inline style   → 1,0,0,0  (highest, short of !important)
ID             → 0,1,0,0
Class / attr / pseudo-class → 0,0,1,0
Element / pseudo-element    → 0,0,0,1
Universal (*)  → 0,0,0,0  (no weight)
```

Déan comparáid ó chlé go deis; socraíonn an chéad cholún atá difriúil an buaiteoir.

```css
#nav .item a   { color: red; }   /* 1 id, 1 class, 1 element → 1,1,1 */
.menu .item a  { color: blue; }  /* 0 id, 2 classes, 1 element → 0,2,1 */
/* red wins — having ONE id beats any number of classes */
```

## Príomhrialacha

- Úsáideann **id** singil níos mó ná aon líon **ranganna**; úsáideann aon rang singil níos mó ná aon líon eilimintí. (Ní féidir leat na leibhéal níos ísle a "chur leis" chun ceann níos airde a bhuachaint.)
- Má bhíonn sonraireacht **comhionann**, an riail atá le feiceáil **níos déanaí** sa fhoinse a bhíonn ann (ord foinse).
- **`!important`** sáraíonn sonraireacht ghnáth ar fad — deireanach-dúiseacht atá deacair a shárú (bheadh gá a bheith agat `!important` eile le sonraireacht níos airde).

```css
.btn { color: blue !important; } /* ⚠️ wins over almost everything — avoid */
```

## Treoir phraiticiúil

```css
/* ❌ over-specific, hard to override later */
#sidebar ul li.active a { }
/* ✅ keep it flat — one class -> easy to manage */
.nav-link--active { }
```

## Cén fáth a bhfuil sé tábhachtach

Is ionann an chuid is mó de "cén fáth nach bhfuil mo CSS i bhfeidhm?" frustrachas agus coinbhleacht sonraireachta — tá riail níos sonraithech in áit eile ann agus tá an bhúa aici.

Déan roghnóirí íseal agus flapála a choinneáil (go bhfabhraigh ranganna singile, seachnaigh ids agus `!important`) coimeádann sonraireacht intuigthe, ionas go bhfanann stíleanna éasca a fhorchur agus a chothabháil.