Традиционно веб-сайты оформляются с использованием глобальных файлов CSS. Правила CSS глобального масштаба объявляются во внешних .css таблицах стилей, а специфичность CSS и каскад определяют, как применяются стили. Мы все это знаем, прошли через это.
Глобальный CSS сложный и запутанный… и старомодный. Я имею в виду, что это работает для очень маленького проекта, но никто не использует его для реальных проектов.
Даже если вы будете следовать методологии БЭМ, чтобы избежать проблемы с именами, глобальный CSS вообще не масштабируется. И вы, вероятно, в конечном итоге будете добавлять !important везде, потому что у вас нет времени придумывать, как этого не делать. Кроме того, это приводит к большому пакету и более медленной загрузке приложения.
Итак, первое и самое простое, что приходит мне в голову, это избегать всего того, что представляет собой CSS-модули. И это первая стратегия.
1. CSS-модули
Файл модуля CSS (.module.css) написан так же, как обычный CSS, но его можно ограничить отдельным компонентом, а это означает, что вам не нужно беспокоиться о конфликтах имен при написании кода. Таким образом, вы можете иметь одни и те же имена классов в разных файлах и определять их стиль с помощью таблиц стилей с локальной областью действия, и вам не нужно беспокоиться о том, что они будут мешать друг другу.
Кроме того, он сообщает вашему приложению, какую именно таблицу стилей загружать для данной страницы, и это уменьшает размер пакета! 🚀
В целом, модули сделают вашу жизнь проще, но вы все равно будете иметь дело с простым CSS, и ему не хватает программных функций, таких как циклы, функции, примеси и тому подобное.
2. Препроцессоры
Препроцессоры, такие как LESS, SASS, Stylus или PostCSS, позволяют вам писать другой расширенный синтаксис, а затем использовать компилятор для преобразования этого кода обратно в простой CSS, чтобы браузер его понимал.
Это как CSS со сверхспособностями ⚡
Около 80% самых популярных препроцессоров одинаковы. Остальные 20% состоят из незначительных различий в расширенном использовании. Все они позволяют создавать переменные, медиа-запросы, миксины, вложения, циклы и условия, а также импортировать. Они позволяют вам абстрагироваться от ключевых элементов дизайна, использовать логику и писать меньше кода, что дает вам преимущество перед базовым CSS.
Оба этих способа означают, что наш CSS отделен от основного кода. Если вам нравятся комбинации JSX и HTML+JS, вам может понравиться следующий подход.
3. CSS-IN-JS
Библиотеки, такие как Styled component, JSS, Emotion и многие другие, но их всех объединяет то, что они позволяют вам писать CSS в коде javascript. Это позволяет вам делать многие программные вещи и использовать всю мощь javascript: вы можете использовать свои внутренние переменные javascript и создавать динамические стили на основе состояния вашего приложения.
Кроме того, эти стили также имеют область действия.
Для людей, которые не любят возиться со стилями внутри своего Javascript-кода, лучшим выбором может быть следующий вариант:
4. Библиотеки служебных классов
Библиотеки, такие как Tailwind или Windi, предоставляют служебные классы, которые можно использовать для быстрого и простого оформления своего приложения. Вспомогательные классы помогают работать в рамках ограничений системы. Они упрощают согласованность выбора цвета, интервалов, типографики, теней и всего остального, что составляет хорошо спроектированную систему дизайна.
Он отличается от таких фреймворков, как Bootstrap, Foundation или Bulma, тем, что это не набор пользовательского интерфейса.
Эти библиотеки позволяют вам делать что-то намного быстрее, а также загружают только те классы, которые вы используете, что приводит к наименьшему пакету. Эффективный! 🚀
Недостатком может быть то, что вы можете получить сложный HTML, и вам нужно научиться избегать этого и использовать эти библиотеки с максимальной эффективностью.
5. CSS-фреймворки
Теперь это фреймворки, о которых я только что упомянул: Bootstrap, Foundation, Bulma и другие. Они предоставляют служебные классы, такие как Tailwind или Windi, но они также служат наборами пользовательского интерфейса, имея собственную систему дизайна и готовые к использованию элементы пользовательского интерфейса.
Просто, эффективно, популярно.
Однако здесь вы получите больший размер пакета. Кроме того, если вы хотите что-то нестандартное — вам нужно создавать что-то поверх предоставленных компонентов, что никогда не бывает легко или весело.
Это, я бы сказал, 5 основных подходов к CSS в настоящее время, которые вы можете смешивать и сочетать, чтобы использовать то, что лучше всего подходит для вашего приложения.
Но подождите, есть БОНУС?
Да, и это библиотеки компонентов.
Библиотеки компонентов
Когда дело доходит до фреймворков Javascript, более тесно интегрированный подход заключается в использовании с ними полноценной библиотеки компонентов. Есть такие, которые уже делают это для Bootstrap, например — React-Bootstrap, BootstrapVue, NgBootstrap.
Тот, с которым я недавно столкнулся для React в Mantine — он не только обрабатывает большую часть CSS, но и предоставляет массу утилит для обработки вещей, которые в противном случае вам пришлось бы делать в Javascript, например, хуки для использования Intersection Observer API. чтобы знать, когда элемент виден или нет.
Существует множество подобных библиотек, поэтому обязательно выберите ту, которая вам действительно нравится.
Стоит также обратить внимание на Дизайн муравьев, Материальный дизайн, Ребасс, Чакра UI и Тамагуи.
Дайте мне знать, что вы используете в комментариях!
