Инструменты
-
Написание кода #
-
Emmet #
Это инструмент, позволяющий писать CSS со скоростью мысли. По сути, это просто набор сниппетов, сокращений, которые по табу разворачиваются в HTML-разметку или CSS-свойства.
Например, в CSS-файле можно написать
db
, нажать Tab и получитьdisplay: block
, а изp20
—padding: 20px;
;bgi
развернётся вbackground-image: url();
, аbz
— вbox-sizing: border-box;
. И таких комбинаций огромное множество.Подобным образом это работает для HTML:
.page
развернётся в<div class="page"></div>
, аul>li*3
— в ненумерованный список из трёх пунктов.Примеры сокращений можно найти в документации, но заучивать их совершенно необязательно: просто представьте как бы вы сократили нужное вам свойство — скорее всего, именно такое сокращение и сработает.
Также Emmet позволяет менять числовые значения с шагом 1 или 10, значения зажав
Alt
илиShift
(зависит от настроек плагина). Это быстрее и удобнее, чем редактировать числа руками.В некоторых редакторах Emmet есть по умолчанию, в другие потребуется поставить плагин, но в любом случае этот инструмент должен у вас быть, если вы не хотите долго и нудно набирать весь код руками.
Для Sublime Text есть аналогичный инструмент — Hayaku он работает умнее и лучше, но, к сожалению, он только для Sublime, и в данный момент проект не развивается.
-
Sass, Less, Stylus #
Используйте возможности препроцессоров, чтобы писать код аккуратнее и быстрее. Рекомендации по использованию можно почитать тут.
-
Autoprefixer #
Как можно догадаться из названия, этот инструмент избавит вас от небходимости писать префиксы: он разбирает ваш CSS-код и добавляет в него префиксы, основываясь на данных с CanIUse.
Обычно используется в виде плагина, подключаемого в Gulp или Grunt-файл, также он, как правило, есть в онлайн-песочницах, так что про добавление префиксов вручную можно забыть как про страшный сон.
-
-
Проверка кода #
-
CSS syntax validator #
Онлайн-инструмент для валидации CSS. На вход принимает только CSS (не Less, не Sass).
-
The stylelint CLI #
Инструмент для проверки форматирования и не только: он также может проверить код на использование Id, дублирование правил, конфликты свойств и перезапись одних свойств другими.
Установка:
Также нужен файл с правилами проверки стилей. Можно взять мой набор правил, или накликать свой используя Stylelint Config Generator.
Список правил сохраните в корне проекта в файл с названием
.stylelintrc
(без расширения).Файл можно отредактировать под ваши нужды, узнать больше о правилах можно здесь.
Использование:
SASS: LESS:Команда запускается в папке проекта.
-