Частые ошибки верстальщиков Это болезнь?

@Sanya2019 · Регистрация: 15.03.2019

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

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

Есть например.
Сайты обычно состоят из каркаса:
Хидер
Контекстная часть и футер

Так вот, в контекстной части мы, например, должны определить расстояние каких-то свойств и т.д. А затем в этом уже классе писать другие классы и далее использовать класс обертки во всех страницах. Так нет же, они все поголовно на каждую из страниц создают одноименный класс (с именем страницы) но стили в них одни и те же. Почему бы не создать просто класс page и все и использовать его во всех страницах? На этот вопрос мне отвечают - меня так учили. ЧТО? учили делать не правильно?

Я один раз попробовал оптимизировать их HTML и CSS у меня в место 300 строк CSS получилось 180 при этом код HTML стал читаемым и красивым, сайт не потерял своего вида. но вес страниц и CSS уменьшился. Это болезнь?

Вот пример:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- Вырезка из страницы Доставка  -->
 
<section class="delivery">
    <div class="wrapper">
        <div class="delivery__container">
            <div class="delivery__container__left">
 
<!-- А вот вырезка из страницы оплата -->
 
<section class="payment">
    <div class="wrapper">
        <div class="payment__container">
            <div class="payment__container__left">

Заходишь в стили и видишь картину - для каждого из данных классов стили одинаковые. Зачем такое делать?
Возможно кто-то скажет, что для того что бы была уникальность, чтобы можно было где то заюзать JS. Ок, в чем проблема добавить не стилизованное имя класса специально для JS?

@gogolik · 09.01.2020, 12:25

Не по теме:

Писать

вот так

-

болезнь.

Любая разметка имеет место быть. Всё зависит от проекта.

@Sanya2019 · 09.01.2020, 12:27 **[ТС]**

Поделитесь мыслями. может я зря ругаю своих сотрудников и учу их делать так как я на это смотрю?

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

Любая разметка имеет место быть. Всё зависит от проекта.

Погодите разметка то останется той же! Стили то одинаковые зачем их плодить то? Я говорю о том, когда, скажем, работаем со smarty. Либо на сайтах где в принципе каркас сайта везде одинаковый отличается только контентом

@gogolik · 09.01.2020, 12:30

Sanya2019, section может иметь свой стиль. .wrapper может иметь свой стиль. Но section.payment .wrapper может иметь другой стиль. Или может появиться необходимость сделать другой стиль или использовать разный js.

@Sanya2019 · 09.01.2020, 12:35 **[ТС]**

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

section может иметь свой стиль. .wrapper может иметь свой стиль. Но section.payment .wrapper может иметь другой стиль. Или может появиться необходимость сделать другой стиль или использовать разный js.

Вы читали о том, что я писал выше? Я писал о том что почему бы для использования JS не добавить доп. имя класса, который попросту не имеет стилей? И говорю я о том когда стили совершенно одинаковые, просто имена классов разные. Зачем Верстальщики делают так?
Я говорю о то том, что программеру потом приходится все это грубо говоря переверстывать (переделывать) чтобы натянуть на CMS что бы CSS весил намного меньше. Зачем плодить дубли?

Я не хочу никого обидеть просто вопрос зачем делают именно так?

@Alex Web · 09.01.2020, 12:36

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

погодите разметка то останется той же!
стили то одинаковые зачем их плодить то?

То о чем вы говорите именуется как, в кавычках, "Объективно ориентированным подходом". Это когда вы выносите наверх таблицы стили, которые будут дополнять уже существующие и сокращать тем самым код. Этих подходов много так то, я читал как то но сейчас и не вспомню)) Все зависит от структуру сайта, если вы из 300 строк кода благодаря такому подходу сделали 180 сохранив структуру и удобочитаемость, значит он наверно подходил

@gogolik · 09.01.2020, 12:36

Sanya2019, я уже написал вам ответ на вопрос "зачем", в том числе и про js. Перечитайте внимательно.

Плюс неплохо было бы почитать про бэм и SCSS. Больше чем уверен, что никто руками не прописывает одинаковые стили для блоков, а они автоматом генерятся. Ну и, чессказать, от лишних 30кб веса никто не умрёт.

@Sanya2019 · 09.01.2020, 12:52 **[ТС]**

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

Сообщение от Alex Web

То о чем вы говорите именуется как, в кавычках, "Объективно ориентированным подходом". Это когда вы выносите наверх таблицы стили, которые будут дополнять уже существующие и сокращать тем самым код. Этих подходов много так то, я читал как то но сейчас и не вспомню)) Все зависит от структуру сайта, если вы из 300 строк кода благодаря такому подходу сделали 180 сохранив структуру и удобочитаемость, значит он наверно подходил

Так у нас все проекты такие, все до единого. Мы строим интернет магазины со строгим дизайном и везде практически мне приходится подчищать за верстальщиком эти бяки, а на это уходит куча времени, так как мало того, что обзывают классы как попало, так еще и дубли плодят! Какого бы вида сайт не был, мне всегда удается его оптимизировать и всегда это получается, но на это уходит ооочень много времени, почему верстальщик сразу не может предусмотерть этого?

Почему бы не сделать вот так

HTML5
1
2
3
4
5
6
7
8
<section class="pages">
    <div class="wrapper">
        <div class="pages__container">
            <div class="pages__container__left">
 
            </div>
        </div>
</section>

Структура то осталась той же! Мы просто теперь юзаем только один класс, а когда необходимо, например, на конкретной странице заюзать JS скрипт. В чем проблема сделать так?

HTML5
1
2
3
4
5
6
7
8
<section class="pages p_ajax">
    <div class="wrapper c_ajax">
        <div class="pages__container g_ajax">
            <div class="pages__container__left u_ajax">
 
            </div>
        </div>
</section>

И на все что не имеет стилей (_ajax ) не вешать стили! Что в этом сложного? Разве я что то изменил? Я понимаю когда заведомо для delivery или для delivery__container заданы свои стили, тут вопросов бы не было, но когда стили одни и те же и нету в стилях такого типа назначения ховера и т.д. Зачем плодить?

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

чессказать, от лишних 30кб веса никто не умрёт

Как по-моему, Вы совершенно не правы, как говориться копейка рубль бережет каждый кб для меня дорог! Чем меньше тем быстрее! Просто когда начинаешь натягивать в голове сплошные матюки появляются приходится сидеть приводить все в порядок а затем только начинать натяжку делать! Но я не понимаю почему сразу нельзя сделать как от тебя требуют почему учат верстальщиков делать именно так а не ООП?

@gogolik · 09.01.2020, 12:55

Sanya2019, вы в начале нулевых застряли? Сейчас даже в деревнях есть стабильный интернет, для которого лишние 30кб ничего не решают для конечного потребителя.

Удаляюсь с темы, для вас существует только ваше мнение, а любое другое воспринимается в штыки и уходит в попытки переубедить нас в своей правоте.

@Sanya2019 · 09.01.2020, 12:58 **[ТС]**

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

я уже написал вам ответ на вопрос "зачем", в том числе и про js. Перечитайте внимательно.

А я уже писал что говорю о том, когда нету такого section.payment .wrapper либо когда они имеют одинаковые стили. И даже при этом section.payment .wrapper

Потому и пишу и задал вопрос зачем плодить CSS стили?

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

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

на мобильных тоже? При нестабильной связи что быстрее залется вес без 30кб или вес с ними?

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

Удаляюсь с темы, для вас существует только ваше мнение, а любое другое воспринимается в штыки и уходит в попытки переубедить нас в своей правоте.

Учитесь принимать критику!

Уважаемые модераторы а можно переместить тему в PHP? так как она больше относится не к верстальщикам а к программистам (к тем кому приходится натягивать)

@mrtoxas · 09.01.2020, 13:55

Не по теме:

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

а можно

Нельзя, тема в правильном разделе - "Обсуждение языка разметки HTML и каскадных таблиц стилей CSS. Верстка страниц."
Если у вас есть вопросы по PHP, создавайте тему в соответствующем разделе

Тема об идеальных условиях труда. Очень легко осуждать всех уже на этапе оптимизации, а не в самом начале, когда не знаешь что тебя ждет впереди (а там, порой, ожидают сюрпризы на сюрпризах). Мне и самому не нравится тот код, который я пишу в самом начале проекта, когда приходится его оптимизировать или не приходится, но я вижу возможность оптимизации. Тут многое зависит от общего понимания предстоящей работы, опыта работы с уже существующей командой - бэкендеры, project-менеджеры, дизайнеры, другие версталы. А то я сейчас сделаю общие классы, а завтра они окажутся по ТЗ уже не общими. И мне легче будет дублировать некоторые стили. Ситуации в работе разные бывают и их рассматривать надо в контексте всего конкретного проекта, а вы только два куска кода показали и спрашиваете зачем так делать. Может и были причины, а может и неопытность.

@DrType · 09.01.2020, 14:06

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

При нестабильной связи что быстрее залется вес без 30кб или вес с ними?

Мне всё же кажется, что, когда пишешь код, то в первую очередь надо думать о его расширяемости, простоте для понимания и сопровождения и т. д.; вес файла — разве что косвенный показатель качества кода. Если код разрастется до тысяч строк (что для CSS маловероятно), и в нём будет много лишнего, то проблема будет не в том, что файл долго грузится, а в том, что код нечитаем, и не поддаётся правке.

@mrtoxas · 09.01.2020, 14:10

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- Вырезка из страницы Доставка  -->
 
<section class="delivery">
  <div class="wrapper">
    <div class="delivery__container">
      <div class="delivery__container__left">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime, sapiente.
      </div>
    </div>
  </div>
</section>
<!-- А вот вырезка из страницы оплата -->
 
<section class="payment">
  <div class="wrapper">
    <div class="payment__container">
      <div class="payment__container__left">
        Далеко-далеко за словесными горами в стране гласных и согласных живут, рыбные тексты.
      </div>
    </div>
  </div>
</section>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*SCSS Code*/
%container {
  color: red;
}
.delivery__container,
.payment__container {
  @extend %container;
}
.payment__container {
  font-weight: bold;
}
 
/* На выходе получаем: */
.delivery__container,
.payment__container {
  color: red;
}
 
.payment__container {
  font-weight: bold;
}

Не видите интересных возможностей применения?

@Sanya2019 · 09.01.2020, 14:15 **[ТС]**

У нас CSS обычно мне дают не менее 2000 / 3000 строк ))))
В итоге я сажусь и занимаюсь его оптимизацией получаю не более 1000 и при этом не теряя ничего из дизайна
Еще раз напишу, я никого не осуждаю, просто мне интересно что скажут другие или всем все равно на размеры CSS и на некрасивый код?

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

Не видите интересных возможностей применения?

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

Комментарий модератора

Оформляйте нормально сообщения

@mrtoxas · 09.01.2020, 14:28

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

у нас не может быть таких стилей

В общем, сферический код в вакууме. Нам тут вообще не видно что у вас в проекте. Собирайте ваших верстал и беседуйте с ними, обговаривайте моменты, проблемы и варианты их решения. Это нормальный рабочий момент. Тут вы вряд ли найдете ответ на такие вопросы. У нас своих косяков валом

@novichek_1905 · 09.01.2020, 15:06

Sanya2019, к стати, вы привели код, который написан на БЭМ. Сама методология предусматривает семантику. То есть ваши классы должны буквально описывать, что они собой представляют(самодокументирование), а это значит, что с точки зрения разметки у вас все ок. Каждый такой блок, должен быть описан полностью в собственном scss файле, не забываем учитывать миксование. А из этого следует, что дубли стилей неизбежны. Другое дело, что вы можете пользоваться всеми благами sass, как и предложил вам mrtoxas.

И да, помним что у браузера есть кеш. Он скачает один раз ваш CSS, и больше его трогать не будет, так что размер тут не критичен. К тому же, если вы используете какой-нить jquery, и другие либы, то это вообще наименшее зло.

CSS будет избыточен в любом случае, так как сама методология БЭМ не заточена на оптимизацию в плане количества кода, а как раз напротив. Ее использование, становится комфортным, при использовании sass классов, миксинов и других прелестей препроцессора.

Если хотите минимизировать количество CSS кода, выбирайте другую методологию. К примеру я использую ACSS, кода минимум, но у меня это необходимость, и все проекты строго прототипированы, причем мной, а не дизайнером. Подход как у бутсрап.

@D_Vik · 09.01.2020, 15:12

Похоже на инкапсуляцию объектов страницы.

@novichek_1905 · 09.01.2020, 16:39

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

Похоже на инкапсуляцию объектов страницы.

так и есть, БЭМ это методология, которая исключает наследование. В случае редизайна конкретных блоков страницы, scss файлы этих блоков просто отключается из сборки, тем самым исключая legacy код, и упрощая работу над крупным проектом группы разработчиков. Одним из плюсов это поддержка версионности "из коробки" + неограниченное пространство имен.

@Sanya2019 · 14.02.2020, 16:49 **[ТС]**

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

@Freeze_Breeze · 14.02.2020, 23:53

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

Новые блоги и статьи Все статьи Все блоги /
изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .

@gogolik Супер-модератор 3948 / 2055 / 829 Регистрация: 13.03.2010 Сообщений: 6,757
	09.01.2020, 12:25
	Не по теме: Писать вот так - болезнь. Любая разметка имеет место быть. Всё зависит от проекта. 1

@gogolik Супер-модератор 3948 / 2055 / 829 Регистрация: 13.03.2010 Сообщений: 6,757
	09.01.2020, 12:30
	Sanya2019, `section` может иметь свой стиль. `.wrapper` может иметь свой стиль. Но `section.payment .wrapper` может иметь другой стиль. Или может появиться необходимость сделать другой стиль или использовать разный js. 0

@gogolik Супер-модератор 3948 / 2055 / 829 Регистрация: 13.03.2010 Сообщений: 6,757
	09.01.2020, 12:36
	Sanya2019, я уже написал вам ответ на вопрос "зачем", в том числе и про js. Перечитайте внимательно. Плюс неплохо было бы почитать про бэм и SCSS. Больше чем уверен, что никто руками не прописывает одинаковые стили для блоков, а они автоматом генерятся. Ну и, чессказать, от лишних 30кб веса никто не умрёт. 0

@gogolik Супер-модератор 3948 / 2055 / 829 Регистрация: 13.03.2010 Сообщений: 6,757
	09.01.2020, 12:55
	Sanya2019, вы в начале нулевых застряли? Сейчас даже в деревнях есть стабильный интернет, для которого лишние 30кб ничего не решают для конечного потребителя. Удаляюсь с темы, для вас существует только ваше мнение, а любое другое воспринимается в штыки и уходит в попытки переубедить нас в своей правоте. 0

@novichek_1905 469 / 334 / 144 Регистрация: 16.02.2018 Сообщений: 930
	09.01.2020, 15:06
	Sanya2019, к стати, вы привели код, который написан на БЭМ. Сама методология предусматривает семантику. То есть ваши классы должны буквально описывать, что они собой представляют(самодокументирование), а это значит, что с точки зрения разметки у вас все ок. Каждый такой блок, должен быть описан полностью в собственном scss файле, не забываем учитывать миксование. А из этого следует, что дубли стилей неизбежны. Другое дело, что вы можете пользоваться всеми благами sass, как и предложил вам mrtoxas. И да, помним что у браузера есть кеш. Он скачает один раз ваш CSS, и больше его трогать не будет, так что размер тут не критичен. К тому же, если вы используете какой-нить jquery, и другие либы, то это вообще наименшее зло. CSS будет избыточен в любом случае, так как сама методология БЭМ не заточена на оптимизацию в плане количества кода, а как раз напротив. Ее использование, становится комфортным, при использовании sass классов, миксинов и других прелестей препроцессора. Если хотите минимизировать количество CSS кода, выбирайте другую методологию. К примеру я использую ACSS, кода минимум, но у меня это необходимость, и все проекты строго прототипированы, причем мной, а не дизайнером. Подход как у бутсрап. 2

@D_Vik 368 / 234 / 68 Регистрация: 19.07.2016 Сообщений: 833
	09.01.2020, 15:12
	Похоже на инкапсуляцию объектов страницы. 0

@Sanya2019 4 / 4 / 1 Регистрация: 15.03.2019 Сообщений: 676
	14.02.2020, 16:49 [ТС]
	ну я не только в качестве быстродействия просто читать не возможно такой код проще читать когда ООП а не виг знает что ( 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	14.02.2020, 23:53
	Sanya2019, Так почему бы Вам просто не переучить ваших верстальщиков на свою систему именования или использовать технологию БЭМ. В один прекрасный день просто скажите парням, что, -с сегодняшнего дня верстаем все по БЭМ и точка или используем такое, такое и такое, или просто заставляйте их что бы они переделывали свою работу, это их научит. А почему Вы после них потом всё переделываете, я не могу понять этого, тогда смысл с таких верстальщиков, если за ними всё приходиться переделывать. Повторюсь, не нравиться Вам как делают, либо научите делать правильно, либо заставляйте переделывать пока не выйдет так как хотите что бы выглядело. 0