Rules for naming css classes

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

My naming guide for CSS classes

CosmoMyzrailGorynych/css-naming-guide

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

1. simple,
2. readable,
3. predictable,
4. easy to use and code,
5. concise and sufficient,
6. modular,
7. extendable.

The guide is built on the idea of semantic classes, containers, modifiers, junctions, and mimics, and defines the relations between each other and between them and HTML tags/web components. The guide doesn’t cover the use of pseudoselectors or entities outside of semantic classes, containers, modifiers, junctions, mimics group.

1. Semantic classes start with a (or an ) and follow the camelCase pattern: aButtonGroup , aCard , aFeature , anInfoBox . A semantic class is applied to describe a custom block built upon existing HTML tags or custom elements (aka web components).
2. Containers for a collection of other entities with semantic classes follow the PascalCase pattern, and name items in pluralForm: Cards , MenuItems , Features . These classes imply that certain semantic classes exist. ( .aCard , aMenuItem , aFeature .)
   • Some entities are… particularly amusing in English and describe a semantic class instead of a container. For example, News and Docs .
3. Modifiers follow the lowercase pattern. A modifier is a class that is applied to tweak the appearance of arbitrary tags, be they bare HTML tags or blocks with semantic classes/container classes. Examples:
   • Font size modifiers: .small , .large .
   • Generic color modifiers, plus those that add semantic meaning with color: .red , .orange , .blue , .error , .warn , .info .
   • Layout tweaks: nomarginleft , nopaddingright , inlineblock , block .
   • Visibility flags: hide , show .
   • Semantic modifiers: .secondary , .primary .
   • State descriptors: .active , .selected , .disabled , .removed .
4. Junctions are CSS rules that target specific elements that may exist in the described form (in its visual state and behavior) only inside specific parents. They are written as two or more class names/web component names joined with a hyphen ( — ). A parent must be either an element with a semantic class or a web component. A child must be either a container or a semantic class.
   • For example, you may want to describe an icon inside .aDownload blocks. The style for this icon is unique and is not used elsewhere, and shouldn’t be reused outside of .aDownload blocks. You create .aDownload-anIcon class.
   • You may also have controls inside custom input elements: .curve-editor-aNode , .docs-panel-aSearchForm , texture-generator-aPreviewImage .
5. Mimics are rules that target classes which names match the names of specific HTML tags to style arbitrary elements so that they match the look of real HTML tags. Examples:
   • .h1 , .h2 , .h3 , and others that make an element look like a heading.
   • .button that is applied to a elements to make them look like a button.

1. A rule with a junction may have a descendant combination only if the junction is a parent, or if the junction is preceded by the parent part of this junction + a modifier. Examples of selectors:
   • .curve-editor.compact .curve-editor-aNode .
   • .aModal.fullscreen .aModal-aFooter .
   • .texture-generator-aPreviewImage button .
   • but not .aModal .aModal-aFooter (redundant) and not .aModal .aDownload-anIcon (not modular).
2. Modifiers must not match HTML tag names.
3. Mimics must match HTML tag names.

1. Before everything, define the look and feel of HTML elements, then switch to classes.
2. Minimize the usage of mimics. They pollute other classes and thus are prone to errors.
3. Avoid the usage of IDs in CSS. IDs are intended to be unique and restrict the reusability of styles.
   • If you do use them, IDs must start with the and follow the camelCase , e.g. theHomeButton , theTopLeftLogo .
4. Firstly define the effect of usage of modifiers on all elements (e.g. .small ), then define their effect on semantic classes, containers, and others (e.g. .aModal.small , .Downloads.small ).
5. Semantic classes and containers may change their appearance if certain modifiers are applied.
   • Example: .anInfoBox has blue borders and pale blue background, with dark text color. .red and .error make any text red. There may exist a rule with .anInfoBox.red, .anInfoBox.error selector that also changes background and border color to shades of red.
   • Another example: a container .Downloads exists. There may be a rule with a selector .Downloads.compact that provides a denser layout.
6. If you find yourself using modifiers for the majority of elements, it means that you defined base styles of HTML elements and semantic classes in a wrong way. Revisit them to make them universal, reusable, but with a clear and sturdy image.

About

My naming guide for CSS classes

Источник

Как называть css-классы

Основываясь на моих любимых статьях по данной теме и личном опыте, вот мои 5 копеек о том, как называть CSS-классы.

0. Прежде чем думать о названии класса, выберите подходящее название для HTML-элементов

Если это поле, используйте элемент input

Читать HTML-документ будет гораздо легче.

1. Назначайте классы как можно ниже по DOM-дереву

Это сказывается на названии классов. Всегда пишите название класса прямо в HTML-элементе, для которого нужно оформление, даже если на это приходится потратить дополнительные усилия. Если не ясно почему, почитайте нижеприведённую статью Криса Койера.

main.mainly p < /* Не делайте этого */ >/* Вместо этого присвойте название класса p : */ .paragraphly

2. Называйте классы по содержимому

3. Не называйте класс по содержимому, если картинка нагляднее

Скажем, лого шапки на самом деле выглядит так:

Тогда не называйте его header-logo.

4. Попробуйте суффикс -like для лучшей переносимости кода.

5. Не используйте верблюжийРегистр

.navToOneModuleICreated < font-size:2em; >/* против */ .nav-to-one-module-i-created

6. Пробуйте БЭМ

На сегодняшний день это одно из самых популярных соглашений.

• Поначалу он кажется странным, но не бойтесь.
• Порог вхождения очень низкий
• Можно использовать его уже сейчас в любой части проекта.
• Долгосрочные перспективы колоссальны

(двойной дефис) означает вариант элемента.

(двойное подчёркивание) означает дочерний элемент.

7. Пробуйте ещё страшнее

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

Тем не менее, такая своеобразность помогает глазу моментально уловить суть происходящего, и в случае БЭМ, поверьте, это работает.

Теперь можете пробовать более мерзкое соглашение, пока вы придерживаетесь его на всём проекте.

.DIMENSIONS_OF_mycomponent < /* Куда ещё противнее. Зато теперь понятнее, о чём речь. */ /* Я использую его для классов-заготовок в SASS. */ /* Но всё же не злоупотребляйте этим правилом. */ >

8. Не сокращайте описывающие слова

Помимо уже устоявшихся nav , txt , url … следует избегать любых аббревиатур.

9. Пробуйте использовать только одну букву в качестве осмысленного префикса

В случае визуального компонента начинайте с c- , а в случае объекта (напр. макет) — с o- , мне просто нравится этот трюк Гарри Робертса.

10. Пробуйте [] , когда слишком много классов одного типа

Этот небольшой трюк помогает быстрее изучить HTML. Заметьте, в CSS-файле нет классов .[ и .] , они нужны только здесь, чтобы помочь другим читать HTML.

11. Используйте префикс js- , если он используется только для JavaScript

Если Javascript требуется выбрать элемент, не полагайтесь на CSS-стили. Задайте специальный префикс вроде js- .

12. Старайтесь отделить родительский элемент от дочернего

Если у класса слишком много обязанностей, разделите его на 2 отдельных свойства.

13. Несемантические классы должны явно описывать свои свойства.

Большинство из них содержат только одно свойство, и незачем его скрывать.

.horizontal-alignment < /* Не делайте этого. Выровнять по горизонтали можно разными способами, но при виде этого селектора в HTML-файле совершенно не ясно, КАК ИМЕННО это сделано. */ text-align: center; >/* Предпочитайте этот способ. Смотрите выше про использование БЭМ и односимвольного префикса */ .u-text-align--center

14. Явные хаки (I)

Если вы не довольны вашем CSS-селектором, скажите это всем.

Это произойдёт в любом случае, даже с лучшими CSSупергеро(ин)ями, поэтому не стыдитесь этого.

Подберите в вашей команде слово, подходящее для таких случаев, и придерживайтесь его на протяжении всего проекта.

Лично я использую слово «HACK», потому что IDE Atom его автоматически подсвечивает.

15. Явные хаки (II)

Еще толковый вариант — собрать весь код со «странностями» в отдельный файл, shame.css

Опять же, Гарри Робертс подсказал

16. Старайтесь избегать более двух слов для одного имени

Название должно говорить само за себя, в одно-два слова, иначе код будет трудно поддерживать.

.button < /* Хорошо */ >.dropdown-button < /* Всё ещё хорошо */ >.dropdown-button-part-one < /* Хм, по-прежнему хорошо, но будет нечитаемым при добавлении дочернего элемента, например: */ >.dropdown-button-part-one__button-admin < /* Ой, всё. */ >

17. Используйте атрибут data-state для указания состояния компонента

Манипуляция состоянием — далеко не редкость. Это происходит насколько часто, что специальный атрибут для состояния экономит время и силы в долгосрочной перспективе.

Источник: к сожалению, не могу вспомнить, кто об этом писал, но его совет оказался весьма полезным.

18. Используйте префиксы has- или is- для состояния

Манипуляция состоянием происходит очень часто (ещё раз). Поэтому придерживаться строгого соглашения наименования для состояния будет очень полезно.

19. Используйте дефис в качестве префикса при сочетании нескольких состояний

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

20. При объявлении селектора в HTML придерживайтесь одиночных кавычек вместо двойных

Это упрощает чтение документа.

Источник: я узнал это, когда работал с командой Predicsis

21. Не следуйте правилам

Я попытался дать некоторые рекомендации, основанные на личном опыте и статьях, которые оказались для меня наиболее полезными.

Я не говорю, что всё это пригодится и в вашем случае, поэтому мой наилучший совет:

1) Постарайтесь улучшать своё именование классов, 2) соблюдайте его последовательно для данного проекта, 3) но избегайте переусложнения.

Если правило вам не подходит, просто пропустите его

Особая благодарность @HugoGiraudel, @kaelig и @gaetanbt за их отзывы.

Источник