CSS структура на Ruby on Rails

Сейчас я расскажу какую структуру для css можно использовать, если вы разрабатывает на Ruby on Rails.

Пару фактов при которых всё это придумывалось и создавалось:

  1. Бэкенд на рельсах, используем все возможности которые есть, например, assets pipeline
  2. Используем идею бэм методологии

Структура выглядит следующим образом:

assets
+ stylesheets
++ common
+++ i-vars.sass
+++ i-mixins.sass
+++ ... etc
+++ common.sass
++ blocks
+++ ua
++++ ua.sass
+++ page
++++ page.sass
+++ ... etc
+++ blocks.sass
++ application.sass

Вот так выглядит application.sass

@import 'normalize-rails'
@import 'common'
@import 'style' // in each project different name

Вот пример обычного файла:

.page
  font-size: $font-size
  font-family: $font--main
  height: 100%

  &__header
    margin: 0

@keyframes animation-name
 0%,
 100%
   transform: scale(0.8)
 50%
   transform: scale(1.3)

@media screen and (max-width: 1224px)
 .page
   &__header
     width: 100%

Теперь немного поясню:

  • Используем application.sass для подключания:
    • сброс стилей;
    • уровни переопределения:
      • общие стили;
      • специфические для проекта;
  • в каждом уровне переопределения у блоков своя папка с названием блока;
  • внтури файла: название блока и вложенные элементы и модификаторы, затем анимация и стили для отзывчивого дизайна;
  • в файле блока находятся стили, которые относятся к данному блоку.

Для удобства мы используем следующий базовый набор гемов для фронтенда:

gem 'slim-rails'
gem 'sass-rails'
gem 'turbolinks'
gem 'jquery-rails'
gem 'autoprefixer-rails'
gem 'high_voltage'
gem 'bem'
gem 'normalize-rails'

В зависимости от проекта он может расширяться.

Гем bem нужен для создания блоков по методологии бэма. Подробнее что это такое и с чем его едят тут.  Проект на Github.

По умолчанию используем сброс стилей – нормалайз, который подключается через гем.

Вот такая простая, но удобная (как нам кажется) структура. Возможно у вас есть варианты как улучшить её ?! Делитесь своими идеями и примерами ;)



Комментарии закрыты к записи