CSS Coding Standards rubrika: Kódování: CSS
1
nanuqcz
Ahoj,
jsem programátor (primárně dělám PHP), ale občas potřebuji i něco nakódovat. A tady narážím na problém, že nevím, jak pojmenovat (jakou CSS třídou, případně jakým ID) jednotlivé divy.
- Nevím, jestli pojmenovávat `mujNazev`, `muj-nazev`, nebo `muj_nazev`
- Nevím, jaký název vlastně zvolit. A tak vznikají paskvily typu `class="fleft left"`, `class="outer-container-menu"`, apod.
Pro programovací jazyky existují tuny "coding standards", které říkají, jestli oddělovat podtržítky, nebo velkými písmeny, jak pojmenovávat názvy proměnných a metod atd. Existují i nějaké doporučené techniky psaní HTML/CSS? Nejlépe, abych kvůli tomu nemusel kupovat žádnou knihu :-)
Díky
5
Adam Kudrna
K dotazům:
- Pro CSS třídy doporučuji určitě volit
nazvy-s-pomlckou. Zajímavý je přínos, který zmiňuje ic, totiž selektor*[lang|="en"], byť se přiznám, že jsem ho zatím nevyužil a spíše používám vícenásobné třídy (v HTML třebaclass="media video", v CSS pak.mediaa.media.video). Pokud používáte Twitter Bootstrap a jeho arzenál LESS mix-inů, s ním konzistentní názvy tříd jsou velikou výhodou, ne-li nutností. Z čistě estetického hlediska pak může hrát roli fakt, že HTML je lowercase jazyk a třeba camelCase se v něm tolik nevyjímá. - Názvy tříd by měly vycházet z objektového přístupu (OOCSS) a neměly by tedy popisovat vzhled, nýbrž funkci, a to maximálně abstrahovanou. I dekorace poměrně komplikovaných grafických návrhů lze s úspěchem nakódovat pomocí pseudo elementů
:beforea:after, aniž by bylo nutné zahlcovat jinak sémantické HTML, v kterém by se dekorace beztak neměly vyskytovat (pochopitelně, někdy to jinak nejde).
Používáte-li CSS preprocessor (LESS, SASS aj.), budete patrně řešit také názvy proměnných a mix-inů. V kombinaci s frameworkem Twitter Bootstrap se mi osvědčil následující @nazevPromenne, .nazevMixinu() a .nazev-tridy, která je zamýšlená i jako mix-in. Veškeré pojmenování je samozřejmě v angličtině.
Pro JavaScriptovou funkcionalitu přiřazovanou přes CSS třídy je výhodné prefixování, např. js-sticky. Názvy ID jsou pak na pomezí HTML a JS zápisu. V tomto případě nemám vyhraněný přístup, ze zkušenosti ale spíše převažuje camelCase pojmenování, ale ID s pomlčkou jsou také dobře možná.
Co se týká coding styles, zdrojů je mnoho, přesto asi žádný nelze označit za ten jediný správný. Navíc když už naleznete standardy vyhovující CSS, ztroskotáte na podobě zápisu LESS či SASS. Ve svých LESS stylopisech vycházím z Google HTML/CSS Style Guide přizpůsobeného podle toho, co ze zkušenosti lépe funguje — snad jediným rozdílem oproti uvedené metodice je řazení CSS vlastností do logických celků (obsah, pozice, box model, typografie, dekorace, ostatní) a odsazování začátku řádků tabulátory. Vedlejší výhodou je také konzistence s coding styles Bootstrapu (vyjma zmíněného odsazení).
Pro zobrazení všech 7 odpovědí se prosím přihlaste:
Nebo se přihlaste jménem a heslem: