Много классов и меньше стилей или наоборот?

@Kucc · Регистрация: 21.06.2013

Студворк — интернет-сервис помощи студентам

Сделал несколько больших проектов. В обеих я решил поэксперементировать со стилизацией

В первом я решил делать меньше классов, при этом каждому дописывать стиль отдельно. Для наглядности:

HTML5
1
2
3
<div class="summary">
    <h2>text</h2>
</div>

CSS
1
2
3
4
5
.summary {
    float: left;
    padding: 10px;
    background-color: #333;
    margin: 0 10px; }

При этом, если попадался еще какой-то класс, которому нужно было присвоить флоат, я писал его заново другому классу. В итоге выходит флоатов 100+ шт.

Во втором проекте решил сделать по-другому.

CSS
1
2
.float {
    float: left; }

HTML5
1
2
3
<div class="summary float">
    <h2>text</h2>
</div>

С точки зрения экономии кода, лучше вариант второй, т.к. писанины и веса в сотни раз меньше. Но в итоге в HTML тегах выходит много классов, помимо своего уникального для данного блока, еще есть 3-5 типа "float f-size pad-top".

А что скажете вы?

@Aqua77 · 26.02.2017, 16:06

Название классов элементам - это просто идентификация не более того. А вот браузеру приходиться постоянно нагружаться, и обрабатывать каждый селектор с одним и тем же новым значением. Есть же разница когда браузер 1 раз выполнил float в одном селекторе, и 100 раз выполнил тот же float в 100 селекторах.

Добавлено через 1 минуту
Присвоение класса элементам не несёт никакой нагрузки.

@Kucc · 26.02.2017, 16:28 **[ТС]**

Aqua77, Cпасибо за ответ. Да, в итоге float все равно пишется те же 100 раз в HTML и 100 раз в CSS.
Все же второй вариант лучше. Просто мне не раз говорили, что огромное количество классов (огромное в смысле 5-6) это плохо и лучше писать в стилях заново

@mrtoxas · 26.02.2017, 16:51

Kucc, взгляните на получившийся код глазами человека, который впервые его видит. Как поддерживать такой код, если стили элемента разбросаны по всему css-файлу? Я думаю, это так же усложнит браузеру построение дерева рендеринга. Но это если уже слишком глубоко закапываться.
На самом деле ощутить разницу будет сложно. Фреймворки работают с такими классами, как вы описали и ничего страшного не происходит. Тут надо иметь чувство меры, если классы float-left, float-right, clearfix и т.п. можно объяснить и допустить, то классы f-size и pad-top явно лишние. Что они описывают? Что у элемента есть внутренний верхний отступ? А какой? И на выходе получается каша в стилях.

@Fedor92 · 26.02.2017, 17:10

Kucc, почитал Вашу темку, поржал...

Надо наверно переименовать в шило на мыло...

Вроде 2017 год, а мифы про оптимизацию кода упорно бродят по сети... Лучшее враг хорошему, если у Вас есть куча времени, то конечно можно объединить классы с одинаковыми стилями, но потом Вы элементарно запутаетесь и Ваша вёрстка не будет соответствовать довольно популярной(в наше время!) методологии БЭМ... Смысл есть объединять стили только тогда, когда на Вашей странице есть элементы, которые имеют одинаковое оформление(более 1-2 стилей!)... К слову недавно колупал один платный шаблон в котором стили переопределялись по 4-5 раз, в 4-х разных CSS-файлах, Вы просто себе не представляете, какой "кайф" ждёт оптимизаторов...

@Kucc · 26.02.2017, 17:15 **[ТС]**

mrtoxas, Я понял Ваше мнение. Приведу пример, когда я называю класс "margin-top". Это единственный класс касающийся маргина. Все блоки на сайте имеют одинаковый отступ сверху от предыдущего - 30px. Вы открываете первый раз код и смотрите - что за непонятный "margin-top"?? Открываете стили и в первых строчках описаны все подобные непонятные на первый взгляд сокращения и там

CSS
1
2
.margin-top {
    margin-top: 30px; }

И отсюда становится ясно, что везде, где будет встречаться этот класс, будет означать, что там отступ сверху всегда 30px. Вроде становится ясно.

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

Добавлено через 4 минуты
Fedor92, Ваш ответ все же больше склоняет меня к первому варианту. Значит из Вашего сообщения становится ясно, что не стоит делать отдельный класс на один стиль:

CSS
1
2
.float{
  float: left}

Но если ситуация такова:

CSS
1
2
3
4
5
6
.flex{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex; }

Тогда такой класс имеет смысл?

@Fedor92 · 26.02.2017, 17:22

Сообщение от Kucc

Тогда такой класс имеет смысл?

Тоже нет... Блоки, содержащие flex можно перечислить:

CSS
1
2
3
4
5
6
7
.div1, .div2, .div3{
display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

И всего-то... Легко оптимизируется и записывать просто не надо штамповать классы с одним и тем же именем...

Вот представьте стоит у Вас класс:

CSS
1
2
3
.float{
  float: left
}

А Вам нужно задать float:right и что тогда? Искать нужный класс в css? А может вообще не будет float, а будет 10 других свойств(т.е. 10 разных классов)? Или отступ нужно изменить, к примеру вместо margin-top:30px задать margin-top:40px...

@Kucc · 26.02.2017, 17:27 **[ТС]**

Fedor92, Ну если верстка сугубо на flex, то тут выходит та же история, что и с сотнями дивов, которым надо задать флекс.

Значит даже в таком случае, лучше перечислять все классы, которым надо задать нужные стиль через запятую? Значит так правильнее?

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.class1,.class2,.class3,
.class1,.class2,.class3,
.class1,.class2,.class3,
.class1,.class2,.class3,
.class1,.class2,.class3,
.class1,.class2,.class3,
.class1,.class2,.class3,
.class1,.class2,.class3 {
    display: -webkit-flex
    display: -moz-flex
    display: -ms-flex
    display: -o-flex
    display: flex
}

Добавлено через 2 минуты

Сообщение от Fedor92

А Вам нужно задать float:right и что тогда? Искать нужный класс в css? А может вообще не будет float, а будет 10 других свойств? Или отступ нужно изменить, к примеру вместо margin-top:30px задать margin-top:40px...

Нет, я же имею ввиду, что класс .float задавать только тем блокам, которым они нужны, а не всем погловно. Если блоку надо float: right, просто в HTML не писать класс .float, а в стилях задать именно этому блоку float: right

@Fedor92 · 26.02.2017, 17:29

Сообщение от Kucc

Значит даже в таком случае, лучше перечислять все классы, которым надо задать нужные стиль через запятую? Значит так правильнее?

В бутстрапе они именно так и перечисляются и это правильно...

Сообщение от Kucc

Если блоку надо float: right, просто в HTML не писать класс .float, а в стилях задать именно этому блоку float: right

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

@Kucc · 26.02.2017, 17:36 **[ТС]**

Fedor92, Ну бутстрап своими лентами не очень впечатляет, поэтому следовать всему, как у них я думаю не стоит.

HTML5
1
<div class="col-xs-12 col-sm-6 col-md-3 col-xs-push-1 col-sm-push-0 catalog">

И это только сетка, страшно вообразить размеры атрибута, если полностью использовать бутстрап

Спасибо, все же откажусь от второго варианта..

Сообщение от Fedor92

Смысл есть объединять стили только тогда, когда на Вашей странице есть элементы, которые имеют одинаковое оформление(более 1-2 стилей!).

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

CSS
1
2
3
4
.div1, .div2 {
 padding: 10px;
 margin: 10px;
}

@Fedor92 · 26.02.2017, 17:40

Сообщение от Kucc

Fedor92, Ну бутстрап своими лентами не очень впечатляет, поэтому следовать всему, как у них я думаю не стоит.

Я не пойму что Вы хотите мне доказать... Мы говорим о стилях для класса, а Вы мне какие-то ленты суёте... К чему это вообще?

Сообщение от Kucc

Спасибо, все же откажусь от второго варианта..

Я логику Вашей мысли не улавливаю...Вообщеееее..... Вы перечисляете стили адаптивных классов, ну и в чём проблема? Своими же ручками напишите, те же свойства в медиазапросах или переопределите... Да классов станет меньше, только вот стилей станет больше в разы...

Сообщение от Kucc

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

Нужно!

@Kucc · 26.02.2017, 17:47 **[ТС]**

Fedor92, Про бутстрап было лишнее

Логику я сейчас объясню. По весу, написать 100 классам 100 раз float:left будет тяжелее, чем задать 1 класс в стилях и написать 1 раз float: left. Да и помимо прочего при чтении повторяющиеся классы мешают, правда это дело третье.

Вот и вся суть. Я просто попробовал, мне так удобнее и я в этом не путаюсь вообще, т.к. мои классы, что с одним стилем, понятны и их легко запомнить, но это опять же для меня. Но после этой темы я окончательно убедился, что так делать не стоит и если стили будет весить на 10% больше с такими повторами, пусть так и будет.

@Fedor92 · 26.02.2017, 17:57

Сообщение от Kucc

Fedor92, Про бутстрап было лишнее

Лишнее для кого?

Сообщение от Kucc

Логику я сейчас объясню. По весу, написать 100 классам 100 раз float:left будет тяжелее, чем задать 1 класс в стилях и написать 1 раз float: left. Да и помимо прочего при чтении повторяющиеся классы мешают, правда это дело третье.

Объясню на пальцах...

Вот смотрите у Вас есть две страницы(допустим главная и контакты) на одном сайте, на которых есть положим одинаковый класс float... Вам понадобилось, может не конкретно Вам, а человеку, который оптимизирует сайт сделать обтекание блока с правой стороны на странице контактов... Но изначально он не знает, где лучше отредактировать код в HTML или CSS... И конечно же логичнее обтекание редактировать в CSS, отредактировав обтекание упадёт на 2-х страницах в лучшем случае... Допустим, он догадается изменить HTML, но откуда он будет знать как задать обтекание с правой стороны - он же не знает имён классов... ?

Выхода 3: либо в css писать новый класс - либо искать класс, который задаёт правое обтекание и переназначать его в html - либо писать атрибут "style"(говнокодить)... Понимаете к чему приведёт Ваша схема? А вот если классы перечислялись бы, в CSS достаточно удалить класс, который имеет стиль float:left на странице контактов и задать ему float:right и всё гуд...

@Kucc · 26.02.2017, 18:04 **[ТС]**

Fedor92, Хорошее объяснение, Вы правы.

Спасибо большое за пояснения и терпение

Новые блоги и статьи Все статьи Все блоги /
Программный отбор значения справочника Maks 21.03.2026 Процедура ВодителиНачалоВыбора(Элемент, ДанныеВыбора, ВыборДобавлением, СтандартнаяОбработка) / / Отключаем стандартную обработку (стандартное открытие формы выбора без фильтров) . . .	Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .	Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip
Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:

@Aqua77 25 / 25 / 19 Регистрация: 13.07.2015 Сообщений: 433
	26.02.2017, 16:06
	Название классов элементам - это просто идентификация не более того. А вот браузеру приходиться постоянно нагружаться, и обрабатывать каждый селектор с одним и тем же новым значением. Есть же разница когда браузер 1 раз выполнил float в одном селекторе, и 100 раз выполнил тот же float в 100 селекторах. Добавлено через 1 минуту Присвоение класса элементам не несёт никакой нагрузки. 1

@Kucc 5 / 2 / 3 Регистрация: 21.06.2013 Сообщений: 117
	26.02.2017, 16:28 [ТС]
	Aqua77, Cпасибо за ответ. Да, в итоге float все равно пишется те же 100 раз в HTML и 100 раз в CSS. Все же второй вариант лучше. Просто мне не раз говорили, что огромное количество классов (огромное в смысле 5-6) это плохо и лучше писать в стилях заново 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	26.02.2017, 16:51
	Kucc, взгляните на получившийся код глазами человека, который впервые его видит. Как поддерживать такой код, если стили элемента разбросаны по всему css-файлу? Я думаю, это так же усложнит браузеру построение дерева рендеринга. Но это если уже слишком глубоко закапываться. На самом деле ощутить разницу будет сложно. Фреймворки работают с такими классами, как вы описали и ничего страшного не происходит. Тут надо иметь чувство меры, если классы float-left, float-right, clearfix и т.п. можно объяснить и допустить, то классы f-size и pad-top явно лишние. Что они описывают? Что у элемента есть внутренний верхний отступ? А какой? И на выходе получается каша в стилях. 1

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	26.02.2017, 17:10
	Kucc, почитал Вашу темку, поржал... Надо наверно переименовать в шило на мыло... Вроде 2017 год, а мифы про оптимизацию кода упорно бродят по сети... Лучшее враг хорошему, если у Вас есть куча времени, то конечно можно объединить классы с одинаковыми стилями, но потом Вы элементарно запутаетесь и Ваша вёрстка не будет соответствовать довольно популярной(в наше время!) методологии БЭМ... Смысл есть объединять стили только тогда, когда на Вашей странице есть элементы, которые имеют одинаковое оформление(более 1-2 стилей!)... К слову недавно колупал один платный шаблон в котором стили переопределялись по 4-5 раз, в 4-х разных CSS-файлах, Вы просто себе не представляете, какой "кайф" ждёт оптимизаторов... 1

@Kucc 5 / 2 / 3 Регистрация: 21.06.2013 Сообщений: 117
	26.02.2017, 17:47 [ТС]
	Fedor92, Про бутстрап было лишнее Логику я сейчас объясню. По весу, написать 100 классам 100 раз float:left будет тяжелее, чем задать 1 класс в стилях и написать 1 раз float: left. Да и помимо прочего при чтении повторяющиеся классы мешают, правда это дело третье. Вот и вся суть. Я просто попробовал, мне так удобнее и я в этом не путаюсь вообще, т.к. мои классы, что с одним стилем, понятны и их легко запомнить, но это опять же для меня. Но после этой темы я окончательно убедился, что так делать не стоит и если стили будет весить на 10% больше с такими повторами, пусть так и будет. 0

@Kucc 5 / 2 / 3 Регистрация: 21.06.2013 Сообщений: 117
	26.02.2017, 18:04 [ТС]
	Fedor92, Хорошее объяснение, Вы правы. Спасибо большое за пояснения и терпение 0

Много классов и меньше стилей или наоборот?

Решение