Sass Guidelines

Syntaxe & formátování

Pokud byste se mě zeptali, co je první věc, kterou by každá příručka měla obsahovat, bylo by to jak má kód vypadat.

Když se několik vývojářů zapojí do psaní CSS ve stejném projektu, je jen otázkou času, než si jeden z nich začne dělat věci po svém. Manuály pro kód, které podporují konzistenci nejen že tomuto zabraňují, ale také pomáhají pokud jde o čtení a aktualizaci kódu.

Tady je zhruba to, co chceme (beze studu inspirováno CSS Guidelines):

• dvě (2) mezery odsazení, žádné tabulátory;
• ideálně, 80 znaků na řádek;
• správně psané víceřádkové CSS pravidla;
• smysluplné použití mezer.

// Yep
.foo {
  display: block;
  overflow: hidden;
  padding: 0 1em;
}

// Nope
.foo {
    display: block; overflow: hidden;

    padding: 0 1em;
}

// Since Sass indented-syntax forces those coding standards
// There is no wrong way of proceeding
.foo
  display: block
  overflow: hidden
  padding: 0 1em

V této části nebudeme řešit organizaci souboru. Je to předmětem jiné sekce.

Textové řetězce

Věřte nebo ne, řetězce hrají docela důležitou roli jak v CSS, tak i Sass ekosystémech. Většina CSS hodnod jsou buď délky nebo řetězce (většinou bez uvozovek), takže je docela zásadní držet se nějakého manuálu, pro vypořádávání se s řetězci v Sass.

Kódování

Aby se zabránilo možným problémům s kódováním znaků, je vysoce doporučeno nastavit kódování UTF-8 v hlavním souboru se styly použitím @charset direktivy. Ujistěte se, že je kódování nastaveno hned na prvním místě ve stylech a není před ním žádný znak.

@charset 'utf-8';

@charset 'utf-8'

Uvozovky

CSS nevyžaduje, aby byly řetězce obaleny uvozovkami, a to ani pokud obsahují mezery. Vezměte si například font-family názvy: CSS parseru nezáleží, jestli je zabalíte do uvozovek.

A právě proto ani Sass nevyžaduje, aby byly řetězce zabaleny uvozovkami. A ještě lépe (a naštěstí, což určitě poznáte), řetězec s uvozovkami je striktně rovnocený k dvojčeti bez uvozovek (tedy například 'abc' je striktně rovnocenný s abc).

Jak již bylo řečeno, jazyky, které nevyžadují, aby byly řetězce obaleny uvozovkami jsou jasnou menšinou a proto by měly být řetězce v Sassu vždy zabaleny v jednoduchých uvozovkách (') (jednoduché uvozovky bývají snadnější na napsaní než-li dvojité na qwerty klávesnicích). Kromě souladu s ostatními jazyky, včetně CSS bratrance JavaScriptu, je několik důvodů pro tuto volbu:

• jména barev jsou považovány za barvy, pokud jsou bez uvozovek, což může vést k vážným problémům;
• většina zvýrazňovačů syntaxe bude řetězce bez uvozovek považovat za chybu;
• napomáhá obecné čitelnosti;
• není žádný důvod proč řetězce neobalovat uvozovkami.

// Yep
$direction: 'left';

// Nope
$direction: left;

// Yep
$direction: 'left'

// Nope
$direction: left

Textové řetězce jako CSS hodnoty

Specifické CSS hodnoty jako initial nebo sans-serif vyžadují, aby nebyly v uvozovkách. Deklarace jako font-family: 'sans-serif' tiše selže, protože CSS očekává identifikátor, ne řetězec s uvozovkami. Z toho důvodu nepoužíváme uvozovky na tyto hodnoty.

// Yep
$font-type: sans-serif;

// Nope
$font-type: 'sans-serif';

// Okay I guess
$font-type: unquote('sans-serif');

// Yep
$font-type: sans-serif

// Nope
$font-type: 'sans-serif'

// Okay I guess
$font-type: unquote('sans-serif')

Proto můžeme rozlišovat mezi řetězci, které mají být použiti jako CSS hodnoty (CSS identifikátory) jako v předchozím případě a řetězci, které se drží Sass datového typu, jako například klíče mapy.

Nepoužíváme uvozovky v prvním případně, ale v druhém případě využíváme jednoduchých uvozovek.

Textové řetězce obsahující uvozovky

Pokud řetězec obsahuje jednu nebo více jednoduchých uvozovek, může se řetězec namísto toho zabalit dvojitými uvozovkami ("), aby se zabránilo úniku znaků z řetězce.

// Okay
@warn 'You can\'t do that.';

// Okay
@warn "You can't do that.";

// Okay
@warn 'You can\'t do that.'

// Okay
@warn "You can't do that."

URL

URL by měly být také zabaleny v uvozovkách ze stejných důvodů jako je výše:

// Yep
.foo {
  background-image: url('/images/kittens.jpg');
}

// Nope
.foo {
  background-image: url(/images/kittens.jpg);
}

// Yep
.foo
  background-image: url('/images/kittens.jpg')

// Nope
.foo
  background-image: url(/images/kittens.jpg)

Další četba:

• All You Ever Need to Know About Sass Interpolation
• SassyStrings

Čísla

V Sassu je číslo datový typ, včetně všeho od bezjednotkových čísel po délky, trvání, frekvence, úhly a tak dále. To umožňuje spustit výpočty na těchto opatřeních.

Nuly

Čísla by měla zobrazovat nulu před tečkou pro hodnoty menší než jedna. Nikdy nezobrazujte koncové nuly.

// Yep
.foo {
  padding: 2em;
  opacity: 0.5;
}

// Nope
.foo {
  padding: 2.0em;
  opacity: .5;
}

// Yep
.foo
  padding: 2em
  opacity: 0.5

// Nope
.foo
  padding: 2.0em
  opacity: .5

Jednotky

Pokud se zaměříme na jednotky, 0 by nikdy neměla mít definovanou jednotku.

// Yep
$length: 0;

// Nope
$length: 0em;

// Yep
$length: 0

// Nope
$length: 0em

Nejčastější chybou, která mě napadne v souvislosti s čísly v Sassu, je ta, že jednotky jsou jen nějaké textové řetězce, které mohou být bezpečně dosazeny k číslu. I když to je pravda, určitě to není jak jednotky fungují. Představte si jednotky jako algebraické symboly. Například v reálném světě, násobení 5 centimetrů 5 centimetry vám dá 25 centimetrů čtverečních. Stejná logika platí i pro Sass.

Pro přidání jednotky k číslu musíte číslo vynásobit 1 jednotkou.

$value: 42;

// Yep
$length: $value * 1px;

// Nope
$length: $value + px;

$value: 42

// Yep
$length: $value * 1px

// Nope
$length: $value + px

Všimněte si, že 0 členů té jednotky také funguje, ale já bych vám raději doporučoval zmíněnou metodu, jelikož přidáním 0 jednotky může být tak trochu matoucí. Avšak pokud se budete snažit převést číslo do jiné kompatibilní jednotky, přidání 0 na to nebude stačit.

$value: 42 + 0px;
// -> 42px

$value: 1in + 0px;
// -> 1in

$value: 0px + 1in;
// -> 96px

$value: 42 + 0px
// -> 42px

$value: 1in + 0px
// -> 1in

$value: 0px + 1in
// -> 96px

Nakonec to všechny závisí na tom, čeho se snažíte dosáhnout. Jenom mějte na paměti, že přidáním jednotky v řetězci není dobrou cestou jak to dělat.

Pro odstranění jednotky z hodnoty ji musíte vydělit jednou jednotkou svého druhu.

$length: 42px;

// Yep
$value: $length / 1px;

// Nope
$value: str-slice($length + unquote(''), 1, 2);

$length: 42px

// Yep
$value: $length / 1px

// Nope
$value: str-slice($length + unquote(''), 1, 2)

Připojením jednotky v řetězci k číslu vznikne řetězec, který zamezí jakýmkoli dalším operacím na hodnotě. Krajení numerické části čísla jednotkou také vyústí v řetězec. A to není to, co chcete.

Výpočty

Numerické výpočty na nejvyšší úrovni by měly být vždy zabaleny v závorkách. Nejen, že tento požadavek výrazně zlěpší čitelnost, ale také zabrání některým krajním případům tím, že nutí Sass vyhodnotit obsah závorek.

// Yep
.foo {
  width: (100% / 3);
}

// Nope
.foo {
  width: 100% / 3;
}

// Yep
.foo
  width: (100% / 3)

// Nope
.foo
  width: 100% / 3

Magická čísla

“Magická čísla” je old school programovací termín pro nepojmenované matematické konstanty. V podstatě to je jen náhodné číslo, které prostě funguje™ a zatím není vázáno na žádné logické vysvětlení.

Netřeba snad ani dodávat, že magická čísla jsou mor a mělo by se jim vyhýbat za jakoukoli cenu. Pokud nemůžete najít rozumné vysvětlení, proč číslo funguje, přidejte rozsáhlý komentář vysvětlující jak jste se tam dostali a proč si myslíte, že to funguje. Přiznáním se, že nevíte proč něco funguje je stále více užitečné pro dalšího vývojáře, než aby sám musel přijít na to co se děje on nuly.

/**
 * 1. Magic number. This value is the lowest I could find to align the top of
 * `.foo` with its parent. Ideally, we should fix it properly.
 */
.foo {
  top: 0.327em; /* 1 */
}

/**
 * 1. Magic number. This value is the lowest I could find to align the top of
 * `.foo` with its parent. Ideally, we should fix it properly.
 */
.foo
  top: 0.327em /* 1 */

Další četba:

• Use Lengths, Not Strings
• Correctly Adding Unit to Number
• Magic Numbers in CSS
• Sassy-Math

Barvy

Barvy zaujímají v CSS jazyce důležité místo. Jako obvykle, Sass je nakonec cenným spojencem když přijde na řadu manipulace s barvami, především proto, jelikož obsahuje mocné funkce.

Formáty barev

Aby byly barvy tak jednoduché, jak jen mohou být, moje rada je respektovat následující pořadí formátů barev:

1. CSS klíčová slova pro barvy;
2. HSL notace;
3. RGB notace;
4. Hexadecimální notace. Přednostně malá písmena a zkrácené kde je jen možné.

Pro začátek, klíčová slova často mluví sami za sebe. HSL reprezentace je nejen ta nejjednodušší pro lidský mozek na pochopení ^{[citation needed]}, ale také ulehčuje autorům stylu vyladit barvu úpravou odstínu, sytosti a světlosti individuálně. RGB má stále tu výhodu, že hned vidíte, jestli má barva více modré, zelené, nebo červené, ale to neznamená, že je vytvoření barvy ze tří částí jednoduché. Poslední, hexadecimální, je pro lidskou mysl skoro nečitelný.

// Yep
.foo {
  color: hsl(0, 100%, 50%);
}

// Also yep
.foo {
  color: rgb(255, 0, 0);
}

// Meh
.foo {
  color: #f00;
}

// Nope
.foo {
  color: #FF0000;
}

// Nope
.foo {
  color: red;
}

.foo
  color: hsl(0, 100%, 50%)

// Also yep
.foo
  color: rgb(255, 0, 0)

// Nope
.foo
  color: #f00

// Nope
.foo
  color: #FF0000

// Nope
.foo
  color: red

Při používání HSL nebo RGB notace vždy přidejte jednu mezeru po čárce (,), ale nepřidávejte žádnou mezeru mezi závorkami ((, )) a obsahem.

// Yep
.foo {
  color: rgba(0, 0, 0, 0.1);
  background: hsl(300, 100%, 100%);
}

// Nope
.foo {
  color: rgba(0,0,0,0.1);
  background: hsl( 300, 100%, 100% );
}

// Yep
.foo
  color: rgba(0, 0, 0, 0.1)
  background: hsl(300, 100%, 100%)

// Nope
.foo
  color: rgba(0,0,0,0.1)
  background: hsl( 300, 100%, 100% )

Barvy a proměnné

Pokud barvu používáte více než jednou, uložte jí do proměnné se smysluplným názvem reprezentující barvu.

$sass-pink: hsl(330, 50%, 60%);

$sass-pink: hsl(330, 50%, 60%)

Odteď budete moci používat tuto proměnnou kdekoliv chcete. Pokud je však vaše proměnná velmi svázaná s tématem, radil bych, abyste ji nepoužívali tak, jak je. Namísto toho ji uložte v jiné proměnné se jménem vysvětlující, jak by se měla používat.

$main-theme-color: $sass-pink;

$main-theme-color: $sass-pink

Tímto zabráníte problémům vyplývajících ze změny tématu jako $sass-pink: blue.

Zesvětlení a ztmavení barev

Obě, lighten a darken funkce manipulují ze světlostí barvy v HSL formátu přidáním nebo odebráním světlosti. V podstatě nejsou ničím jiným než jen alias pro $lightness parametr adjust-color funkce.

Věc se má tak, že tyto funkce často neprovádí očekávaný výsledek. Na druhou stranu mix funkce je pěkná cesta, jak zesvětlit nebo ztmavit barvu namícháním s white nebo black.

Výhoda ve využívání mix spíše než jednu z těch dvou funkcí shora je, že postupně půjde do černé (nebo bílé), jak budete snižovat poměr barvy, zatímco darken a lighten rychle sfouknou barvu do černé nebo bílé.

Pokud nechcete pokaždé psát mix funkci, můžete vytvořit dvě jednoduché funkce tint a shade (které jsou také částí Compass) aby dělaly tu stejnou věc:

/// Slightly lighten a color
/// @access public
/// @param {Color} $color - color to tint
/// @param {Number} $percentage - percentage of `$color` in returned color
/// @return {Color}
@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

/// Slightly darken a color
/// @access public
/// @param {Color} $color - color to shade
/// @param {Number} $percentage - percentage of `$color` in returned color
/// @return {Color}
@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

/// Slightly lighten a color
/// @access public
/// @param {Color} $color - color to tint
/// @param {Number} $percentage - percentage of `$color` in returned color
/// @return {Color}
@function tint($color, $percentage)
  @return mix($color, white, $percentage)

/// Slightly darken a color
/// @access public
/// @param {Color} $color - color to shade
/// @param {Number} $percentage - percentage of `$color` in returned color
/// @return {Color}
@function shade($color, $percentage)
  @return mix($color, black, $percentage)

Další četba:

• A Visual Guide to Sass & Compass Color Functions
• How to Programmatically Go From One Color to Another
• Sass Color Variables That Don’t Suck
• Using Sass to Build Color Palettes
• Dealing with Color Schemes in Sass

Seznamy

Seznamy jsou Sass verzí polí. Seznam má strukturu jednorozměrného pole (na rozdíl od mapy), které jsou navrženy tak, aby mohly obsahovat hodnoty jakéhokoli typu (včetně listů, což vede k vnořeným seznamům).

Seznamy by měly být tvořeny podle následujícího manuálu:

• buď je jednořádkový nebo víceřádkový;
• pokud je příliš dlouhý, aby se vešel na 80 znaků, musí být víceřádkový;
• pokud není používaný pro účely CSS, vždy se položky rozdělují čárkami;
• vždy musí být zabalený v závorkách;
• koncová čárka se přidává pokud je víceřádkový, pokud je jednořádkový, tak ne.

// Yep
$font-stack: ('Helvetica', 'Arial', sans-serif);

// Yep
$font-stack: (
  'Helvetica',
  'Arial',
  sans-serif,
);

// Nope
$font-stack: 'Helvetica' 'Arial' sans-serif;

// Nope
$font-stack: 'Helvetica', 'Arial', sans-serif;

// Nope
$font-stack: ('Helvetica', 'Arial', sans-serif,);

// Yep
$font-stack: ('Helvetica', 'Arial', sans-serif)

// Nope (not supported)
$font-stack: (
  'Helvetica',
  'Arial',
  sans-serif,
)

// Nope
$font-stack: 'Helvetica' 'Arial' sans-serif

// Nope
$font-stack: 'Helvetica', 'Arial', sans-serif

// Nope
$font-stack: ('Helvetica', 'Arial', sans-serif,)

Pokud přidáváte nové položky do seznamu, vždy používejte dodávané API. Nepokoušejte se přidávat položky manuálně.

$shadows: (0 42px 13.37px hotpink);

// Yep
$shadows: append($shadows, $shadow, comma);

// Nope
$shadows: $shadows, $shadow;

$shadows: (0 42px 13.37px hotpink)

// Yep
$shadows: append($shadows, $shadow, comma)

// Nope
$shadows: $shadows, $shadow

Další četba:

• Understanding Sass lists
• SassyLists

Mapy

Již od Sassu 3.3 mohou autoři definovat mapy — což je Sass termín pro asociativní pole, hashe, nebo dokonce JavaScript objekty. Mapa je datová struktura, která mapuje klíče (což mohou být jakékoli datové typy, včetně map, což bych ale nedoporučoval) k hodnotám jakéhokoli datového typu.

Mapy by se měly psát tak, jako je popsáno níže:

• mezera za dvojtečkou (:);
• otevírací závorka (() na stejném řádku jako dvojtečka (:);
• pokud je klíč textový řetězec, pak by měl být v uvozovkách (což je 99% případů);
• každý pár klíč/hodnota na svém vlastním řádku;
• čárka (,) na konci každého páru klíč/hodnota;
• koncová čárka (,) by měla být i na konci poslední položky, pro snadnější přidávání, odstraňování, nebo změnu pořadí položek;
• uzavírací závorka ()) na novém řádku;
• žádná mezera nebo nový řádek mezi uzavírací závorkou ()) a středníkem (;).

Ilustrace:

// Yep
$breakpoints: (
  'small': 767px,
  'medium': 992px,
  'large': 1200px,
);

// Nope
$breakpoints: ( small: 767px, medium: 992px, large: 1200px );

// Yep
$breakpoints: ('small': 767px, 'medium': 992px, 'large': 1200px,)

// Nope
$breakpoints: ( 'small': 767px, 'medium': 992px, 'large': 1200px )

// Nope
$breakpoints: (small: 767px, medium: 992px, large: 1200px,)

// Nope (since it is not supported)
$breakpoints: (
  'small': 767px,
  'medium': 992px,
  'large': 1200px,
)

Debugování Sass map

Pokud se někdy ocitnete ztraceni, nebo budete přemýšlet, co za šílenou magii se právě v Sass mapě děje, pak se nebojte, protože je tu stále možnost záchrany.

@mixin debug-map($map) {
  @at-root {
    @debug-map {
      __toString__: inspect($map);
      __length__: length($map);
      __depth__: if(function-exists('map-depth'), map-depth($map), null);
      __keys__: map-keys($map);
      __properties__ {
        @each $key, $value in $map {
          #{'(' + type-of($value) + ') ' + $key}: inspect($value);
        }
      }
    }
  }
}

=debug-map($map)
  @at-root
    @debug-map
      __toString__: inspect($map)
      __length__: length($map)
      __depth__: if(function-exists('map-depth'), map-depth($map), null)
      __keys__: map-keys($map)
      __properties__
        @each $key, $value in $map
          #{'(' + type-of($value) + ') ' + $key}: inspect($value)

Pokud jste zvědavi, do jaké hloubky vaše mapa sahá, přidejte následující funkci. Mixin ji zobrazí automaticky.

/// Compute the maximum depth of a map
/// @param {Map} $map
/// @return {Number} max depth of `$map`
@function map-depth($map) {
  $level: 1;

  @each $key, $value in $map {
    @if type-of($value) == 'map' {
      $level: max(map-depth($value) + 1, $level);
    }
  }

  @return $level;
}

/// Compute the maximum depth of a map
/// @param {Map} $map
/// @return {Number} max depth of `$map`
@function map-depth($map)
  $level: 1

  @each $key, $value in $map
    @if type-of($value) == 'map'
      $level: max(map-depth($value) + 1, $level)

  @return $level;

Další četba:

• Using Sass Maps
• Debugging Sass Maps
• Extra Map functions in Sass
• Real Sass, Real Maps
• Sass Maps are Awesome
• Sass list-maps
• Sass Maps Plus
• Sassy-Maps
• Introduction to Sass Maps Usage and Examples

CSS pravidla

V tuto chvíli zde uvedu, co většina asi ví, jak by měly být CSS pravidla psány (nebo alespoň jak je nejvíce uvedeno v manuálech, včetně CSS Guidelines):

• související selektory na stejném řádku; nesouvisející na nových řádcích;
• otevírací závorka ({) oddělena jednou mezerou od posledního selektoru;
• každá deklarace na svém vlastním řádku;
• mezera za středníkem (:);
• uzavírací středník (;) na konci každé deklarace;
• uzavírací závorka (}) na svém vlastním novém řádku;
• nový řádek po uzavírací závorce }.

Ilustrace:

// Yep
.foo, .foo-bar,
.baz {
  display: block;
  overflow: hidden;
  margin: 0 auto;
}

// Nope
.foo,
.foo-bar, .baz {
    display: block;
    overflow: hidden;
    margin: 0 auto }

// Yep
.foo, .foo-bar,
.baz
  display: block
  overflow: hidden
  margin: 0 auto

// Nope
.foo,
.foo-bar, .baz
    display: block
    overflow: hidden
    margin: 0 auto

Přidáním těchto pokynů k CSS budeme dávat pozor na toto:

• deklarovat lokální proměnné před jakoukoli deklarací, potom oddělit of deklarace novým řádkem;
• volání mixinů bez @content před jakoukoli deklarací;
• vnořené selektory vždy po novém řádku;
• volání mixinů s @content po vnořených selektorech;
• žádný řádek před zavírací závorkou (}).

Ilustrace:

.foo, .foo-bar,
.baz {
  $length: 42em;

  @include ellipsis;
  @include size($length);
  display: block;
  overflow: hidden;
  margin: 0 auto;

  &:hover {
    color: red;
  }

  @include respond-to('small') {
    overflow: visible;
  }
}

.foo, .foo-bar,
.baz
  $length: 42em

  +ellipsis
  +size($length)
  display: block
  overflow: hidden
  margin: 0 auto

  &:hover
    color: red

  +respond-to('small')
    overflow: visible

Další četba:

• Anatomy of a Ruleset

Řazení deklarace

Nenapadá mě snad žádné jiné téma, kde jsou názory tak rozdělené jako právě v řazení CSS deklarací. Konkrétně se dělí na dvě frakce:

• držet se abecedního pořadí;
• řadit deklarace dle typu (pozice, zobrazení, barvy, písmo, a další…).

V obou případech najdete výhody i nevýhody. Na jednu stranu je abecení pořadí univerzální (alespoň pro jazyky, které používají latinku), takže nemůže nastat situace, kdy se budete muset rozhodnout, jestli toto bude před tím, nebo ne. Každopádně vidět bottom a top od sebe je tak trochu divné. Proč by měly animace být před typem zobrazení? S abecedním pořadí existuje dost zvláštností.

.foo {
  background: black;
  bottom: 0;
  color: white;
  font-weight: bold;
  font-size: 1.5em;
  height: 100px;
  overflow: hidden;
  position: absolute;
  right: 0;
  width: 100px;
}

.foo
  background: black
  bottom: 0
  color: white
  font-weight: bold
  font-size: 1.5em
  height: 100px
  overflow: hidden
  position: absolute
  right: 0
  width: 100px

Na druhou stranu, řazení vlastností podle typu dává perfektní smysl. Každá deklarace okolo písma je u sebe, top a bottom jsou znovu u sebe a číst pravidla je jako číst krátký příběh. Ale dokud nezačnete používat nějaké konvence jako Idiomatic CSS, je tu spoustu možností jak danou věc udělat. Kde by se měla řadit white-space? Do písma, nebo zobrazení? Kam přesně patří overflow? Jaké je pořadí vlastností v dané skupině (mělo by to být abecedně, jaká to ironie)?

.foo {
  height: 100px;
  width: 100px;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  right: 0;
  background: black;
  color: white;
  font-weight: bold;
  font-size: 1.5em;
}

.foo
  height: 100px
  width: 100px
  overflow: hidden
  position: absolute
  bottom: 0
  right: 0
  background: black
  color: white
  font-weight: bold
  font-size: 1.5em

Je tu také další zajímavý způsob řazení nazývaný Concentric CSS, což vypadá, že je také populární. Concentric CSS pro určení pořadí v podstatě spoléhá na box-model.

.foo {
  width: 100px;
  height: 100px;
  position: absolute;
  right: 0;
  bottom: 0;
  background: black;
  overflow: hidden;
  color: white;
  font-weight: bold;
  font-size: 1.5em;
}

.foo
  width: 100px
  height: 100px
  position: absolute
  right: 0
  bottom: 0
  background: black
  overflow: hidden
  color: white
  font-weight: bold
  font-size: 1.5em

Musím říci, že se sám nemohu rozhodnout. Nedávný průzkum na CSS-Tricks zjistil, že přes 45% vývojářů řadí své deklarace podle typu a oproti tomu 14% abecedně. Ale je tu také 39%, kteří vše řadí náhodně, včetně mě.

Právě proto nebudu do příručky dávat doporučení na výběr. Vyberte si tu, kterou preferujete vy, jen buďte ve všech stylech konzistentní (tedy žádná náhodná možnost).

Další četba:

• CSS Comb
• Concentric CSS
• Idiomatic CSS
• On Declaration Sorting
• Reduce File Size With CSS Sorting
• Poll Results: How Do You Order Your CSS Properties?

Noření selektorů

Jedna konkrétní funkce Sass, která je až příliš zneužívána spoustou vývojářů je noření selektorů. Noření selektorů nabízí způsob, jak se autoři stylů mohou vypořádat s dlouhými selektory vnořováním menších v dalších.

Obecné pravidlo

Například následující vnořování v Sass:

.foo {
  .bar {
    &:hover {
      color: red;
    }
  }
}

.foo
  .bar
    &:hover
      color: red

… vygeneruje toto CSS:

.foo .bar:hover {
  color: red;
}

Ve stejném duchu, od Sass 3.3, je možné použít referenci na aktuální selektor (&) ke generování rozšířených selektorů. Například:

.foo {
  &-bar {
    color: red;
  }
}

.foo
  &-bar
    color: red

… vygeneruje toto CSS:

.foo-bar {
  color: red;
}

.foo-bar
  color: red

Tento způsob se často používá spolu s BEM jmennou konvencí pro generování .block__element a .block--modifier selektorů založených na originálním selektoru (tedy v tomto případě .block).

Problém s vnořenými selektory je ten, že je v konečném důsledku dělá hůře čitelné. Každý si pak musí v hlavně domyslet výsledný selektor z úrovně odsazení, což není vždy až tak jasné, jak se může zdát.

Toto tvrzení se stává skutečnější čím dál tím více, čím je aktuální selektor (&) četnější. Od nějakého bodu je také čím dál tím větší riziko, že nikdo nepochopí, co se děje, že to za to ani nestojí.

Abyste se takovýmto situacím vyhnuli, vyhýbejte se vnořeným selektorům jak jen to jde. Každopádně pro toto pravidlo je samozřejmě pár výjimek.

Výjimky

Pro začátek, je dovoleno a dokonce doporučeno nořit pseudo třídy a pseudo elementy do původního selektoru.

.foo {
  color: red;

  &:hover {
    color: green;
  }

  &::before {
    content: 'pseudo-element';
  }
}

.foo
  color: red

  &:hover
    color: green

  &::before
    content: 'pseudo-element'

Používání noření pro pseudo třídy a pseudo selektory nejenom že dává smysl (protože se vypořádává s úzce souvisejícími selektory), ale také pomáhá udržet všechno o komponentě na jednom místě.

Také když používáte třídy, které určují pravdivost, jako například .is-active, je naprosto v pořádku vnořit ji do selektoru komponenty, abyste zachovali věci v pořádku.

.foo {
  // …

  &.is-active {
    font-weight: bold;
  }
}

.foo
  // …

  &.is-active
    font-weight: bold

V neposlední řadě, když stylujete element protože musí být obsažen v nějakém specifickém elementu, je často fajn použít noření k udržení všeho o komponentě na stejném místě.

.foo {
  // …

  .no-opacity & {
    display: none;
  }
}

.foo
  // …

  .no-opacity &
    display: none

Když pracujete s nezkušenými vývojáři, selektor jako .no-opacity & může vypadat tak trochu divně. Abyste zabránili jakýmkoli rozpakům, můžete udělat velmi krátký mixin, který přemění tuto divnou syntaxi na výslovné API.

/// Helper mixin to provide simple API to selector nesting
/// @param {String} $selector - Selector
@mixin when-inside($selector) {
  #{$selector} & {
    @content;
  }
}

/// Helper mixin to provide simple API to selector nesting
/// @param {String} $selector - Selector
=when-inside($selector) {
  #{$selector} &
    @content
}

Přepsáním předešlého příkladu by to vypadalo asi takto:

.foo {
  // …

  @include when-inside('.no-opacity') {
    display: none;
  }
}

.foo
  // …

  +when-inside('.no-opacity')
    display: none

Jako asi se vším, specifika jsou poněkud nedůležitá, důležitá je konzistence. Pokud noření plně důvěřujete, klidně noření používejte. Jenom se ujistěte, že to nikomu z vašeho týmu nevadí.

Další četba:

• Beware of Selector Nesting
• The Inception Rule
• Avoid nested selectors for more modular CSS