Что делать когда кончаются названия для class/id

Question

[FeelGood]

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

Как решить? где взять «вдохновение»?

Answer 1

[egorinsk]

Вообще, это очень важное и редкое умение, давать имена/названия объектам в программировании. Я часто трачу время именно на то, чтобы подобрать правильное и понятное название (и даже гуглю как аналогичные штуки называют другие разработчики, а также ищу переводы слов), а не написать сам код.

Что касается вдохновения, тут лучше поменять систему наименований. Например, сделать уникальный класс для блока, а внутри использовать классы с префиксом (по типу предложенной яндексоидами системы БЭМ), вроде:

.b-news-teaser (внутри b-new-teaser-header, b-new-teaser-list, b-news-teaser-item, b-news-teaser-sticky-flag и так далее), рядом .b-top-comments (внутри классы с таким же префиксом), потом .b-top-articles и так далее. То есть уникальные имена только у блока, а внутренние классы используют префикс.

Это, кстати, даст верстке определенные свойства «железобетонности» — вы сможете перенести блок с одной страницы на другую, и ничего не сломается. А изменения CSS-стилей в одном блоке новостей не сломают верстку форума (так как у всех блоков используются уникальные имена классов).

Естественно, вышеописанные свойства у вашей верстки будут только при соблюдении адекватного подхода (а то бывают товарищи, пишущие что-нибудь вроде p { font:… }, или даже * { color: black; } ну дуракам как известно, ничем уже не поможешь).

Что касается id — их надо избегать или использовать умные именования. Представьте, вы сверстали форму логина на странице, в которой есть field-username и field-password, а завтра вам понадобилось добавить такую же форму внизу (и у вас клик по лейблу в нижней форме начинает прокручивать страницу вверх). Или открыть в попапе. Или еще что-нибудь. Надо либо отказываться от id, либо, если никак, добавлять к ним уникальные префиксы (например #top-form-field-username и #popup-form-field-username).

Comments

[FeelGood]

Благодарю за развернутый ответ. Всех этих правил стараюсь придерживаться. Просто порой приходится описывать элементы выполняющие весьма абстрактные функции. Или, что еще хуже, не несущие никакой смысловой нагрузки вообще :) Когда таких элементов много и возникает подобная проблема.

Answer 2

[skvot]

Я не верстальщик, но стараюсь давать элементам «говорящие» классы и идентификаторы, которые следуют из назначения. Соответственно, если у вас есть элемент, которому вы хотите дать класс, который занят, значит у вас с структурой начинаются проблемы.

Answer 3

[IkaR49]

У меня конечно куда скромнее замахи в вёрстке, сотен 5 строк от силы, но id стараюсь присваивать лишь действительно важным элементам, которые взаимодействуют со сценариями или являются якорями. А с именами классов совсем не парюсь, главное чтобы они отображали суть, а если хотят — пусть повторяются, так как в css использую правила вложенности, то есть:
.header {}
.element-1 .header {}
.element-2 .header {}

Answer 4

[leMar]

Придумайте свою классификацию.

Answer 5

[Виталий Желтяков]

Делаю так:

— Все названия классов и идентификаторов — это полные английские слова, существительные. Для функций и методов — глаголы. Никаких сокращений и транслитерации.
— Использую иерархию по вложенности. Например, «inventory_weapon» — id контейнера оружия, находящегося в контейнере инвентаря.
— При необходимости использую одинаковые названия классов и идентификаторов.

Comments

[Fastto]

Версаю аналогично использованию namespace
т.е. все стили описаны согласно макету с описанием полной или частичной вложенности элементов в зависимости от обстоятельств

Идентификаторы использую только глобально.
Идентификаторы элементов форм использую с префиксом идентификатора формы