Je CSS vážně tak podivné?

Martin Michálek @machal

Metody organizace stylů vycházejících z jejich podstaty.

Ahoj, jsem Martin

vrdl.cz/martin

CSS v Javacriptu

https://medium.com/@steida/css-in-js-the-argument-refined-471c7eb83955

Dost se mluví o CSS v JS. Někdy fajn cesta, ale je potřeba říct, že ne všechny vlastnosti CSS jsou špatné. A že se díky nim dají styly psát a organizovat rozumně.

CSS je fakt divný jazyk.

😠

Na začátku každé části nechám promluvit CSS hejtry.

CSS = design?

Ano, každý kdo píše CSS, by měl umět uvažovat alespoň trochu jako designér. Ale to neznamená, že CSS není kód a že není potřeba vývojářských znalostí.

Čím více v CSS „programujete“, tím horší výstup má

S extendy, zanořováním, mixiny a dalšími pokročilými vlastnosti preprocesorů jde napáchat mnoho škod. Kdy jste naposledy četli zkompilované CSS?

Standardizace: Code Guide

codeguide.co

Standardizace: Stylelint

stylelint.io

Kaskáda, specificita, pořadí vlastností…

WTF?!

😠

Pořadí deklarací

https://codepen.io/machal/pen/YVgOZY

Bude <div> zelený nebo bílý? Samozřejmě zelený. Záleží totiž jen na pořadí deklarací v CSS. Toho se dá využít.

Specifičnost

https://specificity.keegan.st

Složité selektory už způsobily tolik bolehlavů… Selektor vyšší váhy má přednost, i když je ve stylech první. Vždy proto držte váhu selektorů co nejníže.

Chování

Graf specifičnosti

cssstats.com

Graf specifičnosti by měl narůstat postupně. Když jsou na začátku takhle vysoké vrcholky, budete asi jednou muset použít !important. A to nechcete, věřte mi.

ObsahHTML

PrezentaceCSS

ChováníJavascript

Vrstvení — princip webu i CSS

ITCSS: Vrstvení a přidávání specificity

Organizační metodika ITCSS se kromě jiného snaží specifičnost postupně zvyšovat. Trumps jsou „helper třídy” a ty už klidně mohou mít třeba !important.

OOCSS

1. Nezávislost na HTML

.nav > li ! .nav-item

2. Nezávislost na kontejnteru

.pg-broadcast .nav-tabs ! .nav-tabs-full-width

3. Co nejnižší specifičnost

#component ! .component

4. Objekt, element, modifikátor

.nav — .nav-item — .nav-full-width

http://www.vzhurudolu.cz/prirucka/oocss

Pro objekty a komponenty doporučuji metodiku OOCSS. Pro každý objekt máme jednu třídu.

Globální platnost? Nemožnost izolace? Sorry jako.

😠

BEM pojmenovávací konvence

https://www.slideshare.net/robinpokorny/react-a-omyly-css

Globálnost všeho v CSS je pořád problém. Zčásti se dá s trochou vynaložené energie vyřešit pojmenovávací konvencí BEM.

Block .nav-tabs

Element .nav-tabs__item

Modifier .nav-tabs--level-1

Element Modifier .nav-tabs__item--full

BEM pojmenovávací konvence

http://www.vzhurudolu.cz/prirucka/bem

BEM zavádí význam k OOCSS třídám tak, aby se nám nepletly jejich jednotlivé typy.

BEM: Příklad

<div class="nav-tabs nav-tabs--level-1 nav-tabs--full">

<div class="nav-tabs__inner">

<ul class="nav nav-tabs__list">

<li class="nav-tabs__item nav-tabs__item--active">

…

</li>

</ul>

</div>

</div>

http://www.vzhurudolu.cz/prirucka/bem

I z HTML je pak jasně vidět jaké komponenty a jejich modifikace či elementy používáme. Ve zkratce – jaká je struktura komponent.

Kde je nějaká modularita, vole?

😠

Servírovací modularita s HTTP/2 už brzy

https://jakearchibald.com/2016/link-in-body/

CSS soubor je ohromný,

opakující se monolit.

😠

http://www.vzhurudolu.cz/blog/82-tachyons-nejremeslnici

Tachyons: Subatomické třídy

https://github.com/machal/blanka-html/

Kompromis: Helper třídy pro nejčastější modifikace

Subatomické třídy mají své nevýhody. Je ovšem vhodné je použít pro nejčastější drobné modifikace komponent.

Atomic Design

http://vrdl.cz/p/pattern-lab

Jeden z klíčů k jednodušší organizaci CSS je už v designu: Dobře navržený systém designu nezpůsobuje tolik duplicit. Komponenty jsou prostě menší, atomické.

Příliš monolitické komponenty

Part of the molecule: .media-block .img-wrap .thumb

Part of the molecule: .media-block.size-2 h4

Part of the molecule: .media-block.size-2 p

Rozbití do atomů

Reusable atom: .thumb

Reusable atom: .title

Reusable atom: .perex

1) Neprogramujte 2) Používejte Stylelint a CodeGuide

3) Pište to v OOCSS a BEM 4) Zvažte ITCSS

5) Zaveďte HTTP/2 6) Chtějte atomický design

🤔

Díky!

vrdl.cz/ebook-responzivni

@machal www.vzhurudolu.cz

😍