Vytvoření čistšího kódu znamená překročit rámec a přemýšlet o tom, co skutečně představuje.

Rámečky CSS poskytují řešení pracovního postupu, a to rychlé nasazení rozvržení webových sítí založených na síti. Jeden z nejpopulárnějších rámců dnes je 960 Grid System ( 960.gs ), pojmenované podle jeho výchozí šířky. S praxí může být 960.gs skvělým nástrojem pro každého webdesignera. Ale také se vrací k několika starým problémům.

Než se společnost CSS setkala s rozšířeným používáním, tabulky poskytovaly veškeré rozvržení, které webdesigner potřeboval. Složitější designy obsahovaly tabulky vložené do tabulek, ale v nadbytku používané tabulky vytvářely zamotaný nepořádek HTML. Rozvržení založené na CSS lákají návrháře s příslibem méně HTML; také apelovali na sémantické nadšence. Jednoduše řečeno, CSS podpořilo použití HTML, který popisoval, o jaký obsah se jednalo, a ne jak by to mělo vypadat.

Jak se návrháři naučil používat CSS, div prvky nahradily tabulky. Ale divy mohou být - a často jsou - vnořené, stejně jako tabulky.

Šíření tříd-itis a div-itis

Jasný, štíhlý kód nabízí mnoho výhod. Je snadné jej opravit, rychle stáhnout a způsobit menší problémy v různých typech prohlížečů. Relevantní značky pomáhají čtenářům obrazovky, vyhledávačům a mobilním zařízením interpretovat význam kromě rozvržení.

Jiné než sémantika, velká výhoda použití

Do rámců CSS, jako je např. 960.gs, znovu vytvoříte základní problém s tabulkami? Pokud je jejich cílem efektivní HTML, mohou návrháři a vývojáři používat 960.gs bez šíření "class-itis" (tj. Nadměrné užívání tříd) a "div-itis" (tj. Ano, mohou.

Abychom pochopili, musíme se podívat na samotný rámec.

Rundown z 960.gs

960.gs poskytuje sadu sloupců napsaných v CSS, které usnadňují ukládání webových stránek. Stáhněte soubory, přidejte je na své webové stránky a je připraveno jít. Neexistují žádné speciální pluginy nebo nové technologie a můžete je použít ve spojení s dalšími soubory CSS.

Sloupce jsou obsaženy v blocích nazývaných (přirozeně) "kontejnerech". Výchozí hodnoty jsou container_12 a container_16 , které se dělí na 12 a 16 sloupců. K dispozici jsou vlastní velikosti.

Výše uvedený diagram zobrazuje dva výchozí kontejnery s 12 a 16 sloupci. Šedá stránka nebude samozřejmě vidět na vašem konečném webu. Sloupce pouze ukazují, kde lze uspořádat bloky nazvané "mřížky".

Mřížka je blok obsahu, který může v kontejneru překročit více než jeden sloupec. Mřížky plavou vlevo kvůli držení .container_x , což je ideální pro modulární uspořádání. Šířka každého bloku je určena podle toho, kterou mřížku použijete na něj: grid_1 je jeden sloupec široký, grid_5 je pět sloupců široké atd.

Výše, .container_12 drží tři mřížky. Každá mřížka by naopak obsahovala různé prvky obsahu stránky.

Výše, .container_16 obsahuje dva bloky 12 a 4 sloupce. Jako .container_12 , toto 16-sloupcové rozložení má šířku 960 pixelů, ale jeho sloupce jsou užší.

Změna velikosti mřížek, ve kterých jsou prvky obsahu uloženy, je jednoduché: změňte nastavení grid_x v každé div.

Oficiální webové stránky 960.gs zobrazuje webové stránky, které byly vytvořeny v rámci, a také poskytuje šablony stránek, odkazy na generátor vlastní sítě a vlastní rámec. Podrobné pokyny jsou také zahrnuty, protože je potřeba se dozvědět více. Okraje mřížky a schopnost procházet okapy mezi mřížkami činí systém ještě flexibilnější.

Navzdory těmto výhodám, vkládání

Řešení

Argumentovat proti tabulkám pro rozložení je dost snadné. Použití tří nebo více úrovní vnořených divů však problém nevyřeší - pouze nahrazuje jednu sadu značek jinou. Rámy pomáhají, ale nevyřeší vždy dilema. S malým předpokladem je možné se vyhnout mnoha problémům.

Používejte pouze třídy, které skutečně potřebujete

Nejjednodušším řešením nadměrného kódu CSS je vyřešit to, co není nutné. 960.gs byl koncipován jako nástroj pro drátování, který má být nahrazen, když web funguje. Obsahuje více než 180 definic třídy.

Pokud váš návrh je strukturován na, řekněme, .container_12 a nikdy nepoužívá víc než .grid_5 a .grid_7 , poté je odeberte z CSS.

Použijte třídu = "grid_x" na příslušné prvky: nadpisy, obrázky, odkazy, odstavce

The .container_x a .grid_x třídy nejsou omezeny na prvky div. The atribut třídy lze použít na libovolný prvek kromě html , head , meta , param , script , title a style - tak, prakticky cokoli v body . Pokud dvojice značek div obklopí pouze jednu položku, pak nemusí být nutné.

Použití kódu mřížky na ne-div

Použití div	Použití sémantického kódu
…	…
… … … …	… … … …
#"> ... ... ...	#" class=grid_3> … … … #" class="grid_3">… … … … #" class="grid_3">… … … … #" class="grid_3">… … … … #" class="grid_3">… … … …

Přidělit vlastnosti Grid na určité prvky

Být jednoduchý CSS, .grid_x má vlastnosti, které by fungovaly s jakýmkoli jiným názvem třídy nebo jakýmkoli prvkem. Kopírováním vlastností na určité prvky se další třídy stávají zbytečnými.

.examples li { (properties of .grid_4) }

…
…
…

Níže, použití mřížky na položky seznamu vytvoří i sloupce s minimálními změnami v kódu HTML.

CSS změní výše uvedený seznam na skupinu s více sloupci. Pokud potřebujete normální seznam s body odrážky, stačí vyřadit class="examples" atribut. Je to sémantické? Jistě - dokud si obsah zaslouží seznam. CSS pouze mění, jak je zobrazena každá kulička.

Další příklad:

.photos p { (properties of .grid_10) }.photos img { (properties of .grid_6) }

First caption
Another caption

Tím se automaticky umístí titulky, které jsou přiloženy k odstavcům, přiléhající k fotografiím.

Pokud tabulky nejsou vhodné, lze tabulkový efekt snadno vytvořit pomocí HTML bez tabulky.

.datelist { (properties of .container_12) }.datelist h3 { (properties of .grid_3) }.datelist p { (properties of .grid_7) }.datelist strong { (properties of .grid_1) }

subhead
…
3 p.m.Jan 1, 2010
subhead
…
3 p.m.Jan 1, 2010

Výše uvedený příklad je plán událostí, v nichž každá "buňka" v tabulce má jinou značku, která odráží její jedinečný obsah, spíše než to, štítek. (Ideální? Možná ne. HTML nerozlišuje mezi skupinami obsahu.)

Použití .grid_x Vlastnosti ostatním prvkům vyžadují určité plánování, ale výsledkem je menší HTML a nezasahuje do samotného 960.gs.

Použití tříd v mateřských položkách, nikoli v položkách pro děti

Div-itis a class-itis nejsou omezeny na rámec CSS.

Všechny příklady v poslední části sdílejí zajímavý rys: v každém z nich je pouze jedna třídní deklarace. Kdekoli se stejný atribut třídy používá několikrát za sebou v HTML, změňte rodiče namísto dětí.

Zbytečné:

.item { (various properties) }

…
…
…
…
…
…

Všichni šest prvků mají třídu. Jsou nadbytečné, protože třídy jsou totožné. Zde je lepší způsob:

.group-of-items li { (various properties) }

…
…
…
…
…
…

Nápravou pro class-itis je přiřadit rodičovský prvek jediné třídě. Voliče CSS dělají práci a používají styly pro všechny

…
…
…
…
…
…
…
…

.title { (various properties) }.subhead { (various properties) }.publication-date { (various properties) }.body-text { (various properties) }