<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>DA:
.navbar {
}.navbar_menuitem {
}NE:
.nav-bar {
}
.navbar-menu-item {
}DA:
.navbar_menuitem {
...
}NE:
.menuitem {
...
}DA:
.navbar.selected {
}
NE:
.b-navbar.s-selected {
}
mod i state klase moraju se nastavljati na blok ili element DA:
.tab.selected {
...
}NE:
.selected {
...
}preferirati > za elemente unutar moda ili state-a
DA:
.section.card > .section-body {
}NE:
.section.card .section-body {
}globalne utility klase treba da sadrze prefix DA:
.flex-row {
...
}NE:
.row {
...
}//modovi se pisu lijevo od blok elemente, 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 definisan poslije mora definisati sve stateove
.btn.selected {
background: yellow;
}
.primary.btn {
background: red;
}
.primary.btn.selected {
background: lightred;
}