Сокращенный синтаксис CSS считается антишаблоном

Сокращенный синтаксис CSS считается антишаблоном

От автора: я часто сталкиваюсь с небольшой, но удивительно значимой проблемой, когда работаю с чьим-то кодом, делаю рефакторинг, проверяю его. И проблема заключается в использовании сокращенного синтаксиса CSS.

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

Когда мы пишем что-то такое:

.btn {
  background: red;
}

…мы хотим сделать фон кнопки красным. Но на самом деле мы получаем следующее:

.btn {
  background-image: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat-x: initial;
  background-repeat-y: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: red;
}

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

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

Злоупотребление сокращенным синтаксисом – прямой путь наделать дел, не подумав, чего следует избегать. Стили намного сложнее отменить, чем поставить.

В этом примере код на самом деле должен быть таким:

.btn {
  background-color: red;
}

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

.base-class {
  background-position: 0 0;
  background-repeat: no-repeat;
}

.base-class--modifier {
  background: radial-gradient(...)
}

Разработчик, по понятным причинам, воспользовался генератором для создания сложного радиального градиента, но вышло так, что на экране вообще ничего не отобразилось. Ошибок в написании градиента не было, autoprefixer отработал хорошо, но по каким-то причинам страница выглядело сильно поломанной.

Они не могли понять, в чем ошибка, и дошло до того, что разработчику сказали «дайте Гарри посмотреть на код градиентов». Годы опыта за плечами инстинктивно подсказали мне, куда смотреть, и, конечно же, я нашел ошибку. В Sass в генераторе градиентов было запрятано сокращенное свойство background.

Эта проблема часто встречается в генераторах градиентов, поэтому:

быстро обновите свои генераторы градиентов;

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

перепроверьте вставленный из онлайн генераторов код.

Пример с background – один из многих, где нельзя использовать сокращенный синтаксис. Другой частый пример – вертикальное центрирование при помощи margin: 0 auto;:

.wrapper {
  margin: 0 auto;
}

Проблема тут в том, что для того, чтобы использовать сокращение для установки auto всего один раз (но на левых и правых отступах), нам нужно было подумать также о верхних и нижних отступах. Мы этого не сделали и неявно удалили верхние и нижние внешние отступы, которые могли быть прописаны специально где-то еще.

Если необходимо центрировать div, не изменяйте верхние и нижние отступы. Лучше возьмите длинную версию свойства:

.wrapper {
  margin-right: auto;
  margin-left:  auto;
}

Прогоните строку 0 auto через grep.

Исключения

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

.box {
  padding: 10px;
}

Тут мы ничего случайно не сбрасываем, потому что мы хотим применить паддинг в 10px ко всем четырем сторонам. Тут сокращенный вариант нормально подходит. Еще:

.btn {
  padding: 12px 24px;
}

…и:

.foo {
  margin: 12px 17px 16px 10px;
}

Здесь (хотя я бы засомневался в правильности использования волшебных чисел) мы явно указываем значения для всех четырех сторон, тут сокращенный вариант подходит.

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

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

Всегда выбирайте длинные версии свойств. Кнопок нажмете больше, повторений будет больше, код не будет придерживаться принципа DRY (не повторяться), но зато так точность выше.

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

Источник: http://csswizardry.com/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree