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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Исключения

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

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

…и:

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

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

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

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

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

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