А как вы именуете классы в css?

Question

[Дмитрий]

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

Пока пишу что-то подобное:

<div class="debitCardsWrapper">
						<div class="debitCardsBlock1">
							<div class="tariffPlan tariffPlan1">
								<a href="#" class="tariffInnerA">
									<div class="upper">
										<img src="img/otkrytie_travel_vg_110x70.png" alt="" class="imgCard">
										<div class="nameOfTariff">Travel, тарифный план Оптимальный</div>
										<div class="bankOfTariff">Ханты-Мансийский банк Открытие</div>
									</div>
									<div class="lower">
										<div class="interest">до 6% годовых</div>
										<div class="button">Посмотреть</div>
									</div>
								</a>
							</div>
							<div class="tariffPlan tariffPlan2">
								<a href="#" class="tariffInnerA">
									<div class="upper">
										<img src="img/Lukoil_Otkrytie_mcw_110x70.png" alt="" class="imgCard">
										<div class="nameOfTariff">Лукойл, тарифный план Базовый</div>
										<div class="bankOfTariff">Ханты-Мансийский банк Открытие</div>
									</div>
									<div class="lower">
										<div class="interest">до 6% годовых</div>
										<div class="button">Посмотреть</div>
									</div>
								</a>
							</div>
							<div class="tariffPlan tariffPlan3">
								<a href="#" class="tariffInnerA">
									<div class="upper">
										<img src="img/Tinkoff_Black_110x70.png" alt="" class="imgCard">
										<div class="nameOfTariff">Tinkoff Black</div>
										<div class="bankOfTariff">Тинькофф Банк</div>
									</div>
									<div class="lower">
										<div class="interest">до 6% годовых</div>
										<div class="button">Посмотреть</div>
									</div>
								</a>
							</div>
						</div>
</div>

Плюс вопрос возникает сколько классов прописывать в файле css.Например:
при таком html

<div class="wrapper">
   <div class="inner">
      <div class="class1"></div>
      <div class="class1"></div>
      <div class="class1"></div>
   </div>
</div>

Я определяю стили таким образом:

/*стили для wrapper*/
.wrapper {...}
/*стили для inner*/
.wrapper {...}
/*стили для внутренних блоков-одно или несколько классов пропускаю чтобы сократить количество классов*/
.wrapper .class1 {...}

Что скажете?

Answer 1

[Сергей]

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

<div class="testBigBoxBlock">
  <div class="title">Заголовок</div>
  <div class="desc">Описание</div>
</div>

<div class="testSuperBigBoxBlockAndLinesMind">
  <div class="title">Заголовок</div>
  <div class="desc">Описание</div>
</div>

Comments

[theWaR_13]

А потом у Вас будет title в другом месте, у которого должны быть совсем другие стили и Вы так и не поймете, почему, например, у него размер 21px, хотя Вы его не задавали.

[Сергей]

theWaR_13: просто title в стилях не будет указан, обязательно через родителя.

[Максим Тимофеев]

theWaR_13: Используем LESS и тогда нет путаницы

.testBigBoxBlock{
  .title {}
  .desc{}
}
.testSuperBigBoxBlockAndLinesMind{
  .title {}
  .desc{}
}

[theWaR_13]

Сергей: Максим Тимофеев: я где то читал, что вложенность больше 3 элементов - bad practices.

[Максим Тимофеев]

theWaR_13: Где и с чего вдруг? И где у меня больше 3 элементов? Еще зависит от того как LESS подключен. Если LESS используется для разработки, а в проекте уже css серверными методами или посредством IDE, то в чем проблема? Если LESS преобразуется с помощью js в браузере, то наверное сложная структура влияет на производительность.

[theWaR_13]

Максим Тимофеев: не, у вас 3 элементов нету, но ведь не все же ограничивается .title и .desc. А при большой вложенности вроде как сильно ухудшается читаемость кода.

[Aleksandr]

А теперь вопрос - если вдруг вам понадобиться разместить testSuperBigBoxBlockAndLinesMind внутри блока testBigBoxBlock, что случится? =)

Answer 2

[Александр Решетняк]

Всё зависит от ситуации. Если идёт разработка, то порой лучше много гибких и понятных классов, что то вроде .bg_blue .c_red .pad_2 .rad_4, которые понятны с первого взгляда, дабы не вспоминать чем именно мы наградили .icon_header

А уже после того как всё устаканится, укорачивать стили до описывающих элемент

Answer 3

[pomeo]

css modules полностью решают эту проблему, но вне реакта не вижу удобства их использования

Answer 4

[Screamin-Jay]

В ИТ для названия классов, функций, имен переменных действует одно правило.
Называйте как угодно и что угодно, но название должно отражать суть и при взгляде на имя должно становиться все понятно, где и при каких условиях данный элемент вызывается.
При верстке 5-7 экранов лэндинга для того что бы понять где какой класс используется не надо смотреть вообще никуда кроме самого названия класса.
Цифры очень плохое решение при названии. Если только это не уникальные блоки на подобии .
Если заглядывать в код, то исправляйте в первую очередь семантику кода.
В элементе a не должно быть дивов.
Классы .tariffPlan, .tariffPlan1 заменить
.plan-section, .plan-1 или plan-one
У ссылок и img если это типовые блоки не должно быть классов впринципе, должно в css выглядеть так
.plan-section img, .plan-section a
upper, lower опасные имена, но если они оправданы и отражают суть то ладно.
nameOfTariff, bankOfTariff заменить на .bank-tariff, .bank-name
В CSS использовать так:
.plan-section .bank-tariff, если что то уникальное то тогда .plan-1 .bank-tariff

Comments

[Дмитрий]

сразу спрошу, раз уж сказали..как вы предлагаете решать задачу если весь блок должен быть ссылкой? При этом сам блок нужно разделить на несколько. То есть структура лучше выстраивается дивами. В моём варианте ссылке дается дисплей блок. Вот честно, пробовал сделать всё то же с помощью a>span.wrap>span.inner$*2 установив ссылке и спанам дисплей блок. Но как показала практика спан с дисплей блок это не совсем див с тем же дисплей блок по умолчанию. В итоге просмотрев кучу статей нашел что при указании правильного доктайпа и присвоении ссылке дисплей блок новый стандарт позволяет помещать внутрь ссылки дивы..

[Screamin-Jay]

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