# CSS konvencije

```html
<header class="flex-row align-center">
  <ul class="navbar">
    <li class="navbar_item active">Home</li>
    <li class="navbar_item active">Home</li>
    <li class="navbar_item active">Home</li>
  </ul>
</header>
```

### Naziv bloka ili elementa ne moze sadrzavati crtice

DA:
```css
.navbar {
  
}
```

```css
.navbar_menuitem {
  
}
```

NE:
```css
.nav-bar {
  
}

.navbar-menu-item {
  
}
```
## klasa elementa mora sadrzavati naziv bloka i separator - ili _
DA:
```css
.navbar_menuitem {
  ...
}
```
NE:
```css
.menuitem {
  ...
}
```

## ne koristimo prefikse na blok, element, state ili mod klasama
DA:
```
.navbar.selected {
  
}
```

NE:
```
.b-navbar.s-selected {
  
}
```

mod i state klase moraju se nastavljati na blok ili element
DA:
```css
.tab.selected {
  ...
}
```

NE:
```css
.selected {
  ...
}
```

preferirati > za elemente unutar moda ili state-a

DA:
```css
.section.card > .section-body {
  
}
```

NE:
```css
.section.card .section-body {
  
}
```

globalne utility klase treba da sadrze prefix 
DA:
```css
.flex-row {
  ...
}
```

NE:
```css
.row {
  ... 
}
```

//modovi se pisu lijevo od blok elemente, helperi i state klase se pisu desno
DA:
```css
.primary.btn {
  
}

.btn.pressed {
  
}
```

```html
<button class="primary btn">Click Me</button>
<button class="btn pressed">Click Me</button>
<button class="primary btn pressed">Click Me</button>
<button class="btn pad-xl pressed">Click Me</button>
```

NE: 
```css
.btn.primary {
  
}
```

```html
<button class="btn primary">Click Me</button>
<button class="pressed btn">Click Me</button>
<button class="btn primary pressed">Click Me</button>
<button class="btn pressed pad-xl">Click Me</button>
```
//mod definisan poslije mora definisati sve stateove
```css
.btn.selected {
   background: yellow;
}

.primary.btn {
    background: red;
}

.primary.btn.selected {
  background: lightred;
}
```