Как называть или как правильно называть классы в CSS?

Question

[Parazitivzadnize]

Я начинающий. Сверстал пару макетов, а теперь и сам в своем же коде разобраться не могу. А ведь хочется и что бы долгосрочная поддержка была.
Прочитал про БЭМ-CSS и предложение частично отказаться от каскада, мне понравилось. Но вот грамотный подбор имен к блокам и элементам оказался сложнее чем я думал.
Я сейчас верстаю сайт, а там идут различные колонки, настолько похожие по контенту и совершенно разные по стилям. И как их называть? блок1 блок2...блокN. Где черпать фантазию для названий классов? Может уже все заранее придумано и есть какое то руководство? Можете поделиться сайтами с CSS-БЭМ и я бы посмотрел на ваш стиль.

Answer 1

[Александр]

Если часто сомневаетесь по поводу именования, то надо смотреть готовые проекты на БЭМ. Например, проекты Яндекса (например, market.yandex.ru"), booking, ну и сам toster тоже сверстан по БЭМ.
А вот здесь можете посмотреть компоненты (формы, кнопки и т.д.) https://ru.bem.info/libs/bem-components/v2.1.0/.
UPD: забыл упомянуть badoo

Еще пара ресурсов:

• bem.github.io/bem-method/html/all.ru.html
  
• https://github.com/ideus-team/guidelines/blob/mast...
  

Comments

[Parazitivzadnize]

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

[Александр]

Parazitivzadnize: > пробовал открывать стартовую страницу яндекса, но там я ничего не смог разобрать. - Я поэтому и написал: "проекты Яндекса". Судя по всему у них разные проекты делают разные команды, так как верстка у них отличается. Так что посмотрите. Если будут какие-то спорные ситуации, пишите на toster.

Answer 2

[alex stephen]

Ну, логичнее всего называть по-английски, соответственно содержанию блока..
шапка - header, подвал - footer, основная часть - content, блок-обертка - wrapper, меню - догадайтесь сами))
Можно из двух-трех слов, написанных через дефис (user-menu, user-profile-image)..

Всегда должны быть осмысленные слова) Никаких .div1, .q2, и т.д.

Answer 3

[Дмитрий Шинкарь]

У меня в детстве была книжка "Вредные советы"...

Так вот. Называй 1 буквой! Делаешь кому-то сайт - называй все 1-2 буквами, переменные, классы что бы только тебе было понятно...) после этого ни у кого нервов не хватит что-то там менять :D

Comments

[Дмитрий Логвиненко]

Процессоры же есть, аглифицировать можно и опосля

[Сергей delphinpro]

Дмитрий Логвиненко: это же "вредный совет" был =)

[Дмитрий Логвиненко]

Сергей: Ну так если вредить, то другим, не себе же ^_^

[Сергей delphinpro]

Дмитрий Логвиненко:
Недавно ученые открыли, что на свете бывают непослушные дети, которые все делают наоборот. Им дают полезный совет: «Умывайтесь по утрам» — они берут и не умываются. Им говорят: «Здоровайтесь друг с другом» — они тут же начинают не здороваться. Ученые придумали, что таким детям нужно давать не полезные, а вредные советы. Они все сделают наоборот, и получится как раз правильно.
=)

[Дмитрий Шинкарь]

Сергей: когда я залез в код flowplayer (дай бог здоровья команде которая сотворила этот трэшак) и увидел что все переменные они назвали одним символом - радости моей не было предела! >_

[Сергей delphinpro]

Дмитрий Шинкарь: Может вы минифицированную версию смотрели? =)
https://github.com/flowplayer/flowplayer/blob/mast...

[Дмитрий Шинкарь]

Сергей: дествительно... Там все выглядело совсем не так как по ссылке :D

значит мой косяк...)