БЭМ. Соглашение по наименованию классов стилей.
Java Enterprise Platform
Brought to you by:
petrovskiy
Menu
▾
▴
Предлагается три стиля наименоваия. Нужно выбрать один:
1.Стандартное наименование от Яндекса. Слова в названиях сущностей разделяются через "-"
block-name__elem-name_mod-name_mod-val
2.CamelCase:
blockName__elemName_modName_modVal
3.React:
BlockName-ElemName_modName_modVal
Ссылка на документацию: https://ru.bem.info/methodology/naming-convention/
Необходимо определиться с префиксом. Ссылка на документацию: https://ru.bem.info/methodology/history/#%D0%9F%D0%BE%D1%8F%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B1%D0%BB%D0%BE%D0%BA%D0%BE%D0%B2.
Яндекс отказался от префиксов. Префис состоял из одного слова, разделялся дефисом от имени блока. Поэтому, вероятно, имеет смысл сократить jepria до jr (кто-то предлагал в комментариях).
Пример из презентации в разных стилях (оригинал .jepRia-PagingBar .jepRia-Separator):
1 .jr-paging-barseparator
2 .jr-pagingBarseparator
3 .jr-PagingBar-Separator
Last edit: Roman Zakharov 2018-10-12
По стилю именования:
Если мы предполагаем использовать React, логично выбрать стиль именования React.
Хотя, там, где мы будем использовать Styled Components это будет неважно (поскольку стиль сразу приклеивается к компоненту и нет смысла его как-то именовать. В классическом БЭМ за неимением базовых компонентов именование классов используется как наиболее удобный способ определить блок-компонент).
По префиксам:
Заглянул по ссылке в документацию БЭМ. Не увидел там возможности использования custom-префиксов. Увидел только варианты:
b- — обычные блоки;
h- — обертки для нескольких блоков;
l- — раскладки;
g- — глобальные стили.
Возможно, не туда смотрел.
Last edit: Alexander Lapygin 2018-10-12
Выскажу свое мнение, насчет этого момента - конечно как джависту хочется использовать CamelCase-формат (2й вариант), но правила CSS живут по своим канонам, поэтому форма стандартного именования Яндекса (вариант 1), наверное здесь более уместна. И наверное не стоит устои одной технологии перекладывать на плечи другой.
Что касается приведенного примера и использования пространства имен, то мне кажется важным оставить упоминания в селекторах префикса jepria..я бы не стал экономить и использовать сокращенную запись jr. Я думаю gzip это лучше сожмет, а читабельность куда важнее.
Поэтому мой голос за вариант .jepria-paging-barseparator
Виталий, спасибо за комментарий!
В основом согласен, кроме прификса :)
Я все-таки сократил, в именах классах в верстке придется полностью его указывать.