Соглашение об именах классов CSS

На веб-странице есть два блока элементов управления (первичный и вторичный), какие имена классов будут использовать большинство людей?

Выбор 1:

<div class="primary controls">
 <button type="button">Create</button>
</div>

<div class="secondary controls">
 <button type="button">Edit</button>
 <button type="button">Remove</button>
</div>

Выбор 2:

<div class="primary-controls controls">
 <button type="button">Create</button>
</div>

<div class="secondary-controls controls">
 <button type="button">Edit</button>
 <button type="button">Remove</button>
</div>

Ответы

Ответ 1

Прямой ответ на вопрос прямо под этим, Курт.

Если вас интересуют соглашения об именах css-класса, я предлагаю рассмотреть одно очень полезное соглашение с именем BEM (Block, Element, Modifier).

UPD. Подробнее об этом читайте здесь http://getbem.com/naming/ - более новая версия, которая делает следующий ответ устаревшим.

Основные принципы:

  • Страница построена из независимых блоков. Блок - это элемент html, имя класса которого имеет префикс "b-", такой как "b-страница" или "b-login-block" или "b-controls".

  • Все селектора css основаны на блоках. Не должно быть никаких селекторов, которые не начинаются с "b-".

Хорошо:

.b-controls .super-control { ... }

Плохо:

.super-control { ... }
  • Если вам нужен еще один блок (на другой странице, возможно), похожий на блоки, который у вас уже есть, вы должны добавить модификатор в свой блок вместо создания нового.

Пример:

<div class="b-controls">
    <div class="super-control"></div>
    <div class="really-awesome-control"></div>
</div>

С модификатором:

<div class="b-controls mega"> <!-- this is the modifier -->
    <div class="super-control"></div>
    <div class="really-awesome-control"></div>
</div>

Затем вы можете указать любые изменения в css:

.b-controls { font: 14px Tahoma; }
.b-controls .super-control { width: 100px; }

/* Modified block */
.b-controls.mega { font: 20px Supermegafont; }
.b-controls.mega .super-control { width: 300px; }

Если у вас есть какие-либо вопросы, я был бы рад обсудить это с вами. Я использую BEM два года, и я утверждаю, что это лучшее соглашение, которое я когда-либо встречал.

Ответ 2

Я бы пошел с:

<div class="controls primary">
 <button type="button">Create</button>
</div>

<div class="controls secondary">
 <button type="button">Edit</button>
 <button type="button">Remove</button>
</div>

Пока ваш CSS структурирован правильно, primary и secondary не должны сталкиваться ни с чем другим в вашем приложении:

.controls.primary {}

Заметьте, что я также поставил controls перед primary/secondary в коде, так как это ваш основной класс.

Я думаю, что первый набор ниже намного читаем, чем второй:

.controls.primary {}
.controls.secondary {}


.primary.controls {}
.secondary.controls {}

Ответ 3

Существует большая альтернатива NCSS.

Именованные каскадные таблицы стилей - это соглашение об именах и руководящие принципы для семантический CSS.

Почему:

Массивный CSS раньше был кошмаром при работе над проектами с разными разработчиками. Отсутствие конвенций и руководящих принципов приведет к недостижимому шару грязи.

Цель:

Предсказуемая грамматика для CSS, которая предоставляет семантическую информацию о шаблоне HTML.

  • Какие теги, компоненты и разделы затронуты
  • Каково отношение одного класса к другому

Классы:

Именованные каскадные таблицы стилей делятся на:

  • Пространство имен
  • Структурные классы
  • Классы компонентов
  • Классы классов
  • Классы модификаторов
  • Функциональные классы
  • Исключения

Дополнительная литература: https://ncss.io/documentation/classes

<сильные > Примеры:

<!-- header -->

<header id="header" class="foo-header"> 
    <h1 class="foo-title-header">Website</h1>
</header>

<!-- main -->

<main class="foo-main foo-wrapper">

    <!-- content -->

    <article id="content" class="foo-content">
        <h2 class="foo-title-content">Headline</h2>
        <div class="foo-box-content">Box</div>
    </article>

    <!-- sidebar -->

    <aside id="sidebar" class="foo-sidebar">
        <h3 class="foo-title-sidebar">Headline</h3>
        <p class="foo-text-sidebar">Text</p>
    </aside>

</main>

<!-- footer -->

<footer id="footer" class="foo-footer">
    <div class="foo-box-footer">Powered by NCSS</div>
</footer>

Дополнительная литература: https://ncss.io/documentation/examples

Инструменты:

Установка:

npm install ncss-linter

Подтвердите строку HTML:

bin/ncss-linter --html='<div class="box-content"></div>'

Проверить локальный путь:

bin/ncss-linter --path=templates/**/*.html --namespace=foo

Подтвердите удаленный URL-адрес:

bin/ncss-linter --url=https://redaxmedia.com --namespace=rs --log-level=info

Дополнительная литература: https://ncss.io/documentation/tools