Как организовать CSS с БЭМ? - PullRequest
Новая
       16

Как организовать CSS с БЭМ?

2 голосов
/ 14 марта 2019

Я только что узнал о БЭМ, и я хочу организовать свой CSS с ним.Как мне организовать мой CSS с BEM?Сайт BEM не говорит вам, как организовать ваш CSS с BEM;веб-сайт просто говорит вам, как назвать ваши БЛОКИ, ЭЛЕМЕНТЫ и МОДИФИКАТОРЫ.

Кроме того, следует ли мне использовать разные таблицы стилей для каждой веб-страницы или использовать SASS и объединить все мои scss.files в один CSSфайл?

/********************************
BLOCKS 
********************************/



/********************************
ELEMENTS
********************************/


/********************************
MODIFIERS
********************************/


or

/********************************
HEADER
********************************/


/********************************
MAIN SECTION 
********************************/


/********************************
FOOTER
********************************/



/********************************
MEDIA QUERIES
********************************/

Ответы [ 2 ]

2 голосов
/ 14 марта 2019

Попробуйте разные подходы и используйте все, что лучше для вас. Не бойся экспериментировать. Если вы уже знакомы с SASS и хотите вдохновения, вот моя обычная стратегия: 

/* file: _block-name.scss */

.block { // selector for the block

  font-size: 12px; // example property

  &__element { // nested selector, equivalent to: 'block__element'

    background-color: white; // example property

    &--modifier { // nested selector, equivalent to: 'block__element--modifier'

      border: 2px solid red; // example property

    }

  }

}

Каждый элемент уровня блока имеет свой собственный файл как частичное .scss. Вложенные селекторы (предоставляемые SASS) используются для нацеливания на все элементы и модификаторы этого блока.

Этот подход хорошо подходит для основанных на компонентах сред, таких как React (где каждому компоненту назначается собственный селектор уровня блока BEM), но он также работает автономно.

Если вы ищите BEM SASS в выбранной вами поисковой системе, вы можете найти множество других (совершенно обоснованных) подходов к организации вашего CSS с помощью BEM. :)

1 голос
/ 18 марта 2019

Хороший вопрос!

Какая организация для ваших файлов?

Раньше у нас был один файл на блок с BEM.Это важно по двум причинам:

  1. Когда вы видите класс, в котором вы уже знаете, в каком файле он находится
  2. Ясно, что неправильно использовать селектор с двумя разными блоками, потому что выне знаю, где его разместить

Какая организация для ваших селекторов?

Я советую вам перейти сверху (блок) к низу (элементы) и поставить альтернативные стили(модификаторы, медиа-запросы) непосредственно после каждого блока / элементов.Итак: 

/* Footer.css */
/* Block */
.footer { }

/* Block modifiers */
.footer--dark { }

/* Block media-queries */
@media (max-width: 480px) {
    .footer { }
    .footer--dark { }
}

/* One element */
.footer__logo { }

/* One element modifiers */
.footer--dark .footer__logo { }

/* One element media-queries */
@media (max-width: 480px) {
    .footer__logo { }
    .footer--dark .footer__logo { }
}

/* another element */
/* ... */

Должен ли я использовать вложенность Sass?

Будьте осторожны с использованием Sass, один из ответов посоветует вам вложить ваш селектор так: 

.footer {
    &--dark { }
}

Это сложнее читать, искать, заменять и т. Д. Вы, вероятно, будете читать его чаще, чем пишете, так что это может быть хорошим выбором, чтобы избежать этого.

Вот полный плюс /Недостатки вложенности sass: http://bradfrost.com/blog/post/sass-selectors-to-nest-or-not-to-nest/

Какая организация для ваших скомпилированных файлов?

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

...