Как выбирать название для CSS-классов?

Question

[romashka_sky]

Название CSS-класса должно отражать то, ЧТО он описывает, или то, КАК он это описывает?

Answer 1

[Павел Радьков]

То, КАК оно это описывает. Паттерн поведения.

Название класса должно быть достаточно абстрактным, чтобы его можно было переиспользовать и оно при этом не смотрелось чужеродно.

В статье css-live.ru/articles/o-semantike-html-i-arxitektur... есть хорошие примеры.

Оригинал этой статьи — nicolasgallagher.com/about-html-semantics-front-en...

Answer 2

[Анатолий]

В первую очередь он должен отображать то ГДЕ он находится.
А ваши варианты в разных методологиях верстки могут принимать разные значения.
Где взять примеры хорошей верстки? тут есть развернутые ответы

Comments

[Евгений Петров]

Чего?)) Классы описывают характер объекта, а находиться он может хоть в футере, хоть в асайде.

[Анатолий]

@Petroveg все зависит от методологии, некоторые описывают состояния, некоторые положения, некоторые свойства.

[Евгений Петров]

@taliban вы не описываете апельсин как предмет, лежащий на столе. Вы его называете «апельсин». И если он укатится под кровать, он не станет тапочками.

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

[Анатолий]

@Petroveg именно если я описываю футер, я назову класс футером, если боковое меню, то боковым меню. Другой вариант, я создаю кучу стилей со свойствами, и даю их элементам независимо от того апельсин это или яблоко.

[Евгений Петров]

@taliban для футера имя тэга придумано. Класс у футера будет называться футер? А зачем?

[Анатолий]

@Petroveg это был лишь пример, не придирайтесь, замените футер яблоком

[Евгений Петров]

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

[Анатолий]

@Petroveg для особо хитрых:
1- класс описывает обьект, пример: класс яблоко {цвет, форма, вкус}
2- много классов универсальных, которые описывают свойства, пример: обьект + классы "красный", "круглый", "сладкий", ... получается яблоко

[Евгений Петров]

@taliban я насмотрелся на проекты, в которых элементы были обильно снабжены классами типа left, red и прочей гадостью. И хотя впоследствии они перестали быть и красными, и слева, оказавшись справа и серыми, классы так и оставались неизменными, взрывая мозг тем, кто пытался разобраться в структуре.

Если вы не сталкивались с проектами больше, чем 5-10 страниц, это не повод распространять свои представления на всё остальное. БЭМ не от хорошей жизни появился.

[Анатолий]

@Petroveg мне, честно, без разницы с каким говнокодом вы сталкивались, я написал человеку что есть разные методики, перечислил на чем они основываются. Если у вас блок с классом left становится справа, стоит задуматься какой код вы пишете, а не говорить что это плохой подход. Любой подход плохой, если руки из жопы, вы уж извините за резкость.

[Евгений Петров]

@taliban позицию, цвет фона и текста, размер шрифта — всё это категорически нельзя использовать при описании элемента. Это есть единственное, что я пытаюсь сказать.

Вы привели в пример футер. Но футер может стоять последним не только в реализации подвала страницы. Футеров могут быть десятки в структуре article, section, aside и прочих прелестей. И какими классами вы их снабдите?