Лучшие практики использования CSS

Вот несколько советов о том, как написать эффективный пользовательский CSS для Web UI компонентов и избежать излишней запутанности.

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

Избегайте излишне длинных селекторов, избегайте слишком общих селекторов, следите за избыточностью селекторов, отдавайте предпочтение классам, а не тегам и т. д.

Группируйте свои стили по цели, но не забывайте о том, как CSS применяется браузером.

Применяйте один набор одних и тех же свойств с помощью нескольких селекторов для разных компонентов.

Отдавайте предпочтение сокращенным свойствам, а не их составным эквивалентам.

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

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

В этих статьях мы часто используем имена цветов по умолчанию в примерах для простоты, но это не оптимальный способ назначения цветов в реальном проекте.

Используйте сайт caniuse.org, чтобы получить информацию о том, какие браузеры поддерживают выбранное свойство и как долго.

Нет необходимости применять z-index: 999999; к компоненту, который вы хотите приподнять над родственниками. Обычно достаточно однозначного значения, чтобы поместить элемент на самый верх разметки.

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

Особенно когда вы подключаете шрифты напрямую из интернета.