Вот список инструментов сборки CSS, упомянутых в обзоре состояния CSS 2020.
FrontEnd-разработка стремительно развивается. И вместе с этим CSS становится интересным. Недавно в CSS появились новые функции, такие как логические свойства, видимость содержимого.
Обзор состояния CSS 2020 перечислил несколько инструментов, о которых разработчики знают и регулярно используют. Основываясь на результатах опроса, давайте на минутку перечислим несколько из тех инструментов, о которых вам, вероятно, следует знать.
Stylelint
Stylelint - это CSS-линтер и имеет более 170 встроенных правил для обнаружения ошибок, применения ограничений и соблюдения стилистических соглашений. Это позволяет вам писать код вместе с вашей командой в последовательном и хорошо поддерживаемом стиле.
Стоит упомянуть одну конфигурацию, демонстрирующую возможности stylelint, это stylelint-config -rational-order. С помощью этой конфигурации вы можете установить порядок свойств в вашем CSS:
- Позиционирование
- Модель коробки
- Типография
- Визуальный
- Анимация
- Разное
Красивее
Форматирование кода с помощью инструмента сборки полезно, потому что вы можете иметь единый стиль для всего проекта, независимо от того, работаете ли вы в одиночку или в команде. Prettier - самый популярный форматер кода. Обычно он используется с Javascript и Typescript, но также работает с CSS и Sass.
Вы можете настроить Prettier для работы с хуком git. Он отформатирует ваш код, когда вы отправите его в репозиторий. Следовательно, когда вы просматриваете код из запроса на вытягивание, у вас есть гарантия, что не будет ошибок, связанных с форматированием кода.
Если вы используете Stylelint, упомянутый выше, вы можете деактивировать правила форматирования и позволить Prettier обработать эту часть с помощью плагина prettier stylelint-prettier.
PurgeCSS
Когда вы создаете веб-сайт, вы можете решить использовать фреймворк CSS, такой как TailwindCSS, Bootstrap, MaterializeCSS, Foundation и т. Д.… Но вы будете использовать только небольшой набор фреймворка, и многие неиспользуемые стили CSS будут включены.
Одна из оптимизаций заключается в удалении неиспользуемого CSS. Вы можете проверить неиспользуемые байты CSS с помощью инструментов разработчика Chrome. Обрезка CSS ускорит загрузку вашего сайта, потому что браузер будет запрашивать меньше кода и меньше CSS будет анализироваться.
PurgeCSS - это инструмент сборки для удаления неиспользуемого CSS. Он работает, анализируя содержимое нашего веб-сайта и сравнивая его с вашим CSS.
Автоприставка
Если вы загружаете свой проект с помощью инструментов vue-cli или create-react-app, autoprefixer уже будет включен в ваш проект. Приведенный ниже пример хорошо демонстрирует, какую проблему решает автопрефиксер.
В CSS селекторам и свойствам часто требуется префикс поставщика для работы в другом браузере . В приведенном выше примере :ms-input-placeholder используется для Internet Explorer, а ::-moz-placeholder - для Firefox .
cssnano
Уменьшение кода - обычная практика. Вы хотите минимизировать объем кода, отправляемого клиенту, и не обязательно оставлять пробелы в вашем коде для компилятора. Эта практика выполняется в Javascript с использованием терсера.
В CSS вы найдете cssnano, описываемый как модульный минификатор, построенный на основе экосистемы PostCSS. Он делает больше, чем просто удаляет пробелы, и имеет множество функций.
Его можно настроить на удаление повторяющихся правил, пустых правил и комментариев. Он преобразует значение цвета в наиболее эффективный для пространства формат. Белый цвет может быть определен в CSS как white, #ffffff, rgb(255, 255, 255), cssnano преобразует его в #fff.
Перечисленные выше инструменты позволяют вам линтировать, форматировать, изменять и минимизировать ваш код CSS, чтобы улучшить как ваш код, так и код, отправляемый вашим пользователям. Если вы ищете ресурсы по функциям макета CSS, упомянутым в опросе о состоянии CSS, ознакомьтесь со статьей ниже:
