Как стать Front-end разработчиком? #5 Продвинутый CSS

После того, как вы изучили основы фундаментальных технологий для Front end разработчика - HTML, CSS и JavaScript, ознакомились и опробовали на практике менеджеры пакетов, попробовали создать свои первые проекты - самое время углубиться в технологии. В данной статье речь пойдет о продвинутом способе использовать стили в веб приложении, о том как делать это профессионально и качественно.

Основные моменты

• CSS препроцессоры (SASS, SCSS, LESS)
• CSS фреймворки (Bootstrap)
• CSS архитектура (BEM)

CSS препроцессор

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

Для использования CSS препроцессора нужно применять компилятор, который преобразует ваш код в чистый CSS. На начальном этапе (без сборщиков проекта) можно установить плагин для VSCode - Live SASS compiler.

Я использую препроцессор SCSS, так как он обладает набором мощных инструментов и привычным синтаксисом. В целом SCSS, SASS и LESS очень схожи, и выбор зависит от ваших предпочтений.

CSS фреймворки

CSS фреймворки - это совокупность уже готовых (стилизованных) элементов веб страницы. Они помогают создавать веб приложение последовательно и структурировано. Помимо готовых классов, которые вы можете добавить к элементу и сразу же получить, к примеру, стильную кнопку на своей странице, такой фреймворк включает в себя очень полезную фичу - “сетку”, для того чтобы создавать адаптивную и резиновую верстку просто, быстро и качественно.

По личному опыту могу сказать что используя фреймворк я беру из него только “сетку” для адаптивной верстки. Красивые, стилизованные элементы - это здорово, но зачастую у приложения есть свой уникальный дизайн, который требуется создать вручную.

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

CSS архитектура

CSS архитектура - это способ организации CSS кода, названия классов и вложенности элементов. Определенная архитектура нужна для более структурированного, читабельного и инкапсулированного кода.

Советую изучить и применять методологию BEM (block element modifier).

Пример кода с использованием БЭМ методологии

<form class="custom-form">
  <input type="text" class="custom-form__input" />
  <button
    type="Submit"
    value="Поиск"
    class="custom-form__button custom-form__button--red"
  >
    Поиск
  </button>
</form>

Пример стилизации в сочитании с использованием вложенности селекторов SCSS

.custom-form {
  padding: 10px;
  // Компилируется в CSS: .custom-form__input
  &__input {
    color: #333;
  }
  // Компилируется в CSS: .custom-form__button
  &__button {
    color: #fff;
    // Компилируется в CSS: .custom-form__button--red
    &--red {
      background: red;
    }
  }
}

Код CSS, который получает браузер после компиляции

.custom-form {
  padding: 10px;
}
.custom-form__input {
  color: #333;
}
.custom-form__button {
  color: #fff;
}
.custom-form__button--red {
  background: red;
}

Я использую методологию BEM в сочетании с препроцессором SCSS и сеткой Bootstrap. Сочетание BEM + SCSS позволяет создавать отдельные инкапсулированные компоненты веб страницы. Используя вложенность селекторов, как в примере выше, написанный код легко поддерживать и расширять в будущем.

SCSS и SASS - это одно и тоже с небольшим различием в синтаксе (отсутсвие скобок в SASS и т.д.)

Ресурсы для изучения

Препроцессоры

Русскоязычные

• SASS/SCSS - основы
• SASS/SCSS - документация

Англоязычные

• SASS/SCSS - официальная документация
• LESS - официальная документация

Фреймворки

Русскоязычные

• Статья по основам Bootstrap

Англоязычные

• Bootstrap - официальная документация
• Bulma - официальная документация

Архитектура

Русскоязычные

• BEM оффициальный сайт
• Руководство к действию
• Неплохая статья на хабре

Англоязычные

• BEM оффициальный сайт также поддерживает английский язык
• GetBem

План действий

1. Почитайте о методологии BEM и попробуйте применить знания на практике. Определите элементы на странице, которые можно объединить в блок, определите элементы этого блока, если у элементов есть определенные модификации - добавляйте к их классу модификатор.
2. Почитайте теорию о препроцессорах и выберите подходящий для себя.
3. Узнайте о том как скомпилировать код препроцессора в чистый CSS.
4. Начните с изучения простых фич препроцессоров (например вложенность селекторов) и используйте в комбинации с названиями классов BEM.
5. Наращивайте темп - смотрите в документацию и применяйте в своем проекте различные инструменты препроцессоров (переменные, импорты и т.д).
6. Попробуйте подключить к своему проекту CSS фреймворк с помощью менеджеров пакетов или другим удобным для вас способом.
7. Смотрите документацию по применению фреймворка. Попробуйте создать небольшой проект с использованием представленных элементов (готовых стилизованных классов) и сетки.

На что стоит обратить внимание

• Принцип BEM методологии

  • Блок (композиция элементов с одним назначением)
  • Элемент (составляющая блока)
  • Модификатор (состояние элемента - цвет, размер и т.д.)
• Компиляция кода препроцессора в чистый CSS.
• Фичи препроцессоров
• Сетка CSS фреймворка для адаптивной верстки

Послесловие

Освоив данные технологии, вы сможете стилизовать ваши веб приложения быстрее и легче. Ваш код будет более поддерживаемым и читабельным. Это огромный вклад в ваше развитие как Front end разработчика!

Еще один непростой, но захватывающий этап изучения позади! Продолжаем работать и идти к своей цели!