Правильно ли давать классы блокам по контексту?

Question

[devdev10111]

привет! есть примитивная карточка пользователя: аватарка, юзернейм, кнопка (расположение сверху вниз).
как правильнее, давать имена классам по смыслу card-username, card-avatar, card-actions или представлять в виде абстрактности, по типу card-header, card-body, card-footer?

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

Comments

[MaSStiK]

Изучи методологию BEM (Block Element Modifier)

[MaSStiK]

Если коротко, то card это блок, а ее элементом будет являеться card__username или card__avatar
Если ты думаешь о переиспользовании, то не что не мешает использовать эти же классы для других карточек

Answer 1

[Артем]

Оба подхода могут быть правильными в зависимости от конкретного контекста и целей проекта.

Если вы ожидаете, что блок карточки будет использоваться в нескольких местах на вашем сайте или приложении, то лучше использовать второй подход, где классы будут относиться к абстрактным блокам (header, body, footer), чтобы их можно было легко переиспользовать.

Если же блок карточки будет использоваться только в одном месте и имеет уникальный дизайн, то можно использовать первый подход, где классы будут отражать конкретные элементы карточки (username, avatar, actions).

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