banzalik
+1
Все, что повторяется больше одного раза (или может повториться больше одного раза) — надо делать блоком.
В вашем случаи абстрактный код может выглядеть так.

<form class="form">
    <input class="input form__input">
    <input type="submit" class="button form__submit">
<form>
banzalik
+2
Хорошо, БЭМ и Ангуляр не летят. Что летит то?
banzalik
+1
А что по-вашему летит? Желательно, что бы оно уверенно летело уже лет так 5.
banzalik
+1
Это просто блок-раскладка c именем 'b-layout'. Как grid в Bootstrap.
banzalik
+1
С переходом на BEM и отказ от каскадов привел к тому, что в какой-то момент reset.css стал самой медленной частью CSS файла. Более того одно из требований к блоку — самодостаточность и reset.css не вписывался в концепцию.
Последний раз, когда я интересовался вопросом — самой медленной частью CSS бал браузерный CSS, который подключается автоматически к любой странице самим браузером.
banzalik
0
Посмотрите мою презентацию www.slideshare.net/banzalik/kiev-titula-23944534, я там старался обьяснить как решается ваша проблема.
banzalik
+3
<div class="date-form">
    <div class="date-form__item date-form__item_type_day">
        <label class="date-form__label">Day</label>
        <input class="date-form__input" type="text" name="day"/>
    </div>
    <div class="date-form__item date-form__item_type_month">
        <label class="date-form__label">Month</label>
        <input class="date-form__input" type="text" name="month"/>
    </div>
    <div class="date-form__item date-form__item_type_year">
        <label class="date-form__label">Year</label>
        <input class="date-form__input" type="text" name="year"/>
    </div>
</div>
banzalik
0
Не согласен. Есть модификаторы, которе допускают использование каскадов.
banzalik
+1
xobotyi, у вас очень смелое предположение «мой код никто никогда не будет модифицировать, я не рассчитываю на то, что внутри этого тега появится что-то еще или у этого тега появится обертка, а если что-то и появится я быстренько все перепишу».

Именно от этого я и хочу избавиться, и в этом мне помогает БЭМ.

Реальные бизнес задачи сильно сложнее — css код написаный один раз нельзя менять в дальнейшем, если он уже растекся по всему проекту, скорей всего вы будете навешивать еще классов на участки, где требуется модификация и каскадом пытаться разруливать другие каскады, написанные раннее.

Через 2 года активной разработки проекта, встанет вопрос о том, что этот CSS стало сложно поддерживать, изменения в одном месте — взрывают UI в 5 других местах, станет вопрос, что все надо переписать — многие через это проходили.
banzalik
+2
- var styles = require('Component.css')

div(class=styles.container)
    div(class=styles.button) йа кнопко

а теперь давайте прикрутим к этому jquery?
banzalik
+1
работает
<li class="main-menu-item"><a class="active"></a></li>

не работает
<li class="main-menu-item"><span class="active"></span></li>

<li class="main-menu-item"><span><a class="active"></a></span></li>
banzalik
+2
Подход интересный. Но область его применения очень узкая, как мне кажется.

Например, давайте попробуем этот подход использовать в шаблоне для Wordpress или Magento или Битрикс. И за одно обсудим какие изменения надо будет сделать в процессе разработки, что бы интегрировать такой вариант «верстки».
В каком виде верстальщикм-фрилансерам отдавать верстку вам, что бы вы ее использовали уже для прикручивая к SPA?

Ну и что бы два раза не вставать пример вашего подхода на реальном проекте:
<div class="Snippet__root___2B-wp" data-reactid=".0.7">
    <div class="Snippet__output___sVK0p" data-reactid=".0.7.0">
        <div class="Snippet__fileName___Tz7_C" data-reactid=".0.7.0.0">Output</div>
        <div class="Snippet__outputContent___2_vnF" data-reactid=".0.7.0.1">
            <div class="ScopedSelectors__root___16yOh" data-reactid=".0.7.0.1.0"><p
                    class="ScopedSelectors__text___1hOhe" data-reactid=".0.7.0.1.0.0">Scoped Selectors</p></div>
        </div>
    </div>
    <div class="Snippet__file___12x_l" data-reactid=".0.7.1:$ScopedSelectors=1js">
        <div class="Snippet__fileName___Tz7_C" data-reactid=".0.7.1:$ScopedSelectors=1js.0">ScopedSelectors.js</div><pre
            class="Snippet__pre___3b3O_" data-reactid=".0.7.1:$ScopedSelectors=1js.1">
</pre>
    </div>
    <div class="Snippet__file___12x_l" data-reactid=".0.7.1:$ScopedSelectors=1css">
        <div class="Snippet__fileName___Tz7_C" data-reactid=".0.7.1:$ScopedSelectors=1css.0">ScopedSelectors.css</div><pre
            class="Snippet__pre___3b3O_" data-reactid=".0.7.1:$ScopedSelectors=1css.1">
</pre>
    </div>
</div>
banzalik
+2
Какие не костыли есть сейчас для решения проблем, которые пытается решить БЭМ?
Я так понимаю всякие методологии именования вроде SMACSS, BEM, OOCSS, Atomic CSS и прочего не подходят силу того, что заставляют нас писать с оговорками и вносят разные понятия типа, блоки, глобальные модификаторы, базовые стили, лаяут стили имеют свой гайды и прочее прочее…
banzalik
+1
А я не понимаю, как препроцессоры могут в этом помочь — они помогают писать CSS код, а модульность — это из разряда архитектуры проекта.
banzalik
+2
CSS это прежде всего семантика

CSS — это прежде всего визуальная составляющая
banzalik
+1
SCSS/Less — про несовершенство CSS.
banzalik
–5
Так используйте БЭМ и префиксы b-
banzalik
0
И именно из-за своего несовершенства CSS развивается по сей день.
Когда проэктировался CSS не предполагалось такие сложные UI. БЭМ — это попытка жить упорядоченно в мире сложных UI интерфейсов.
CSS до сих пор никак не решает проблему сложных UI, это проблему пытаются решить с помощью web components и попытку сложно назвать очень удачной.
banzalik
0
Замечу, что классы .name и .site я могу использовать в других блоках, но описывать их тоже внутри родителя.

Как вы собираетесь гарантировать, то что классы .name и .site не окажутся внутри других классов .name и .site?
Как будете решать какое из CSS правил для .name и .site сейчас должно примениться, а какое нет?
banzalik
–2
Почти все современные подходы в верстке — модульность.
БЭМ — тоже про модульность.
У вас претензия только к названиям классов или есть что-то по существу?
Приведите примеры хорошей верстки с подходами в корне отличающимися от тех, что использует БЭМ.
banzalik
+2
Что именно вы считаете костылями?
banzalik
+5
  • каскад — это изменение веса селектора.
  • изменение веса селектора — боль.
  • чем чаще вы меняете вес селектора, тем сложнее его модифицировать или переиспользовать дальше, в другой части кода вашего проекта.
  • вложение одних структур в другие с использованием каскада, и при использовании «абстрактных» именований вида '.item, .title, .link' — отдельный вид боли

Все, что для вас предлагает БЭМ — вынести каскад в имя класса, и не повышать вес селектора в тех ситуациях, когда в этом совершенно нет необходимости.

Проектирование UI, завязанного на вес селектора, я считаю плохой практикой и со мной в этом согласно достаточно много народу.
banzalik
+1
File -> Export -> Paths To Illustrator

дорогой получается инструмент :)
banzalik
+5
Благодаря отличному инструменту IcoMoon, можно с легкостью конвертировать всё это в WebFont кит, и с удобством использовать в верстке.

— Что делать когда вектор полноцветный?
— Предложите инструменты для экспорта «вектора» из PSD в SVG.
— Вы пишете про семантику, а потом предлагаете рисовать «графику» с помощью CSS3 и HTML разметки или шрифтов :)

Но всё же, учитывая результаты исследований за 2013 год, 91% населения планеты имеет мобильный телефон, и половина из них используют его как ОСНОВНОЕ средство для серфинга интернета!

www.liveinternet.ru/stat/ru/browsers.html?period=month
gs.statcounter.com/#all-browser-ww-monthly-201306-201406
banzalik
0
Должен их рядом сгруппировать по тому, порядку в котором они встретились в коде
banzalik
+3
Когда ждать поддержки stylus?
banzalik
0
Есть новости?
banzalik
+1
Мы тут говорим про красоту кода, семантику, бест практис и незакрытые теги в HTML? :)
banzalik
+28
Почему все так боятся трогать HTML? Если пришла задача поменять внешний вид сайта, а возможно и вообще структуру — зачем все пытаются выебнуться CSS ом, когда часто проще это сделать в HTML? Кто вам сказал, что редактировать HTML — плохо?
banzalik
+2
Вот Wordpress отличный пример того, что просто CSS классами не всегда и обойдешься, очень часто приходится трогать шаблоны, если задачу чуть сложнее, чем изменить цветовую схему. И да ваши наследованная в Wordpress поломаются после того, как вы в визимиге перетащите блоки в другие места.
banzalik
+1
У них есть логирование действий пользователя, приведших к возникновению ошибки.
banzalik
+3
очень лаконично у вас получилось ;)
banzalik
+1
Специально для вас пример:
<ul class="menu">
 <li class="menu__item"><a href="#" class="menu__link">test</a></li>
 <li class="menu__item menu__item_atcive"><span class="menu__link">test</span></li>
 <li class="menu__item"><a href="#" class="menu__link">test</a></li>
 <li class="menu__item"><a href="#" class="menu__link">test</a></li>
</ul>
banzalik
0
даже после активного ею пользования
banzalik
+3
Время reflow gmail = 60ms, время reflow яндекс почты = 20 ms, время reflow этого топика = 100ms
banzalik
+1
БЭМ — позволяет писать общие правила так-же легко, как и честные — за это его и любим. И даже у идиального дизайнера есть несколько цветов для ссылок, например главное меню и ссылки в тексте.
banzalik
0
HTML — это код для машин — браузеров, с каких пор его читаемость для человека стала приоритетной? Т.е то, что вы не можете прочитать код исполняемого файла — вас не сильно смущает, а то, что код — скомпилированного HTML вдруг вас так расстроил :)
Посмотрите на HTML код Gmail, например ;) Сомневаюсь, что вас до сегодняшнего дня беспокоила читаемость их классов.
banzalik
+1
Нам не интересен css, который ломается при малешем изменении DOM дерева, это не имеет ничего общего с концепцией абсолютно независимых блоков — такой css очень дорого поддерживать, потому, что при каждом чихе в HTML все будет разваливаться и прийдется править CSS.
пример:
<nav class="menu">
 <a href="#" class="menu__link">test</a>
 <a href="#" class="menu__link">test</a>
 <a href="#" class="menu__link">test</a>
 <a href="#" class="menu__link">test</a>
</nav>

.menu > .menu__link {
   color: red;
}

потом мы решили переделать на ul-li
<ul class="menu">
 <li class="menu__item"><a href="#" class="menu__link">test</a></li>
 <li class="menu__item"><a href="#" class="menu__link">test</a></li>
 <li class="menu__item"><a href="#" class="menu__link">test</a></li>
 <li class="menu__item"><a href="#" class="menu__link">test</a></li>
</ul>

вот тут старый css уже поломался
1) Ощутимо медленный по сравнению с прочими тормозами отрисовки страницы? Может, есть ссылки на статьи по теме?

developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS?redirectlocale=en-US&redirectslug=CSS%2FWriting_Efficient_CSS
banzalik
+2
Тут есть некоторое уточнение, пересчет css / перерисовка страницы может происходить более одого раза, причем может происходить сотни раз, особенно это заметно на Single Page Applications.
И когда у вас перерироска на 100 мисек медленней, чем могла бы быть — это выльется в заметные глазу тормоза UI, причем виной этих тормозов будет — не оптимально написаный css.