Десятка самых используемых имен классов CSS

Часто веб-мастера озадачиваются назначением имен классов и обычно это заканчивается тем, что они используют неправильные.

Имена классов не должны описывать то, как элемент выглядит или где он находится. Хорошее имя класса должно описывать то, что именно из себя элемент представляет.

Вот вам десятка имен классов с объяснениями. Надеюсь, она покажет вам более определенную картину того, какого вида имена классов вам следует использовать.

class="fixed"

Лучше всего использовать class="fixed" в каждой таблице стилей. Это название класса назначается на контейнерный элемент, который содержит не закрепленные(floated) элементы, и используется, чтобы согласовать не закрепленные элементы(floats) в пределах контейнера между собой:

И так, в этой ситуации:

...где картинки расположены одна за другой, используем:

...вот и всё.

class="alt"

Alt — сокращение от слова "альтернатива". Используем это имя класса там, где есть группа элементов, стилизованная определенным способом, но имеются маленькие отличия у некоторых её элементов. Например, изображения прижаты к правому или левому краю.

class="selected"

Это название класса используем в навигации, на выбранном пункте меню:

class="first", class="last"

Пока псевдо-классы :first-child и :last-child не поддерживаются во всех браузерах, можно придерживаться class="first", class="last". Используем эти имена классов, чтобы выбрать первого и последнего потомка определенного элемента. Это великолепный метод в сокращении ненужной разметки.

class="image"

Обычно выбираем картинку с тэгом #content img, но это имя класса используется для контейнера изображения (p class="image"), когда возникает нестандартная ситуация. Скажем, у вас есть список новостей и вам нужно поставить картинку с заголовком ниже новостей, прижатой к левому краю и концу текста, идущего перед ней. Используем:

class="inner"

Главным образом используется в целях представления. Назначаем class="inner" к дополнительным вложенным контейнерам (DIV) в случае, если понадобится дополнительная стилизация (на пример, двойной фон).

class="link"

Как говорит название, используем это имя класса для ссылок. :) Но лучше помещать его в контейнер, обычно тэг P. Самое распространенное использование с кнопками "читать дальше".

Например, можно поставить якорь(анкор) в тег P с .link a , и применить специфический стиль к абзацу.

class="one", class="two", class="three"...

Используем это имя класса, когда нужно выбрать каждый элемент индивидуально. Чаще всего применяется, когда нужна замена изображения в навигации:

class="even", class="odd"

Эти имена классов используются для альтернативных рядов в таблицах или списках:

или

class="section"

Это имя класса формально известно как "бокс". :) Используем его для определенных секций контента, когда нужна какая-нибудь специальная стилизация.