Андрей Мотошин Front-end engineer

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

input {
  border: 2px solid #000;
}
p {
  margin: 10px 0;
}

Попытаюсь еще раз ответить на него.

Допустим стоит задача сверстать сайт-агрегатор служб доставки. Там есть список фирм, список продуктов, которые каждая доставляет. Так же есть возможность заказа доставки у понравившейся компании. Сайт как сайт, ничего сложного.

Начали верстать. Среди большого количества правил CSS используем так же два правила, которые представлены выше. Действительно, в дизайне у нас все input-ы имеют соответствующую границу, а все параграфы отступ в 10 пикселей — не придерешься.

Сверстали сайт, программист его спрограммировал, выложили на хостинг и запустили. Все хорошо — сайт работает.

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

На этом новом типе страниц есть как старые элементы, перешедшие от основного сайта, так и новые «корпоративные». В связи с этим input-ы на мини-сайте имеют границу в 1 пиксель и она серая, а между параграфами исчез отступ. Мелких изменений подобного рода штук 20.

Однако, такой задачи изначально не стояло и верстальщик не предусмотрел варианта, что эти элементы будут иметь разный вид. Как решить эту проблему?

Подключать свой файл CSS для мини-сайта не вариант, потому что слишком много используется старых элементов. Дублировать их в новый файл — дальнейшие изменения придется вносить уже в двух, велика вероятность что-то забыть.

Остается переопределять имеющиеся стили локально, что так же накладывает свои сложности на поддержку этого сайта в дальнейшем. Вдруг понадобится изменить цвет текста во всех input-ах, кроме мини-сайта? Придется для него опять делать переопределение. И так далее: сегодня переопределили 20 правил, завтра еще 20, а через месяц код превратился в кашу, которую невозможно поддерживать. И что, переверстывать?

Было бы проще, если бы верстальщик предусмотрел дальнейшее добавление страниц и изменения в ходе поддержки. Допустим так:

.form input {
  border: 2px solid #000;
}
.text p {
  margin: 10px 0;
}

И теперь, чтобы задать обычное поведение input-ов, форме остается добавить класс form. Кроме этого мини-сайт стало возможным сделать без быдлокода:

.mini-site input {
  border: 1px solid #ccc;
}
.mini-site p {
  /* А тут отступов и так нет, если используется reset.css */
}

Надеюсь, я убедил сомневающихся в полезности данного подхода. Для резюме скажу, что сложности возникают именно при доработке и поддержке кода. Как следствие, на эти действия верстальщик потратит больше времени и значит это обойдется дороже фирме, в которой он работает.