Стандарты названий css классов и id

Обозначающие расположение.
При создании Web-страниц необходимо определять названия контейнеров на странице указывающие на расположение контейнера. Вот очень хорошие название классов:

* top-panel
* horizontal-nav
* left-side
* center-column
* right-col

Все эти названия валидны для использования в CSS и XHTML. Они являются простыми и четко описывают расположение контейнера и выполняют свою миссию - идентифицируют элемент страницы.

Главная проблема таких названий состоит в том, что они ссылаются на позицию размещения элемента на странице и могут быть несоответствующими и запутывающими если элемент разместить в другом месте страницы.
Структурные (описывающие действия).
Структурные названия классов создаются для того, чтоб описать действие для которого предназначен контейнер.

* branding
* main-nav
* subnav
* main-content
* sidebar

Эти названия являются не менее понятными, чем обозначающие расположение. Но в отличии от обозначающих расположение, структурные названия описывают действие класса, а не местоположение. Структурное обозначение названий классов устраняет беспорядок, если изменить положение контейнера, так как они не связаны с местоположением на странице.
Общие названия.
Проанализировав названия CSS большого количества сайтов, мы выбрали названия которые очень часто встречались в разных сайтах. Вот самые общие названия классов:

* header
* content
* nav
* sidebar
* sidebar

Можно с уверенностью сказать, что эти названия стали неким "стандартом названий классов", так как приминение этих названий можно встретить практически на всех современных сайтах. Очень сложно переоценить важность общих названий классов, так как использование стандартизированных названий облегчает поиск и обновление общих элементов на разных сайтах, что позволяет создать устоявшуюся структуру для создания сайтов. Оригинал статьи css справочники
21:59 24.03.2017



Отзывы и комментарии
Ваше имя (псевдоним):
Проверка на спам:

Введите символы с картинки:



Празднуем День филолога. Каким блюдом уважить себя и коллег?

Празднуем День филолога. Каким б...

Сегодня для некоторых из нас знаменательный день: праздник всех, кто так или иначе связан с наукой филологией. А наука филология неразрывно связана с искусством. Это и поэзия, и проза, и захватывающи...
Гарри Поттер и принц-полукровка / harry potter and the half-blood prince (2009) DVDRip

Гарри Поттер и принц-полукровка ...

На шестом году обучения в Школе Чародейства и Волшебства Хогвартс Гарри Поттер продолжает попытки уничтожить Волан-де-Морта. Используя старинный учебник зельеварения, некогда принадлежавший «Принцу-по...
Чем наполнять свой сайт? Чистыми текстами

Чем наполнять свой сайт? Чистыми...

Просматривая те или иные сайты, каждому из нас приходилось сталкиваться с фразами, которые перегружены «ключевыми» словами. «Пластиковые окна… окна пластиковые…»....
Анонимные комментарии. В чём плюсы, а в чём минусы?

Анонимные комментарии. В чём плю...

На заре Интернета процветал такой вид сервисов как «форумы». Сотни тысяч людей проводили там огромное количество времени и оставляли там свои мысли. Создателем новой ветки обсуждения мог с...
ПЕРСПЕКТИВНОЕ направления в бизнесе СЕГОДНЯ. Учимся эффективно РАБОТАТЬ и ЗАРАБЫТЫВАТЬ на курсе «MI

ПЕРСПЕКТИВНОЕ направления в бизн...

Автор курса: Михаил Климанов - один из первых разработчиков программ командобразования в России. На счету агентства «Мы» и его партнёров - сотни успешных выездных мероприятий по всему миру...
Какую подсветку выбрать для вывески?

Какую подсветку выбрать для выве...

Лучше всего, конечно, довериться профессионалам из рекламного агентства, в котором Вы планируете заказывать вывеску (вы ведь не планируете изготавливать ее своими силами J). Но всегда лучше, если Вы х...
ПсихологияHi-TechФлора и фаунаРемонт и СтроительствоЗдоровье и МедицинаЕда, рецептыКультура и искусствоНаука и образованиеРабота и карьераДом и семьяИнтимная жизнь
Познавательное:

Новости развития информационнного портала:

Наш портал является ресурсом, который включает в себя обширный список полезных и отличных статей. Каждый посетитель найдет для себя что-нибудь полезное. Адаптированный дизайн позволяет вам максимально быстро находить необходимую информацию. Самые разнообразные тематические статьи дают возможность вам совершенствоваться в той или иной сфере. Быть более начитанным и грамотным. Современный дизайн сайта позволяет просматривать статьи на всех существующих планшетах. Теперь отыскать нужную информацию стало совершенно легко.

Мы собрали для вас познавательные и отличные статьи. На нашем сайте вы отыщите ответы на необходимые для вас вопросы. Простая система поиска дает возможность вам не тратя время отыскать нужную информацию. Адаптированный дизайн позволяет вам просматривать информацию на абсолютно любых электронных устройствах. Отныне, поиск требуемой информации будет занимать у вас считанные секунды.