Наименование классов в CSS

[psywalker]

Недавно, прочитав статью «Семантический CSS», захотелось узнать у наших верстальщиков, как вы подбираете (и подбираете ли вообще?) названия CSS-классам, заботитесь ли вы об этом, и есть ли у вас какая-нибудь своя система наименования?

[kattiperk]

Я почти согласна со статьёй.

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

[andrey7287]

Цитата

Как бы вы это назвали? Это cards? Тут возникает путаница, поскольку Twitter называет словом cards(«карточки») свои встроенные твиты. Вот в чем загвоздка.

profile-cards

Цитата

Например, в SMACSS модуль назывался бы lede. Если мы назвали отличающийся, но особый стиль lede, какlede--special, тогда нужно понимать, что этот особый стиль задуман быть отдельным, а не надстройкой над стандартным lede. 

То есть вот так делать не хорошо, или я не правильно понял мысль автора ? 

.lede {
{ лэйаут и общие визуальные стили }
	&--special {
		{ визуальные стили для special }
	}
	&--uber {
		{ визуальные стили для uber}
	}
	&--warning {
		{ визуальные стили для warning }
	}
}

 

Edited June 7, 2016 by andrey7287

[wwt]

.romashka {}
.podval {}
.kakaja-to-fignya {}

[SelenIT]

2 часа назад, andrey7287 сказал:

То есть вот так делать не хорошо... ? 

Насколько я сам понял, Снук говорит о том, что имена вида .что_то--какое_то должны использоваться для разновидностей и модификаций более общей сущности .что-то. А в том примере речь идет о равноправных и по смыслу похожих, но визуально разных штуковинах.

[klierik]

Весь мой ликбез про именования классов я однажды описал и выложил в рекомендациях

С тех пор в целом ничего не изменилось, за исключением самого форматирования файла в сторону:

// Social network
.social {
    &-item {}
}

+ csscomb (привязанный к билдер), который приводит весь код в единый стандарт

[andrey7287]

42 минуты назад, SelenIT сказал:

А в том примере речь идет о равноправных и по смыслу похожих, но визуально разных штуковинах.

Ну общая структура то сохраняется. 

Цитата

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

Аргумент.

[Int]

Обычно на английском одним словом пишу, что эт за блок. Если не хватает знаний языка, когда блок очень неважный. Например, заголовок блока-заголовка, могу и по-русски написать, всё равно UTF-8 в названиях классах нормально понимаются.

[sigma77]

Если кратко, то .описание_сущность__элемент.

Например:

.features_list {}
.features_list__item {}
.features_list__item_title {}
.features_list__item_description {}

Для совсем глубоки уровней использую вложенные селекторы.

[psywalker]

<div class="c-card">

    <div class="c-card__header">
        <!-- Here comes the grandchild… -->
        <h2 class="c-card__header__title">Title text here</h2>
    </div>

    <div class="c-card__body">

        <img class="c-card__body__img" src="some-img.png" alt="description">
        <p class="c-card__body__text">Lorem ipsum dolor sit amet, consectetur</p>
        <p class="c-card__body__text">Adipiscing elit.
            <a href="/somelink.html" class="c-card__body__text__link">Pellentesque amet</a>
        </p>

    </div>
</div>

sigma77, дорогая, а как в данной ситуации (в случае кода выше) ты назвала бы вот этот блок "<div class="c-card__body">" и, скажем, вот этот "<p class="c-card__body__text">"?

[lexxcode]

<div class="card">
    <div class="card-head">
        <h2 class="card-title">Title text here</h2>
    </div>
    <div class="card-body">
        <img class="card-img" src="some-img.png" alt="description">
        <div class="card-content">
            <p>Lorem ipsum dolor sit amet, consectetur</p>
            <p>Adipiscing elit. <a href="/somelink.html">Pellentesque amet</a></p>
        </div>
    </div>
</div>

Исходя из кода. Не понятно как оно должно визуально выглядеть, возможно и html чуть другой и названия классов тоже

[sigma77]

8 часов назад, psywalker сказал:

sigma77, дорогая, а как в данной ситуации (в случае кода выше) ты назвала бы вот этот блок "<div class="c-card__body">" и, скажем, вот этот "<p class="c-card__body__text">"?

Алекс выше ответил