Использование Bootstrap with itscss

Question

Увидев соглашения об именах BEM.

Я бы очень хотел использовать bootstrap sass с этими методами.

Можно ли расширить загрузку, чтобы использовать имена классов стиля BEM?

.block {} 
.block__element {} 
.block--modifier {} 

Например, как я могу назвать типичный загрузочный навигатор с помощью BEM?

 <header className="container-fluid"> 
      <nav className="navbar navbar-default navbar-static-top"> 
       <div className="container"> 
        <div className="navbar-header"> 
         <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 
           aria-expanded="false" aria-controls="navbar"> 
          <span className="sr-only">Toggle navigation</span> 
          <span className="icon-bar"></span> 
          <span className="icon-bar"></span> 
          <span className="icon-bar"></span> 
         </button> 

Что было бы затронуто и как я должен это делать?

Answer 1

Да, вы определенно можете сделать это с помощью @extend и @include, как продемонстрировано в этой статье - «BEM, SASS and Bootstrap: how to mix everything up in a smart way?»

Основная идея заключается в том, что вы можете применить свойства CSS классов загрузчика собственных классов. Например, собственный блок навигации (.my-навигация) могут получить все стили CSS в .navbar:

.my-navigation { 
 
    @extend .navbar; 
 
}

Таким образом, вы можете использовать класс = «моя-навигация» в вместо использования класса = "navbar".

Конечно, чтобы иметь возможность сделать это, вам нужно работать с файлами SASS Bootstrap - не скомпилированным CSS. Вот несколько указателей - Bootstrap Sass Installation and Customization.

Еще одна важная вещь, указывающая на то, что включение/расширение всех классов Bootstrap просто потому, что вы хотели бы использовать BEM, возможно, не лучший подход. Это сладкое пятно, которое вам нужно выяснить для себя и проекта, над которым вы работаете. Вот некоторые ссылки, где это обсуждается:

Why You Should Avoid Sass @extend
Does sass harm performance?
A Tale of Front-end Sanity: Beware the Sass @import