Как придумать название класса css

Как строить структуру CSS и называть классы

Правило: перед тем, как называть класс, сначала проверьте — повторяется ли или может повторяться данный элемент на странице. Если да — придумайте ему универсальное название класса. Универсальные классы более важны, чем привязанные к конкретному месту на странице.

Стандартные названия классов для разных элементов

• navbar — верхнее меню навигации, которое может включать в себя не только меню, но и логотип, а также часто кнопки и поле поиска.
• название-родительского-класса-item — элемент какого-то списка, например — перечень работ в портфолио. Обратите внимание, что он обязательно включает в себя название класса родительского тега (например — portfolio-list-item ).
• название-родительского-класса-link — ссылка в меню (например, menu-footer-link ).
• название-родительского-класса-description — если у вас под названием какого-то элемента (например, преимущества компании) есть краткое описание ( preference-description );
• название-элемента-list — перечень чего-то, например — постов из блога ( blog-post-list ).
• название-родительского-класса-title , название-родительского-класса-heading — названия, заголовки каких-то блоков. Их лучше оформлять тегом h (например — portfolio-item-title , our-team-item-heading );
• section-title — заголовок для секции (смыслового блока, выделенного как правило фоном, отличным от соседних смысловых блоков).
• btn , button — название класса для кнопки. Модификаторы (цвет, размер) пишутся через дефис (например, btn-large или button-selected )
• модификаторы — используются если вы видите два очень похожих элемента, например — у кнопок одинаковый шрифт, радиус закругления, и padding. Если две кнопки отличаются в дизайне только характеристиками одного свойства (например, цвета или padding), то логично не создавать два разных класса с повторяющимися наборами свойств, а сделать один класс btn и класс-модификатор, который добавляет кнопке дополнительные свойства или изменяет их (например btn-primary или btn-red ).
• Правило: название модификатора должно отвечать на на вопрос «Какое свойство он меняет?» или «Какая смысловая нагрузка элемента с этим модификатором?». Например, btn-large — большая кнопка, font-medium — средний шрифт, btn-success — кнопка успешного выполнения действия.

О чем еще стоит думать на будущее в контексте вертки

1. Что случится, если в данный элемент добавить еще немного текста? Предположим, на странице есть кнопка. И вы зафиксировали ей ширину (написали в CSS — width: 150px ). А если сайт будет на нескольких языках, не повлечет ли это за собой то, что добавив в кнопку еще текста — весь дизайн полетит к чертям? Потому в данном случае, например, лучше применять паддинги, а не фиксированную ширину, чтобы кнопка могла изменять размер и подстраиваться под содержимое.
2. Что случится, если в данный проект будет добавлена еще одна страница? Предположим, у нас есть одна страница — лендинг. И для удобства на тег body были повешены какие-то свойства — например фон и какие-то отступы. Что если заказчик скажет — добавь в этот проект еще одну страницу, отдельную, нам нужно там разместить информацию, чтобы было удобно давать ссылку именно на эту страницу? Вы создадите новый HTML файл, в котором тоже будет тег body . Для двух разных страниц часто подключают одну и ту же таблицу стилей, в результате чего может быть использован тот CSS файл, где для body прописан фон и другие специфические стили. Придется переделывать первую страницу, потому что, скорее всего, на второй странице такие стили нужны не будут. Соответственно, все стили лучше всего прописывать в классах, чтобы эти классы потом можн обыло использовать на любых страницах, к которым будет подключен данный файл стилей.
3. Понятны ли названия классов другому человеку? Быстро ли другой человек разберется в структуре проекта и поймет что за что отвечает и как тут что работает? Рано или поздно в проект нужно будет вносить изменения. И не факт, что это будет его создатель. Скорее всего, к этому делу будет подключен совсем другой разработчик. Или, возможно, ваш проект будет разрастаться, и у вас появится коллега. Ваша задача — максимально быстро ввести его в курс дела, чтобы он мог быстро приступить к работе. Чем более логично выстроена структура проекта и максимально понятно названы классы и написан сам код — тем быстрее он может это сделать. Или вы, например, через год захотите этот проект актуализировать. Вам самим придется потратить намного меньше времени на то, чтобы вспомнить как тут все устроено, если названия классов и структура были выбраны правильно.
4. Не много ли я дублировал кода, можно ли его оптимизировать? Если видно, что в нескольких местах одни и те же свойства дублируются, есть смысл создать для них общий класс или придумать другой способ, чтобы не повторяться в нескольких местах. Одно из главных правил программиста — don’t repeat yourself (принцип DRY).
5. Надо ли создавать класс на этом элементе? Буду ли я для него применять CSS свойства? Не нужно создавать классы для элементов, если у этих классов нет функционального назначения. Это только затрудняет ориентацию в проекте. Видишь класс — сразу кажется, что он был создан для стилизации данного элемента. Потом не находишь его в таблице стилей или в джаваскрипте — и сразу вопрос: «А смысл было его создавать?». Когда понадобится — тогда и создадим. Если же сразу прописывать массу классов, которые ничего не делают, это засоряет код и усложняет ориентацию в проекте.

results matching » «

No results matching » «

Источник

Какие название используете для классов в HTML/CSS?

Какие название используете для классов в HTML/CSS?
Собственно, часто встречаюсь с проблемой в названии классов, идентификаторов и т.д..
Часто использую что то такое: container, wrapper, text, caption.
Но почти всегда их не хватает и не могу придумать что нибудь подходящее.
Приходиться делать так:

.wrapper - /*обвертка сайта*/ .header - /*верхняя часть сайта*/ .sidebar - /*сайдбар (левая или правая часть сайта)*/ .content - /*тело сайта (центральная часть)*/ .footer - /*нижнаяя часть сайта*/

.bl .block .box .wrap .inner .container .main

.head, .header - /*верхняя часть блока например заголовок*/ .cnt, .content, .body - /*тело блока например текс с картинкой*/ .footer - /*нижняя часть блока к примеру дата добавления, категория и т.д.*/

Колонки
.column, .col — /*колонка*/

.top /* элемент сверху */ .left /* элемент слева float:left */ .right /* элемент справа float:right */ .bottom /* элемент внизу */ .center /* элемент отцвентрирован margin:0 auto; */ .fixed - /*фиксированный элемент postion:fixed */

.next - /*следующий*/ .prev - /*предыдущий*/ .last - /*последний*/ .first - /*первый*/ .back - /*назад*/ .ahead - /*вперед*/

.xs, .tiny - /*очень маленький*/ .s, .small - /*маленький*/ .md, .medium - /*средний */ .lg, .large, .big - /*большой */ .xl, .extra-large - /*очень большой*/

.danger - /*цвет опасности*/ .default - /*стандартный цвет*/ .warning, .error - /*цве ошибки*/ .success - /*цвет успеха (к примеру верно введн код подтвержления)*/ .primary - /*основной цвет */

.button, .btn - /*кнопка*/ .loading - /*загрузка*/ .close - /*закрыть*/ .open - /*открыть*/ .touch - /*клик*/ .edit - /*редактировать*/ .more - /*больше*/ .remove - /*удалить*/ .logout - /*выход*/ .select - /*выбрать*/ .divider - /*выпадающийся список меню*/ .caret, .arrow - /*стрелочка*/ .up - /* Вверх */ .down - /* Вниз */ .delete - /* удалить */ .reply - /*ответить*/

.profile - /*профиль*/ .person - /*человек*/ .ava, .avatar - /*аватарка, картинка*/ .name - /*имя*/ .description - /*описание*/ .address - /*адресс*/ .nickname - /*ник*/ .birthday - /*дата рождения*/ .sex - /*пол*/ .author - /* автор */

.title - /*заголовок*/ .short-title - /*скороченный заголовок*/ .full-title - /*полный заголовок*/

.text, .txt, .paragraph - /*текст*/ .info, .information - /*информация*/

.image, .img - /*картинка*/ .icon, .ic - /*иконка*/ .bg - /*фоновая картинки или цвет*/

.search, .form-search - /*поиск по сайту*/ .input - /*текстовый элемент*/ .form - /*форма*/ .form-group - /*группа элементов формы*/ .help-block - /*текст подсказки*/ .label - /*название элемента формы*/

.type - /*тип*/ .cat, .category - /*катигория*/ .subcat, .subcategory - /*подкатегория*/ .section - /*раздел*/ .subsection - /*подраздел*/

.video .play - /*пуск*/ .stop - /*стоп*/ .pause - /*пауза*/

.social - /* социальные сети */ .vk - /*вконтакте*/ .fb - /*фейсбук*/ .twit - /*твиттер*/ .inst - /*инстаграм */

.none - /*скрытый элемент*/ .disabled - /*заблокированный*/ .active, .current - /*активный */ .selected - /*выбраный*/ .visible - /*видный элемент*/ .focus - /*нажатый*/

.time - /*время*/ .date - /*дата*/ .day - /*день*/ .month - /*месяц*/ .year - /*год*/

Очистка
.clear, .clearfix, .clr — /*очистка*/

.separator, .divide - /*разделитель вертикальный для слов */ .br, .line - /*разделитель горизонтальный для блоков*/

.logo - /*лого сайта*/ .new - /*новинка*/ .sale - /*распродажа*/ .feedback - /*обратная связь*/ .support - /*помощь */ .group - /*группа*/ .module - /*модуль*/ .posters - /*пост*/ .form - /*форма*/ .tabs - /*вкладки*/ .slider - /*слайдер*/ .news - /*новости*/ .table - /*таблица*/ .full - /*полный*/ .breadcrumbs - /*Хлебные крошки*/ .pagination, .pager - /*Нумерация страниц*/ .navbar, .nav, .menu, .navigation - /*Навигация (меню)*/ .dropdown - /*выпадающейся меню */ .comment - /*комментарий*/ .subscription - /* Подписка */ .special - /* особенный элемент */ .standard - /* стандартный элемент */ .screens - /* Скрины */ .rate - /* рейтинг */ .online - /* онлайн */ .panel - /* панель */ .popup - /* попап */ .version - /* версия */ .page - /* страница */ .banners - /* баннер */ .map - /* Карта */ .more - /*еще, подробнее*/ .tags - /* тег */ .price - /* цена */

Источник