Gtalk.kz

Сейчас я расскажу какую структуру для 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.

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

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