23. 11. 2009

Lepší být první než poslední (CSS třídy .first a .last v praxi)

Třídu .last používá mnoho kodérů (a CSS frameworků) pro označení posledního prvku řady, který má nést odlišné vlastnosti.

CSS:

.column
{
float: left;
margin-right: 20px;
width: 300px;
}

.last
{
margin-right: 0;
}

HTML:

<div class="column">...</div>
<div class="column">...</div>
<div class="column last">...</div>

Není to ale nejlepší nápad. Představte si, že HTML kód bude velmi strukturovaný nebo prvků třídy .column desítky. Pak si představte, že takhle složitý kód psal někdo jiný a že se jej snažíte pochopit.

Odlišovací třídu na prvku posledním najdete mnohem hůře než na prvku prvním.

Doporučuji proto výjimky vždy přidávat na první prvky pole. Tedy v HTML:

<div class="column first">...</div>
<div class="column">...</div>
<div class="column">...</div>

Namísto třídy .first si do úvahy samozřejmě klidně dosaďte standardní pseudotřídu :first-child, pokud se nekamarádíte s IE6.

Komentáře

Tagy: css html spravovatelnost kódu

Reklama: Kurz HTML5 a CSS3 — snadnější život na front-endu
S pomocí nových vlastností CSS3 a HTML5 ušetříte čas, který pak můžete vrátit uživatelům vašeho webu — v podobě bohaté sémantiky, rychlého načítání nebo snadnějšího prohlížení na mobilních zařízeních.

blog comments powered by Disqus
Web Statistics