Как научиться быстро давать имена классам?

Question

[Roweb]

При верстке на придумывание осмысленных названий классов уходит много времени. Читал всякие списки популярных названий, имеется личный список. Но этого недостаточно, чтобы быстро дать имя блоку (который не menu и не header) без block1, block2. Какими методиками пользуетесь? Что посоветуете?(знаю, что блоки должны называться абстрактно, согласно своему содержимому)

Comments

[Rustam Bainazarov]

Каждый день сталкиваюсь с этой проблемой, когда делаю стили для блоков, где нет обфускации, styled components и т. п.

Методов именно придумывания названий нет ни одного нормального, только опыт, ваш личный словарный запас и умение им воспользоваться. Можно идеально понимать и применять тот же BEM, но при этом называть ваши компоненты упорото.

Например, мой коллега идеально использует BEM, но даёт компонентам такие названия — просто беда.

[Roweb]

BD_ l3ftoverZ!, Например здесь так и хочется - text1, text2, text3, text-block, text-wrapper

[Roweb]

Рустам Байназаров, А можете показать примеры плохого наименования?

[Rustam Bainazarov]

Roweb, когда карточку в слайдере «наш блог» или же сетки для вывода таких карточек называют не, например, .blog-article-card или .blog-article-preview-card, а как-нибудь типа .blog-el.

Вроде бы и нормальный второй вариант, но сразу не поймёшь, что это именно карточка для сетки, слайдера, а не для не просто элемент блога. Т. е. когда название ни туда, ни сюда.

Более того, из-за этого теряется специфичность, которая важна, ибо в CSS нет зоны видимости стилей, что может привести к «конфликту» стилей из-за одинаковых селекторов. Такие проблемы частично решаются styled components, CSS-in-JS, обфускацией, но они не всегда доступы.

[Roweb]

BD_ l3ftoverZ!, я бы не стал называть этот блок article, так как это обычный единичный блок на лендинге коих множество.

[Roweb]

Рустам Байназаров, Думаю второй вариант не плох, если над проектом будет работать один человек

[Rustam Bainazarov]

Roweb, ну в таком случае и вариант класса .zhopa-vasya тоже сойдёт, ведь он будет выполнять свои функции полностью.

Поэтому я и говорю, что тут только опыт поможет. Я уже привык к тем проектам, где так просто классы не назовёшь, чтобы не было потом печально.

[Сергей delphinpro]

Попробуйте по принципу "что вижу — то пою". Не знаете как по английски — вбейте в переводчик, заодно английский словарный запас пополните =))

[VegasChickiChicki]

У меня кстати тоже появился вопрос. Насколько хорош\плохо вообще не давать класс\айди ,то есть есть блок ,как на скриншоте выше ,внутри него 3 тега p ,а обращение к ним будет как div p:nth-child(n). Это хорошо\плохо?

[Rustam Bainazarov]

VegasChickiChicki, не самый хороший метод, но если вы знаете, что структура DOM меняться не будет, она очевидна и изолирована — почему бы и не использовать. Главное, не использовать везде это.

[VegasChickiChicki]

Рустам Байназаров, Да нет ,я это стараюсь использовать там ,где DOM структура замыкается ,в конечном или пред последнем вложенном блоке ,довольно удобно ,но не знаю на сколько правильно.

[Rustam Bainazarov]

VegasChickiChicki, любая привязка к структуре DOM — это не очень хорошо, потому что это может сломаться при малейшем перемещении блоков. Но что поделать, этот функционал используется и будет использоваться. Просто использовать его желательно реже.

Answer 1

[Александр Присяжнюк]

Вот вам имена классов на все случаи жизни:
https://github.com/yoksel/common-words#readme

Comments

[Roweb]

С данным списком знаком, но покрывает малое количество ситуаций

[Дмитрий Понькин]

В дополнение:
Слова и сокращения в CSS-классах

[Roweb]

Дмитрий Понькин, Хотелось бы подобный список, но раз в 10 больше

Answer 2

[nrgian]

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