LINUX.ORG.RU

Какую файловую структуру CSS/SCSS лучше стоит использовать?

 , , ,


0

1

Итак, есть сассовский 7-1:

sass/
|
|– abstracts/
|   |– _variables.scss    # Sass Variables
|   |– _functions.scss    # Sass Functions
|   |– _mixins.scss       # Sass Mixins
|   |– _placeholders.scss # Sass Placeholders
|
|– base/
|   |– _reset.scss        # Reset/normalize
|   |– _typography.scss   # Typography rules
|   …                     # Etc.
|
|– components/
|   |– _buttons.scss      # Buttons
|   |– _carousel.scss     # Carousel
|   |– _cover.scss        # Cover
|   |– _dropdown.scss     # Dropdown
|   …                     # Etc.
|
|– layout/
|   |– _navigation.scss   # Navigation
|   |– _grid.scss         # Grid system
|   |– _header.scss       # Header
|   |– _footer.scss       # Footer
|   |– _sidebar.scss      # Sidebar
|   |– _forms.scss        # Forms
|   …                     # Etc.
|
|– pages/
|   |– _home.scss         # Home specific styles
|   |– _contact.scss      # Contact specific styles
|   …                     # Etc.
|
|– themes/
|   |– _theme.scss        # Default theme
|   |– _admin.scss        # Admin theme
|   …                     # Etc.
|
|– vendors/
|   |– _bootstrap.scss    # Bootstrap
|   |– _jquery-ui.scss    # jQuery UI
|   …                     # Etc.
|
`– main.scss              # Main Sass file

А есть бэмовский. Один блок — одна директория. Имена блока и его директории совпадают. Например:

  • Блок header — директория header/
  • Блок menu — директория menu/.
  • А реализация блока разделяется на отдельные файлы-технологии. Например, header.css, header.js.
search-form/
  __input/
    search-form__input.css
    search-form__input.js
  __button/
    search-form__button.css
    search-form__button.js
  _theme/
    search-form_theme_islands.css
    search-form_theme_lite.css
  search-form.css
  search-form.js
... и т. д.

Так вот, какой способ структурирования более предпочтителен в плане вашего удобства? Мне кажется бэм более чистый. Если я буду по бэмовски строить, допустим вам попался мой проект, как вам такая структура проекта? Удобен? Или SASS 7-1 рулит?

Чем проще, прозрачнее и понятнее - тем лучше. В идеале - достаточно одного взгляда через пару десятков итераций и все понятно без вопросов, более того - можно без проблем делегировать, подключать помощь.

Смотрел как-то TL;DR этот бэм, показалось монструозен или недопонял идеи.

А main.scss это типа хаб такой, который все инклудит?

Интересен еще момент, как в общем случае организован процессинг main - в моем случае подошел make, но разделения на инклуды фактически нет - просто отдельные файлики scss в основном.

anonymous ()
Ответ на: комментарий от anonymous

А main.scss это типа хаб такой, который все инклудит?

Да, это в каком-то смысле конроллер который вызывает всех. Некоторые ненавидят бэма из-за его длинных классов.

dimcoin ()
Ответ на: комментарий от dimcoin

идея хаб-контроллера годная в целом, но плата за это - все в одном выходном файле, хотя меньше оверхеда с именами и конфликтами

, длинные классы да - ненужная избыточность, порою

anonymous ()