Що робить BEM кращим, ніж використання нестабільної мови аркуша стилю, як МЕНШЕ?

Мій колега наполегливо підштовхує метод BEM ( Block Element Modifier ) для CSS в проект, який він керує, і я просто не можу зрозуміти, що робить це краще, ніж МЕНШИЙ CSS, про який ми писали роками.

Він стверджує, що "більш висока продуктивність", але я не уявляю, як продуктивність може мати значення для типів веб-додатків, про які ми пишемо в цьому магазині кодів. Тут ми не робимо Twitter чи Facebook. Я був би дуже здивований, якщо наші додатки з найвищим рівнем використання мають більше 10000 звернень на місяць , а більшість - менше 1000.

Він стверджує, що "читабельність" та "повторне використання", але , на мою думку , ЛЕСС це вже робить набагато краще . І я відчуваю, що BEM так погано обробляє розмітку з десятками зайвих символів, присвячених цим іменам наддовгих класів, що це кардинально знижує читабельність.

Він стверджує, що "вкладений CSS є анти-зразком". Що навіть означає "антидіаграма" і чому вкладений CSS поганий?

Він стверджує, що "всі рухаються до використання BEM, тому ми також повинні". Мій лічильник: "Якби всі стрибали з мосту, ви б пішли за ними?" Але він до цього часу абсолютно неприхильний.

Невже хтось може, будь ласка, пояснити детально, що робить BEM кращим за МЕНШЕ? Мій колега повністю не переконує мене, але я не знаю, чи є у мене вибір, як слідкувати. Я дійсно швидше зміг би оцінити BEM, ніж бурхливо прийняти його.

Мій колега наполегливо підштовхує метод BEM (Block Element Modifier) ​​для CSS в проект, який він керує, і я просто не можу зрозуміти, що робить це краще, ніж МЕНШИЙ CSS, про який ми писали роками.

BEM - це методологія CSS. До інших належать OOCSS та SMACSS. Ці методології використовуються для запису модульного, розширюваного, багаторазового коду, який добре працює в масштабі.

LESS - препроцесор CSS. До інших належать Sass та Stylus. Ці препроцесори використовуються для перетворення відповідних джерел у розширений CSS.

BEM і менше не є порівнянними як "кращі" один за одного, вони є інструментами, які служать різним цілям. Ви б не сказали, що викрутка краще, ніж молоток, за винятком випадків, коли ви розглядаєте корисність для вирішення конкретної проблеми.

Він стверджує, що "більш високі показники" ...

Ефективність потрібно вимірювати між класичним стилем CSS:

.widget .header

і BEM стиль:

.widget__header

але в цілому ефективність роботи селектора CSS не є вузьким місцем і його не потрібно оптимізувати.

BEM "продуктивність" зазвичай стосується коду написання продуктивності розробника. Якщо методологія BEM використовується послідовно і правильно, групам розробників легко одночасно створити окремі модулі без зіткнень стилів.

Він стверджує, що "читабельність" та "повторне використання" ...

Я не знаю, що я сказав би новому розробнику, що BEM читабельніше. Я можу сказати, що він містить деякі чітко визначені вказівки щодо сенсу та структури занять.

Бачити такий клас

.foo--bar__baz

Мені каже, що є fooблок, який знаходиться в barстані, і містить bazелемент.

Я б абсолютно сказав, що BEM є більш багаторазовим використання, ніж класична модель.

Якщо два розробники створюють блоки ( fooі bar), і обидва ці блоки мають заголовки, вони можуть безпечно використовувати свої блоки в різних контекстах, не хвилюючись про зіткнення імен.

Це тому, що в класичному контексті було б .foo .headingі .bar .headingконфлікт, і запровадив конфлікт специфіки, який потрібно було б вирішити, можливо, у кожному конкретному випадку.

На сайті BEM класи були б .foo__headingі .bar__headingніколи не конфліктували б.

Він стверджує, що "вкладений CSS є анти-зразком". Що навіть означає "антидіаграма" і чому вкладений CSS поганий?

"Антидіаграма" - це схема кодування, яку легше вивчити та використовувати недосвідченим розробникам, ніж більш підходяща альтернатива.

Що стосується того, чому вкладений CSS поганий: вкладення підвищує специфіку селектора. Чим вище специфіка, тим більше зусиль потрібно, щоб перекрити. Недосвідчені розробники часто переживають, що їх CSS може вплинути на кілька сторінок, тому вони використовують селектори, наприклад:

#something .lorem .ipsum .dolor ul.sit li.amet a.more

Коли досвідчений розробник побоюється, що їх CSS може не впливати на кілька сторінок, тому вони використовують селектори, як-от:

.more

Він стверджує, що "всі рухаються до використання BEM, тому ми також повинні". ...

Це помилка прокладки , тому ігноруйте це як поганий аргумент. Не потрапляйте в пастку до помилкової помилки , тому що поганий аргумент на підтримку BEM - це не привід вважати, що BEM не може бути хорошим.

Невже хтось може, будь ласка, пояснити детально, що робить BEM кращим за МЕНШЕ?

Я висвітлював це раніше, BEM & МЕНШЕ не порівнянні. Яблука та апельсини тощо.

Мій колега повністю не переконує мене, але я не знаю, чи є у мене вибір, як слідкувати.

Я рекомендую ознайомитись з OOCSS, SMACSS та BEM та зважити плюси та мінуси кожної методології ... як команду . Я використовую BEM, тому що мені подобається його суворість у форматі, і не заперечую проти некрасивих селекторів, але я не можу сказати вам, що підходить для вас або для вашої команди. Не дозволяйте одному відвертому особистості вести шоу. Якщо вам не подобається BEM, пам’ятайте, що існують інші альтернативи, які можуть полегшити підтримку вашої команди. Можливо, вам доведеться відстоювати свою позицію разом із колегою, але довгостроково це, ймовірно, позитивно вплине на результат ваших проектів.

Я дійсно швидше зміг би оцінити BEM, ніж бурхливо прийняти його.

Я написав відповідь на StackOverflow, яка описує, як працює BEM . Важливо розуміти, що ваші ідеальні селектори повинні мати специфіку, 0-0-1-0щоб їх було легко перекрити і розширити.

Вибір використання BEM не означає, що вам потрібно відмовлятися від МЕНШЕ! Ви все ще можете використовувати змінні, ви все ще можете використовувати @imports, і ви, безумовно, можете продовжувати використовувати гніздування. Різниця полягає в тому, що ви хочете, щоб виведений результат став єдиним класом, а не ланцюгом нащадків.

Де ти, можливо, був

.widget {
    .heading {
        ...
    }
}

З BEM ви можете використовувати:

.widget {
    &__heading {
        ...
    }
}

Крім того, оскільки BEM обертається навколо окремих блоків, ви можете легко розділити код на окремі файли. widget.lessмістив би стилі для .widgetблоку, тоді як component.lessмістив би стилі для .componentблоку. Це значно полегшує пошук джерела для будь-якого конкретного класу, хоча ви, можливо, все ж бажаєте використовувати вихідні карти.

Редагувати 2017 рік

Якщо ви читаєте це в 2017 році, тіньові полімери DOM та тіні DOM, а також компоненти вирішують усі ці проблеми, зберігаючи код невеликим, щільним та модульним. Не використовуйте BEM у проекті IMO, що займається екологічним полем.

Замість BEM у нас є такі інструменти, як ViewEncapsulation, Polymer, StyledJSX, SASS модулі, Styled Components тощо.

Подумайте про використання BEM, якщо у вас немає архітектури, орієнтованої на компоненти; якщо у вас є застарілий код для підтримки; або якщо ви просто мертві, готові робити все вручну без інструментів.

BEM робить вашу укладку незалежною від вашого гніздування DOM. Це робиться, надаючи кожному елементу, який, можливо, захочеш атрибутувати клас атрибутів великого походження, який, ймовірно, буде унікальним на вашій сторінці. Більшість стилів виконується на заняттях.

Це робить ваш код більш модульним, оскільки вкладення вже не враховується за рахунок великої кількості багатослівних.

Без BEM

Без BEM, ми можемо написати це:

<div class="widget">
  <a>Hello!</a>
  <ul>...</ul>
</div>

Стандартна укладка CSS може виглядати приблизно так:

.widget {
  border: 1px solid red;
}

.widget a {
  color: green;
}

Те саме було б із SASS:

.widget {
  border: 1px solid red;
  a {
    color: green;
  }
}

Якщо ви невелика команда, де кожен може кодувати CSS на високий рівень, а проект досить малий, щоб ви могли підтримувати його повне усвідомлення, це хороше і розумне рішення.

З BEM

Однак якщо ваш код стає більшим і у вас є велика команда зі змішаними можливостями, це може бути не таким простим рішенням. Що робити, якщо ви хочете, наприклад, зелених якорів в іншому віджеті. Тому ми робимо якір модульним і усуваємо селектори нащадків.

Тепер наш HTML набагато більш багатослівний:

<div class="widget">
  <a class="widget__anchor">Hello!</a>
  <ul class="widget__ul">...</ul>
</div>

У нашому CSS немає селекторів:

.widget {
  border: 1px solid red;
}

.widget__anchor {
  color: green;
}

Але ми можемо це зробити:

<div class="widget__2">
  <a class="widget__anchor">Hello!</a>
</div>

Віджет__anchor є модульним. Навряд чи інше визначення .widget__anchor буде існувати на сторінці.

компроміси:

BEM:

• Надає вам більше модульного коду. Ви можете взяти будь-який шматок ізольовано.
• Дозволяє комусь писати CSS. Вам не потрібно знати про майстерне стилювання та спеціальні зміни. У великій команді це приємно.
• Видаляє будь-які проблеми з специфікою.
• Значно більш багатослівний.

Стандартний CSS (який спирається на використання селекторів нащадків):

• Значить, ваш стиль залежить від контексту.
• Вимагає усвідомлення каскаду. Код одного разу може вплинути на код в іншому місці. У невеликій команді це гарна річ.
• Може постраждати від питань специфіки, які новачеві-розробнику може бути важко налагодити.
• Значно жорсткіше.

Третій спосіб - реальні компоненти.

Якщо ви використовуєте щось на кшталт React, Angular 2 або будь-який інший сучасний фреймворк, у вас є інше рішення. Ви можете використовувати інструменти для забезпечення інкапсуляції.

У цьому прикладі використовуються React та StyledJSX, але є багато варіантів. Ось віджет:

const Widget = () => 
  <div>
    <a>Hello</a>
  </div>
  <style jsx>
    div {border:red }
    a { background: pink }
  </style>

Тоді ви скористаєтесь новим віджетом таким чином:

<Widget />

Усі стилі, оголошені у віджеті, будуть інкапсульовані та не застосовуватимуться до елементів поза компонентом. Ми вільні просто стиль divі aбезпосередньо , не піклуючись про випадкову стилізації що - небудь ще на цій сторінці.

Жоден підхід не ідеальний. ІМХО, ми повинні отримати найкращі частини кожної з методологій (BEM, SMACSS, OOCSS, DRY). Використовуйте SMACSS для організації структури папок у вашому CSS, спеціально для визначення логічного розбиття всього CSS. DRY для створення бібліотеки утиліт або може бути загальною бібліотекою модифікаторів, яку іноді використовувати разом із класами на основі BEM. OOCSS для компонентів. І BEM для невеликих компонентів або підкомпонентів. Там ви можете розподілити складності та отримати свободу працювати у великій команді.

Будь-який при використанні без розуміння суті цього призведе до поганого.

Хоча BEM є хорошим підходом для більших команд, він має і деякі недоліки. 1.Іноді це призводить до дуже довгих імен у великій структурі HTML. Отриманий великий розмір файлу CSS. 2. Для гніздування htmls, що перевищує 2-3 рівні, стає головним болем визначати імена.

Вирішення конфліктів може бути легко керовано, якщо ми думаємо про структуру компонентів разом з дуже базовим набором базового стилю. Це більше лише дворівневе успадкування. Кожен елемент всередині компонента матиме або глобальне правило стилю, або характерне для цього компонента. Це один із найпростіших варіантів.