Инструменты

  1. Написание кода #

    1. Emmet #

      Это инструмент, позволяющий писать CSS со скоростью мысли. По сути, это просто набор сниппетов, сокращений, которые по табу разворачиваются в HTML-разметку или CSS-свойства.

      Например, в CSS-файле можно написать db, нажать Tab и получить display: block, а из p20padding: 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, и в данный момент проект не развивается.

    2. Sass, Less, Stylus #

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

    3. Autoprefixer #

      Как можно догадаться из названия, этот инструмент избавит вас от небходимости писать префиксы: он разбирает ваш CSS-код и добавляет в него префиксы, основываясь на данных с CanIUse.

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

  2. Проверка кода #

    1. CSS syntax validator #

      Онлайн-инструмент для валидации CSS. На вход принимает только CSS (не Less, не Sass).

    2. The stylelint CLI #

      Инструмент для проверки форматирования и не только: он также может проверить код на использование Id, дублирование правил, конфликты свойств и перезапись одних свойств другими.

      Установка:

      npm install -g stylelint

      Также нужен файл с правилами проверки стилей. Можно взять мой набор правил, или накликать свой используя Stylelint Config Generator.

      Список правил сохраните в корне проекта в файл с названием .stylelintrc (без расширения).

      Файл можно отредактировать под ваши нужды, узнать больше о правилах можно здесь.

      Использование:

      SASS:
      stylelint "sass/**/*.scss"
      LESS:
      stylelint "less/**/*.less"

      Команда запускается в папке проекта.