Сокращения CSS: стоит ли их писать?

(Что такое сокращение CSS? Пример: flex: 0 1 10%; это сокращение нескольких CSS деклараций).

Короткий ответ

Нет.

Также, пожалуйста, не учите им новичков как «приятной вещи». Это подает им очень плохой пример.

Длинное объяснение

Существуют правила чистого кодирования, которые нарушают сокращения:

Ментальное отображение

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

Можно не быть органическим синтаксическим анализатором.

Магическое местоположение — это вариант ментального отображения, когда для разрешения сокращения вам нужно точно запомнить точное местоположение и его значение.

Например, если вы видите такой вызов функции:

updateUser(12, 34, 33, 1000, 0, null, 'yes');
Войти в полноэкранный режим Выход из полноэкранного режима

вам нужно будет вспомнить, как вызывается каждый параметр и их роль для каждой позиции. По мне, так это безумие… 😐

Пример CSS

Давайте проанализируем flex: 0 1 10%, flex: 0 10% и flex: 0 10!

В первом случае первое число является сокращением для flex-grow, второе — flex-shrink и третье — flex-basis. Если вы редко пишете CSS, вам будет трудно запомнить их. В момент написания этой статьи мне пришлось вернуться к документации, чтобы еще раз проверить, не было ли все наоборот… А я пишу CSS еженедельно, по крайней мере, один раз.

Хуже того, если вы наконец вспомнили, что второе число — это flex-shrink, что, к сожалению, не всегда верно.

Во втором примере при использовании знака % это будет означать: flex: <flex-grow> <flex-basis>, но в последнем примере это будет flex: <flex-grow> <flex-shrink>. Видите? Даже значение местоположения условно!

Альтернатива

После многих лет борьбы с этим я решил отказаться от сокращений, за исключением самых необходимых (например, padding, но иногда я пишу его полностью, когда, скажем, не нужен только bottom).

Действительно ли вредно писать так?

.thing {
  flex-shrink: 0;
  flex-grow: 1;
  flex-basis: 10%;
}

/* instead of this... */
.other-thing {
  padding: 13px 24px 0 24px;
}

/* this? */
.other-thing {
  padding-top: 13px;
  padding-right: 24px;
  padding-left: 24px;
}
Войти в полноэкранный режим Выход из полноэкранного режима

Имеет ли размер значение?

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

Так что проблема размера действительно может быть решена с помощью инструментов.

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

Беспокоитесь о том, что много печатаете?

Это будет резкое заявление, но важно, чтобы оно оказало эмоциональное воздействие:

Если вас беспокоит количество символов, которые вам нужно набрать, возможно, вам не стоит работать в командах.

Большая часть моей работы делается для того, чтобы другие члены команды могли глубже и быстрее понять мой код. Это экономит время для них, или для меня пару недель спустя, или, в конце концов, для компании. Как я уже говорил, мы не парсеры, наш разум полон остатков других парадигм, других стандартов, и, наконец, есть просто другие разработчики, которые будут гостями в вашей кодовой базе или во фронтенд-разработке, и вы не можете требовать от них помнить все эти вещи.

Так что давайте оставим сокращения для машин и будем писать код для людей! 😊

Оцените статью
Procodings.ru
Добавить комментарий