Соглашение об именовании классов 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>
4 62
css naming-conventions

4 ответа:

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

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

обновление

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

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

  • страница строится из независимых блоков. Блок представляет собой HTML-элемент, который имеет имя класса "Б-" префикс, такой как "b-page" или "б-логин-блок" или "б-регулирование".

  • все селекторы 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; }

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

76

Я бы пошел с:

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

есть отличная альтернатива под названием NCSS.

именованные Каскадные Таблицы Стилей-это соглашение об именовании и руководство для семантический CSS.

почему:

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

цель:

A предсказуемая грамматика для 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

3

Twitter использует костюм CSS:

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

тот же автор также написал идиоматический CSS:

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

1