Использование Bootstrap с его css

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

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

Можно ли расширить начальную загрузку для использования имен классов в стиле БЭМ?

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

Например, как мне назвать типичную загрузочную навигацию с помощью БЭМ?

       <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>

Что будет вовлечено и как я должен это сделать?


css twitter-bootstrap bem
person Bomber    schedule 26.11.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Да, вы определенно можете сделать это, используя @extend и @include, как показано в этой статье — "БЭМ, SASS и Bootstrap: как по-умному все смешать?"

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

.my-navigation {
    @extend .navbar;
 }

Таким образом, вы можете использовать class="my-navigation" вместо class="navbar".

Конечно, для этого вам нужно работать с файлами SASS Bootstrap, а не с скомпилированным CSS. Вот несколько советов: Установка и настройка Bootstrap Sass.

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

Почему следует избегать Sass @extend
Вредит ли sass производительности?
Повесть о здравомыслии переднего плана: остерегайтесь Sass @import

person Milan Nankov    schedule 31.10.2016