CSS Code Style

styles.md

CSS konvencije

Primjer komponente:

<header class="flex-row align-center">
  <ul class="navbar">
    <li class="primary navbar_item active">Home</li>
    <li class="navbar_item">Products</li>
    <li class="navbar_item disabled">Resources</li>
  </ul>
</header>

Naziv bloka ili elementa ne smije sadrzavati crtice

DA:

.navbar {
  
}

.navbar_menuitem {
  
}

NE:

.nav-bar {
  
}

.navbar-menu-item {
  
}

.navbar_menu-item {
  
}

.navbar-menu_item {
  
}

.navbar_menu_item {
  
}

Klasa elementa mora sadrzavati naziv bloka i separator _

DA:

.navbar_menuitem {
  
}

NE:

.menuitem {
  
}

.navbarmenuitem {
  
}

Ne koristimo prefikse za blok, element, state ili mod klase

DA:

.navbar.selected {
  
}

NE:

.b-navbar.s-selected {
  
}

Mod i state klase se moraju pisati u kombinaciji sa blok ili element klasom u CSS-u

DA:

.tab.selected {
  
}

NE:

.selected {
  
}

Preferirati > (child selector) kod stilizovanja elemenata za neki mod ili state

DA:

.section.card > .section-body {
  
}

NE:

.section.card .section-body {
  
}

Modovi se pisu lijevo od blok/element klase, helperi i state klase se pisu desno

DA:

.primary.btn {
  
}

.btn.pressed {
  
}

<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:

.btn.primary {
  
}

<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 za neki element mora definisati sve stateove

.btn.selected {
   background: yellow;
}

.primary.btn {
    background: red; //overrides selected state
}

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

Globalne utility klase treba da sadrze prefix koji opisuje funkciju i minus separator

DA:

.flex-row {
  
}

.size-l {

}

NE:

.row {
  
}

.large {

}