В мире фронтенд-разработки есть МНОЖЕСТВО инструментов, которые мы можем использовать. Кажется, что всегда есть что-то новое и блестящее, и кажется, что нам всегда нужно обновлять нашу базу знаний.

Несмотря на то, что в мире JavaScript много изменений, есть несколько констант. Одна из этих констант определяет стиль нашего кода. С созданием SASS мы, разработчики интерфейса, получили очень мощный инструмент. Мы должны понимать возможности и пытаться использовать их для написания кода, который будет одновременно мощным, удобным в сопровождении и, что наиболее важно, читабельным.

Если вы похожи на меня, то вы, вероятно, НЕНАВИДИТЕ запутанные таблицы стилей. Ничто не будет раздражать меня больше, чем открытие таблицы стилей и код, который нарушает методологию DRY. Зачем 20 классов, которые делают одно и то же, за исключением одной цифры или буквы? Я надеюсь показать вам способ, чтобы это больше никогда не повторилось!

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

Это супер повтор. Это также больно писать и больно поддерживать. Что, если бы был лучший способ?

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

В идеале мы не хотели бы использовать 2 случайных числа в качестве наших ограничений, поэтому в идеале мы должны создать третью карту значений. Я только что нашел этот пример, чтобы продемонстрировать еще один инструмент из области scss. Теперь мы можем использовать имя нашего класса, которое будет выглядеть примерно так: minimum-width-2 или maximum-height-1.

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

Рекомендую ознакомиться с официальной документацией здесь. Если вы хотите ознакомиться с другими моими публикациями, их можно найти здесь. Я пишу обо всем, что связано с интерфейсом, поэтому у меня есть посты на React, TypeScript и Electron.

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