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

Question

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

Вариант 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>

Answer 1

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

Если вас интересуют соглашения об именах классов CSS, я предлагаю рассмотреть одно очень полезное соглашение под названием BEM ( Блок, Элемент, Модификатор ).

ОБНОВЛЕНИЕ

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

---

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

• Страница построена из независимых блоков.Блок - это элемент HTML, имя класса которого имеет префикс «b-», например «b-page» или «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 в течение двух лет, и я утверждаю, что это лучшее соглашение, которое я когда-либо встречал.

Answer 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 {}

Answer 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

Answer 4

Твиттер использует SUIT CSS:

https://github.com/suitcss/suit/blob/master/doc/README.md

Тот же автор также написал Idiomatic CSS:

https://github.com/necolas/idiomatic-css