Jak zapisovat CSS/SCSS

CSS - Sass preprocessor

V šablonách používáme styl zápisu BEM.
Příklady řešení: nabytek-polak.cz, karieradrevojas.cz
// Blocks are named as standard CSS classes
.block {
}
// Elements declared with 2 underscores, after block
// Grandchildren are named after their grandparent class 
// (.block__grandchild NOT .blog__parent__grandchild)
.block__element {
}
// Modifiers declared with 2 dashes, after block or after element
.block--modifier {
}
// element and modifier together
.block__element--modifier {
}
Snažíme se nezanořovat jednotlivé třídy, zanořovat můžeme pouze v případě snadného zápisu když se například tahají nadpisy, obsahy bez tříd z databáze nebo jednostupňové zanoření při specifikaci, v jaké sekci například má tato část vypadat trochu jinak
// Content
<div class="content">
    <h2>Testovací nadpis</h2>
    <p>Testovací odkaz</p>
</div>
.person__number{
 font-size: 1.9rem;
 font-weight: 700;
 color: $color__primary;
 border-top-right-radius: $radius;
 background: $color__secondary;
 padding: 8px 10px;
 position: absolute;
 left:0;
 bottom:0;
 line-height: 1;

 .person--large &{
  @include media($medium){
   font-size: 2.4rem;
   padding: 12px 16px;
  }
 }
}
 

Nevíte si rady?
Neváhejte se zeptat

Nevíte si rady nebo potřebujete něco konzultovat? Nápovědu stále zdokonalujeme na základě vašich požadavků a postřehů. Uvádíme co nejvíce možných variant, které používáme na řešení jednotlivých částí webu, mějte ale na paměti, že projekty řešíme individuálně na základě konkrétních potřeb.

Nádražní 876
560 02 Česká Třebová

honza.cech@czechgroup.cz

+420 774 201 483

*
*