БЭМ

[amazori]

Еще один вопрос. Полагаю многие кто использует БЭМ сталкивались с этой проблемой. К примеру, необходимо установить на сайт фотогалерею. В таких случаях берут готовые скрипты, стили в которых написаны не по стандарту БЭМ. Что делать в таких случаях? Переписывать готовые стили под БЭМ достаточно трудоемко, а если появится необходимость обновить скрипт до новой версии, часть стилей придется снова переписывать.

P. S. Кстати, существует хорошая фотогалерея написанная как раз по методу БЭМ — Фоторама.

[exessqd1]

Плохо/Неправильно

<div class="b-thumbs">

    <div class="b-elastic">

        <span class="b-elastic__holder b-elastic_thumbs-item">
            <span class="b-elastic__item">
                <img src="" class="b-thumbs__img" alt="">
                <a class="b-elastic__link b-elastic_thumbs-link">text</a>
            </span>
        </span>

    </div>

</div>

<!--.b-elastic_thumbs-link, .b-elastic_thumbs-item - это модификаторы .b-elastic (class="b-elastic b-elastic_thumbs-link b-elastic_thumbs-item")-->

Плохо/Правильно

    <div class="b-elastic b-thumbs">

        <span class="b-elastic__holder b-elastic__holder_thumbs-item">
            <span class="b-elastic__item">
                <img src="" class="b-thumbs__img" alt="">
                <a class="b-elastic__link b-elastic__link_thumbs-link">text</a>
            </span>
        </span>

    </div>

<!--.b-elastic__holder_thumbs-item - модификатор b-elastic__holder
.b-elastic__link_thumbs-link - модификатор b-elastic__link -->

Хорошо/Правильно

    <div class="b-elastic b-elastic_thumbs b-thumbs">

        <span class="b-elastic__holder">
            <span class="b-elastic__item">
                <img src="" class="b-thumbs__img" alt="">
                <a class="b-thumbs__link">text</a>
            </span>
        </span>

    </div>

Здесь убраны лишние модификаторы элементов т.к. на моей практике не разу не было чтобы .b-elastic вкладывался сам в себя, в этом случае можно смело модифицировать элементы от контекста блока.

/*Модификация от контекста*/
.b-elastic_thumbs {}
.b-elastic_thumbs .b-elastic__holder {}
.b-elastic_thumbs .b-elastic__item {}

/*Блок*/
.b-thumbs {}
.b-thumbs__img {}
.b-thumbs__link {}

Чтобы товары отображались вертикально на .b-elastic_thumbs можно уточнить значение модификатора .b-elastic_thumbs_vert, либо ещё лучше просто добавить модификатор .b-elastic_vert, вертикальный .b-elastic нам может ещё пригодиться в другом месте.

    <div class="b-elastic b-elastic_vert b-elastic_thumbs b-thumbs">

        <span class="b-elastic__holder">
            <span class="b-elastic__item">
                <img src="" class="b-thumbs__img" alt="">
                <a class="b-thumbs__link">text</a>
            </span>
        </span>

    </div>

В данном примере у нас получилось 2 модификации (b-elastic_vert b-elastic_thumbs) и 1 блок(b-thumbs с двумя элементами b-thumbs__img b-thumbs__link) мы без проблем можем их разделить и повторно использовать в другом месте.

А вот если бы мы изначально не смешивали блоки (пример), то для изменения расположения элементов, нам потребовалось бы изменить лишь пару строк в CSS. Пример.

Да так есть, но в таком случае если бы нам понадобился бы ещё один резиновый блок на сайте нам бы пришлось добавлять для него лишний html/css. Либо если бы мы использовали вместо него несколько .b-thumbs изменив лишь пару строк в CSS все блоки .b-thumbs на проекте стали бы вертикальными.

В таких случаях берут готовые скрипты, стили в которых написаны не по стандарту БЭМ. Что делать в таких случаях?

Переделывать/Добавлять как есть - других вариантов не видно, я бы добавил как есть, плагин все-таки.

[exessqd1]

Документ обновился до версии 0.6

Список изменений:

1. Добавлено краткое описание
   
2. Обновлены советы по БЭМ
   
3. Обновлены правила хорошего тона в верстке
   
4. Убрано лишнее
   

bemclub.in

Библиотека обновилась до версии 0.3

Список изменений:

.b-grid

1. Доработан демо-пример
   
2. Добавлена сокращенная нотация
   
3. Добавлено описание
   

.b-divider

1. Доработан демо-пример
   
2. Добавлена сокращенная нотация
   

.b-pin

1. .b-pin добавлен :focus
   

.b-pic

1. Поправлено описание
   

bemclub.in/_matrioshka/

Edited January 11, 2012 by exessqd1

[amazori]

На видео зритель задает примерно такой вопрос: "Не проще ли использовать для модификаторов множественные классы?" В ответе в качестве основного аргумента говорится, что IE6 криво поддерживает множественные классы. Какие еще минусы таких модификаторов? В чем преимущества стандартных модификаторов БЭМ?

Пример стандартного БЭМ:

<div class="b-divider b-divider_comment-head">
    <div class="b-divider__side b-divider__side_rt">
    </div>
</div>

.b-divider {}
.b-divider_comment-head {}
.b-divider__side {}
.b-divider__side_rt {}

Пример с использованием множественных классов:

<div class="b-divider m-comment-head">
    <div class="b-divider__side m-rt">
    </div>
</div>

.b-divider {}
.b-divider.m-comment-head {}
.b-divider__side {}
.b-divider.m-rt {}

[Gaspode]

В чем преимущества стандартных модификаторов БЭМ?

Ну они как минимум быстрее рендерятся. Это первое, что в голову пришло.

[amazori]

Ну они как минимум быстрее рендерятся. Это первое, что в голову пришло.

Ну это ощутимо будет только для крупных проектов. Полагаю, даже у интернет-магазина разница не будет заметна.

[Gaspode]

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

[s0rr0w]

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

Что-то мне слабо начинает вериться, что разница будет действительно ощутимой. Да, выборку нужно делать, но после нее еще рендерить надо.

[psywalker]

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

Что-то мне слабо начинает вериться, что разница будет действительно ощутимой. Да, выборку нужно делать, но после нее еще рендерить надо.

Я недавно общался с одним человеком, который в БЭМ-е души ни чает, но при этом он абсолютно адекватный. Он объяснил мне, что всё прекрасно понимает, но уже привык к БЭМ-у и использует его, потому что любит, чтобы всё было абсолютно независимо, а БЭМ - это гарант абсолютной независимости блоков и качества.

[s0rr0w]

а БЭМ - это гарант абсолютной независимости блоков и качества.

Первое да. Второе - нет.

[exessqd1]

В чем преимущества стандартных модификаторов БЭМ? Не проще ли использовать для модификаторов множественные классы?

Добавил в вопрос-ответ

[psywalker]

а БЭМ - это гарант абсолютной независимости блоков и качества.

Первое да. Второе - нет.

Ну почему же нет? Отчасти я всё таки тоже к этому склоняюсь. Город, который невозможно сломить никаким землетрясением, разве считается некачественно построенным?

[s0rr0w]

Ну почему же нет? Отчасти я всё таки тоже к этому склоняюсь. Город, который невозможно сломить никаким землетрясением, разве считается некачественно построенным?

Качественно по каким параметрам? Он может быть построен из бетона 20-ти метровой толщины. Как ты думаешь, это признак качества?

Качество бывает разным, качество исполнения, качество масштабируемости, качество в кроссбраузерности, качество семантики.

[psywalker]

Ну почему же нет? Отчасти я всё таки тоже к этому склоняюсь. Город, который невозможно сломить никаким землетрясением, разве считается некачественно построенным?

Качественно по каким параметрам? Он может быть построен из бетона 20-ти метровой толщины. Как ты думаешь, это признак качества?

Качество бывает разным, качество исполнения, качество масштабируемости, качество в кроссбраузерности, качество семантики.

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

[Svatov]

Обращаюсь к модераторам и к автору, может уже стоит прикрепить эту тему в Библиотеке решений? или хотя бы Ресурсы? Иногда найти не просто

Edited January 16, 2012 by Svatov

[sigma77]

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

Даже хороший кирпич нужно грамотно уложить Кирпич (независимый блок) - лишь отдельный элемент. Качество же здания зависит от качества кладки, толщины стен, цемента - т.е. как все эти элементы взаимодействуют как в целом, так и друг с другом.

[psywalker]

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

Даже хороший кирпич нужно грамотно уложить

Ну вроде как они его укладывают грамотно

[Nanto]

Я одного не могу взять в толк - чей извращённый ум придумал использовать в названиях классов ДВОЙНОЕ подчёркивание? И для чего? Для абсолютной "нечитаемости" кода?

По поводу обоснованности применения - для таких порталов как Яндекс и Гугл, с их говнокодом, попытка хоть как-то систематизировать средства разработки - единственный выход, иначе КПД будет стремиться к нулю! Для небольшого (или постоянно поддерживаемого одними и теми же программистами) проекта - это "горе от ума". Любой код изначально можно делать крайне структурированным.

P.S. Может я чего не понимаю... Дайте пример кода, где использование БЭМ сразу даёт очевидное преимущество!

[s0rr0w]

Я одного не могу взять в толк - чей извращённый ум придумал использовать в названиях классов ДВОЙНОЕ подчёркивание? И для чего? Для абсолютной "нечитаемости" кода?

Отделение одной порции данных от другой. Нормальное явление для именования переменных в условиях органичения по количеству вариантов используемых символов.

По поводу обоснованности применения - для таких порталов как Яндекс и Гугл, с их говнокодом, попытка хоть как-то систематизировать средства разработки - единственный выход, иначе КПД будет стремиться к нулю! Для небольшого (или постоянно поддерживаемого одними и теми же программистами) проекта - это "горе от ума". Любой код изначально можно делать крайне структурированным.

Основная цель, которую преследует БЭМ и подобные методики, минимизация затрат на поддержку консистентности продукта.

P.S. Может я чего не понимаю... Дайте пример кода, где использование БЭМ сразу даёт очевидное преимущество!

Нет такого кода.

[Nanto]

Двойное почёркивание - это ненормальное явление! Если вы не копипастите названия классов, а набираете их вручную - скорее всего вы долго будете разбираться - почему же не работают стилевые правила.

Все равно не понял... Чем хуже конеткстные селекторы без всяких плясок с бубном? Нужно получить доступ к отдельному блоку? Записываем "лестницу" селекторов уникальную для данного блока. Нужно получить доступ к группе однотипных блоков? Берём общий класс. Нужно получить доступ к избранной группе блоков? общий класс, скорректированный контекстом...

Кому это полезно?

Крупным сайтам

Ясная структура кода

Повышение качества кода

Легкое внесение изменений

Разделение работы между несколькими людьми

Пример Яндексовской цсс-ки:

.b-icon{position:absolute;overflow:hidden;width:16px;height:16px;margin-left:-19px}.b-icon i{position:absolute}.b-corners{position:relative;display:block;background:#fff;border:1px solid #fff}.b-corners-rt,.b-corners-rb,.b-corners-lb,.b-corners-lt{position:absolute;overflow:hidden}.b-corners-rt,.b-corners-rb{right:-1px}.b-corners-lb,.b-corners-lt{left:-1px}.b-corners-lt,.b-corners-rt{top:-1px}.b-corners-rb,.b-corners-lb{bottom:-1px}.b-corners-rt i,.b-corners-rb i,.b-corners-lb i,.b-corners-lt i{position:absolute;width:50px;height:50px;background-repeat:no-repeat}.b-corners .b-corners-rt i{top:0}.b-corners .b-corners-lb i{left:0}.b-corners .b-corners-lt i{top:0;left:0}.b-corners-body{display:block}.b-corners-gray5{background:#fff;border:1px solid #bfbfbf}.b-corners-gray5 .b-corners-body{padding:6px 12px 0 6px;color:#666}.b-corners-gray5 .b-corners-rt,.b-corners-gray5 .b-corners-rb,.b-corners-gray5 .b-corners-lb,.b-corners-gray5 .b-corners-lt{width:5px;height:5px}.b-corners-gray5 .b-corners-rt i,.b-corners-gray5 .b-corners-rb i,.b-corners-gray5 .b-corners-lb i,.b-corners-gray5 .b-corners-lt i{background:url(http://img.yandex.net/i/corners/corners-gray5.png)}.b-corners-gray5 .b-corners-rt i{left:-5px}.b-corners-gray5 .b-corners-rb i{top:-5px;left:-5px}.b-corners-gray5 .b-corners-lb i{top:-5px}.l-menu{width:100%;margin:.8em 0 1.5em 0}.l-menu-item{padding:5px 4px;text-align:center;border:1px solid #B2B2B2;border-width:1px 0}.l-menu-gap{width:2%;padding:0}.l-menu-gap i{display:block;width:20px}.l-menu a,.l-menu b{font-size:.85em;white-space:nowrap}.l-page-short{width:100%}.l-page-short-l{width:75%}.l-page-short-r{width:21%}.l-page-short-g{width:2%}.l-page-short-g i{display:block;width:20px}.l-story{width:100%;margin-top:.4em}.l-story-c .gap{font-size:0;display:block;width:400px}.l-story-r{width:20px}.l-story-l{width:120px}.l-story-r i{font-size:0;display:block;width:20px}.b-subscribe{margin-top:3em}.b-subscribe .caption{margin-bottom:.5em}.b-subscribe .calendar{display:block;margin-bottom:.8em}.b-subscribe .subscribe li{margin-bottom:5px}.b-subscribe .subscribe i{display:-moz-inline-box;display:inline-block;width:18px;height:17px;margin-right:5px;vertical-align:bottom;text-decoration:none}.b-subscribe .subscribe .news i{background:url(http://img.yandex.net/i/icon-news.png) left center no-repeat}.b-subscribe .subscribe .rss i{background:url(http://img.yandex.net/i/icon-rss.png) left center no-repeat}.b-subscribe .subscribe .smi i{background:url(http://img.yandex.net/i/i16-news_new-v8.gif) left center no-repeat}.b-subscribe .subscribe .lenta i{background:url(http://yandex.st/news/1.30/i/rss_ya.png) left center no-repeat}.b-subscribe .subscribe .bannerline i{padding-left:2px;padding-right:2px;background:transparent url(http://img.yandex.net/i/news/icon16x16-red.png) no-repeat scroll left center}.b-story-sources,.b-story-sources a{color:#ff5223}.b-story-list{font-size:100%;width:120px}.b-story-list .title{font-weight:bold;margin:.8em 0 .2em 0}.b-story-list .title .total{font-weight:400}.b-story-list .photo,.b-story-list .video{margin:.3em 0 0 0}.b-story-list .photo a,.b-story-list .video a{float:left}.b-story-list .link{font-size:88%}.b-story-list .link a{color:#000}.b-story-list .video .b-icon{margin:.5em 0 0 .7em;cursor:hand}.b-story-list .video .b-icon i{width:16px;height:16px;background:url(http://img.yandex.net/i/play.png) no-repeat}.b-story-list-concern{margin-bottom:.3em}.b-story-list-concern .rubric,.b-story-list-concern .region{font-weight:bold;display:inline;margin-right:.2em}.b-story{margin:.8em 0 0 12px}.b-story .b-story-list-concern,.b-story .text,.b-story .all-news{margin-left:8px}.b-story .caption{font-size:1.4em;margin:.4em 0 .7em 8px;color:#000}.b-story .text{margin-top:.6em}.b-story .text span{padding-right:.6em}.b-story .text .source{font-size:90%;margin-right:.5em;color:#066f2c}.b-story .text .time{font-size:90%}.b-story .all-news{display:block;margin-top:1em}.b-story .b-textcom .source{color:#066F2C;font-size:90%;margin-right:0}.b-story .b-textcom .desc{margin-left:.5em}.b-story-quote{margin-top:.6em}.b-story-quote .quote-owner{font-size:90%;position:relative;top:-1px;margin-left:20px;padding:7px 0 0 25px;background:url(http://img.yandex.net/i/tail.png) no-repeat}.b-story-quote .quote-link{margin-left:.9em}.b-story-quote .h-corners{overflow:hidden}.b-story-quote .b-corners-body{padding:6px 7px 7px;color:#000}.b-story-add{position:relative;float:right;width:200px;margin-top:-10px;margin-bottom:.4em}.b-story-add .b-story-map,.b-story-add .b-story-more{margin-left:15px}.b-story-map{font-size:90%;margin-top:5px;padding:8px 10px;background:#eedcb6}.b-story-map .map{position:relative;width:160px;height:120px;margin-bottom:.3em}.b-story-map .info .adress a{color:#3d4c87}.b-story-map .info .source a{color:#066f2c}.b-story-map .info .adress,.b-story-map .info .source{margin-right:.3em}.b-story-map-info{font-size:90%;position:absolute;left:55px;bottom:70px}.b-story-map-info .addr{overflow:hidden;max-width:100px;background:#FFC;color:#000;border:1px solid #000}.b-story-map-info .addr p{min-width:40px;padding:0 .4em .1em .4em}.b-story-map .tail{position:absolute;z-index:98;left:80px;bottom:60px;width:15px;height:11px;background:url(http://img.yandex.net/maps/i/i-legend_point.gif) no-repeat}.b-story-more{padding:10px 10px 12px 10px;background:#fbf7ee;width:170px}.b-story-more .title{font-weight:bold;margin-bottom:-0.2em}.b-story-more .object margin-top:1em}.b-story-more ul{margin-bottom:2em}.b-story-more .link{margin:.6em 0 .1em}.b-story-more .date,.b-story-more .time{font-size:90%;display:inline}.b-story-more .date{margin-right:.6em}.b-story-more .opinions{margin-left:19px;margin-top:1em}.b-story-more .objects{padding-top:5px;border-color:#DCD2BA;border-top:1px solid #DCD2BA;margin-top:1.5em}.b-story-more .objects .b-dropdown li{padding-bottom:10px}.b-story-more .objects .b-dropdown li,.b-story-more .objects .b-dropdown li .b-pseudo-link{white-space:normal}.b-story-more .opinions .b-icon i{width:16px;height:16px;background:url(http://img.yandex.net/i/blogi.gif) no-repeat}.b-news-story{margin-top:1.5em}.b-news-story-rubric{margin-bottom:2.5em;margin-top:0}.b-news-story .caption{margin:.2em 0 .5em;font-weight:bold;font-size:1em}.b-news-story .caption a{font-weight:bold;vertical-align:bottom;color:#000}.b-news-story .b-news-item .head,.b-news-story .b-news-item .link{display:inline}.b-news-story .b-news-item{margin:.5em .8em .25em 0}.b-news-story .story{margin-top:1.25em}.b-news-story .story .story{font-size:.85em;margin-bottom:.75em;margin-top:0}.b-story-title-list .in-story{display:block;overflow:hidden;margin-bottom:.6em;padding:8px;background:#c3deb1}.b-story-title-list{margin-top:1em}.b-story-title-list dd{padding:0 8px 0 8px}.b-story-title-list dd{margin-top:.6em}.b-story-title-list .link{padding:0;margin-right:.5em}.b-story-title-list .current .link{background-color:#FFF68D}.b-story-title-list .source{font-size:90%;margin-right:.4em;color:#066f2c}.b-story-title-list .time{font-size:90%}.b-story-title-list .storytitle .link{font-style:italic}.b-story-title-list .mostcited .link{font-weight:bold}a .dups_ct{font-size:smaller}.b-story-title-list-articles{margin-left:-8px;padding:.8em 0 0 0}.b-story-title-list-articles dt{padding-left:8px}.b-story-title-list-articles .interview{margin-top:1.2em}.h-story-title-list{overflow:hidden;padding-left:8px}.b-news-paint{float:left;width:100%;margin-bottom:1.8em}.b-news-paint .title{font-size:110%;color:#f30}.b-news-paint .title a{color:#f30}.b-news-paint .link{float:left;margin-top:.6em;line-height:1.44em;text-decoration:none}.b-news-paint .link:hover span{text-decoration:underline;color:#002455}.b-news-paint .link .dot{display:-moz-inline-box;display:inline-block;width:5px;height:5px;margin:0 .5em 0 .5em;vertical-align:middle;background:url(/i/red-dot.png) no-repeat}.b-story-informers{margin:.6em 0 0 .5em}.b-story-informers li{float:left;margin:.2em .2em 0 .2em;padding:.5em .8em}.b-story-informers a{outline:none}.b-story-informers i{margin-left:.4em;color:#565656}.b-story-title-list .informers{padding:.5em 8px}.b-story-title-list .informers span{margin-right:1em;white-space:nowrap}.l-page-short-r .h-page-short-r{padding-left:5px}.ad{margin-top:2em;position:relative}.ad .ad-link{margin-bottom:.2em;margin-top:.5em}.ad .ad-link,.ad div,.ad .url{padding-left:5px}.ad .ad-link a{font-weight:bold}.ad .url{color:#060;margin-bottom:1em}.ad .url a{background:transparent url(http://img.yandex.net/i/ico-phone.gif) no-repeat scroll 0 0;color:#060;padding-left:16px;text-decoration:underline}.ad .direct{padding:2px 5px;background-color:#FEEAC7;z-index:5}.somebanner .y5_f{border-style:solid!important;border-color:#ccc!important;border-width:1px!important}.b-widget{margin-top:1.25em}.b-widget dt{margin-bottom:5px}.b-widget i{display:-moz-inline-box;display:block;float:left;width:18px;height:17px;margin-right:5px;vertical-align:bottom;text-decoration:none}.b-widget .widget i{background:url(http://img.yandex.net/i/i16-news_new-v8.gif) left center no-repeat}.b-trough-medals{font-size:13px;margin:0;padding:0;margin-bottom:1em}.b-trough-medals__line{margin-bottom:.75em}.b-trough-medals__favicon{width:16px;height:16px;margin-right:5px;background:url(//img.yandex.net/i/olymp2010/favicon.png) no-repeat;vertical-align:middle}.b-trough-medals__title,.b-trough-medals__title:link{color:#000;vertical-align:middle}.b-trough-medals__sports{white-space:nowrap}.b-trough-medals__sports__link,.b-trough-medals__sports__link:link{margin-right:.5em;vertical-align:middle;color:#1a3dc1}.b-trough-medals__country{margin-right:1em;vertical-align:middle}.b-trough-medals__num_gold{margin-right:1em;vertical-align:middle;color:#f29401}.b-trough-medals__num_silver{margin-right:1em;vertical-align:middle;color:#3b6b75}.b-trough-medals__num_bronze{margin-right:1em;vertical-align:middle;color:#851f00}.b-trough-medals__i{position:relative;width:17px;height:17px;margin-top:-2px;vertical-align:middle;background:url(//img.yandex.net/i/olymp2010/medals.png) no-repeat}.b-trough-medals__i_silver{background-position:-17px 0}.b-trough-medals__i_bronze{background-position:-34px 0}.b-trough-medals__winners__line,.b-trough-medals__score__line{margin-bottom:.5em;padding-left:22px;color:#666}.b-trough-medals__score__line .b-trough-medals__country{margin-right:0}.b-trough-medals__score__line strong{margin:0 .25em 0 .5em;color:#000}.b-trough-medals__winners__line .b-trough-medals__i{position:absolute;margin-left:-22px}.b-trough-medals__winners__link{margin-right:.3em;color:#34476f}.b-trough-medals__category{margin-bottom:.5em;margin-top:.75em}.b-trough-medals__category__link,.b-trough-medals__category__link:link{color:#4b6185;margin-left:22px}.b-trough-medals_hor .b-trough-medals__title,.b-trough-medals_hor .b-trough-medals__sports,.b-trough-medals_hor .b-trough-medals__num{display:inline;margin-right:.3em;vertical-align:middle}.b-trough-medals .single{margin-left:22px}.b-trough-medals_hor .b-trough-medals__winners__line{float:left;margin-right:1.5em}.b-trough-medals_hor .b-trough-medals__winners__line__i{width:200px}.b-trough-medals_hor .b-trough-medals__winners{margin-top:1em}.b-trough-medals_hor .b-trough-medals__winners__name{display:block;margin-top:.1em}.b-trough-medals__clear{clear:both}.ext-links{margin-left:-8px;background:#f2f2f2 none repeat scroll 0 0;padding:8px;margin-top:1.2em}.ext-links dd,.ext-links dt{padding:0 8px}.ext-links dd{margin-top:.75em}.ext-links .source{color:#066F2C;font-size:90%;margin-right:.4em}.ext-links dd .link{margin-right:.5em}.w-sport{width:170px;padding:10px 10px 0;margin-left:15px;margin-bottom:10px;background:#eee}.w-sport__head{margin-bottom:5px;text-align:center}.w-sport__body-team,.w-sport__body-event,.w-sport__body-score{margin-bottom:1px;padding:2px 5px;background:#fff}.w-sport__body-team{text-align:center}.w-sport__body{padding-bottom:15px}.w-sport__body-team-link{color:#000}.w-sport__addon{padding-bottom:8px}.w-sport__addon-stat-link,.w-sport__addon-stat-link:link{color:#30762B}.w-sport__card{display:-moz-inline-box;display:inline-block;width:15px;height:8px}.w-sport__card-red{background:#F61A17}.w-sport__card-yellow{background:#FED52B}.w-sport__match{width:100%}.w-sport__match-left,.w-sport__match-center,.w-sport__match-right{text-align:center;vertical-align:middle}.w-sport__time{display:block}.w-sport__score{font-size:300%}.w-sport__match-text{font-size:85%}.w-sport__subtitle{text-align:center;font-size:.85em;margin-bottom:.5em}.w-sport__addon-item,.w-sport__addon .b-dropdown__visible{padding:5px 9px 0 0}.w-sport__addon .b-dropdown__popup .b-dropdown__visible{padding:1px 9px 4px 7px}.w-sport__addon-stat-source{color:#066F2C;margin-right:.4em}.w-sport__video{font-size:90%;color:%666666}.w-sport__match-hint{font-size:85%}.b-match__tabs{border-bottom:1px solid #aaa}.b-match__tabs{margin-bottom:1em;overflow:hidden}.b-match__tabs-item{display:-moz-inline-box;display:inline-block;padding:5px}.b-match__tabs-item-active{background:#D7D7D7}.b-match__tabs-update{color:#666}.b-match__tabs-item-active .b-pseudo-link,#js .b-match__tabs-item-active .b-pseudo-link:hover{font-weight:bold;color:#000!important;border:0!important;cursor:text}.b-match__lenta{overflow:hidden}.b-match__time{width:20px;padding:2px 5px;text-align:right;vertical-align:top}.b-match__event{width:30px;vertical-align:top;text-align:center}.b-match__text{padding-bottom:5px}.b-match__translation{margin-top:.5em;overflow:hidden}.b-match__translation-head{margin-left:8px;margin-bottom:1em}.b-match__translation-head-link{color:#000}.b-match__translation-link,.b-match__translation-link:link{color:#007406}.b-match__translation-items{margin-bottom:.75em;margin-left:9px}.b-match__translation-source{color:#066F2C;margin-right:.4em}.b-match__translation-time{font-size:90%}.b-reverse-clock__delim_hidden{visibility:hidden}.b-reverse-clock b,.b-clock b{font-size:140%}a{color:#002455}a:hover{color:#ff5223}.b-story .text i{font-style:italic}

Большего говнокода трудно себе представить!

[Gaspode]

Двойное почёркивание - это ненормальное явление! Если вы не копипастите названия классов, а набираете их вручную - скорее всего вы долго будете разбираться - почему же не работают стилевые правила.

Вероятно, стоит иметь представление, о чём ведёте речь, прежде чем... вести речь. Посмотрите какую-нибудь яндексовую презентацию по БЭМу, в частности ту часть, где речь идёт о сборке проектов из готовых блоков. Вероятно, вопрос отпадёт.

Большего говнокода трудно себе представить!

Вы таки наивно полагаете, что сидел человек и руками её писал целиком, похоже. А другой, чтоб внести изменения, втыкает в этот файл и ищет нужное место.

Edited January 18, 2012 by Gaspode

[s0rr0w]

Двойное почёркивание - это ненормальное явление! Если вы не копипастите названия классов, а набираете их вручную - скорее всего вы долго будете разбираться - почему же не работают стилевые правила.

Если вы не крот, то сумеете легко отличить чисто визуально one_block__with_cool_property от one_block_with_cool_property. Лично я разницу прекрасно вижу, особенно в редакторе с использованием моноширинных шрифтов.

Все равно не понял... Чем хуже конеткстные селекторы без всяких плясок с бубном? Нужно получить доступ к отдельному блоку? Записываем "лестницу" селекторов уникальную для данного блока. Нужно получить доступ к группе однотипных блоков? Берём общий класс. Нужно получить доступ к избранной группе блоков? общий класс, скорректированный контекстом...

Это работает медленнее, раз. Любая перестройка структуры HTML потребует перестройки css, а это время.

Пример:

ul > li > b { color: red }
<ul>
 <li>One <b>link</b></li>
</ul>

При изменении структуры HTML

<ul>
 <li><div>One <b>link</b></div></li>
</ul>

все перестанет работать так, как ожидается

[rash]

Пример Яндексовской цсс-ки:

Большего говнокода трудно себе представить!

А в чем говнокод? В том, что ее минимизировали?

CSS как CSS для продакшена.

[Nanto]

Двойное почёркивание - это ненормальное явление! Если вы не копипастите названия классов, а набираете их вручную - скорее всего вы долго будете разбираться - почему же не работают стилевые правила.

Вероятно, стоит иметь представление, о чём ведёте речь, прежде чем... вести речь. Посмотрите какую-нибудь яндексовую презентацию по БЭМу, в частности ту часть, где речь идёт о сборке проектов из готовых блоков. Вероятно, вопрос отпадёт.

Большего говнокода трудно себе представить!

Вы таки наивно полагаете, что сидел человек и руками её писал целиком, похоже. А другой, чтоб внести изменения, втыкает в этот файл и ищет нужное место.

А что, Яндекс блоки собирает на CSS? Тогда действительно им надо что-то менять и оптимизировать!

Это ведь так сложно:

<?php
  echo $this->block('blocks/head/');
  echo $this->block('blocks/block1/');
  echo $this->block('blocks/block2/');
...
?>

А, ну тогда вообще начхать как там стилевые свойства прописаны - Firebug включил и отслеживай... Я к тому, что там очень все нерационально прописано.

Пример Яндексовской цсс-ки:

Большего говнокода трудно себе представить!

А в чем говнокод? В том, что ее минимизировали?

CSS как CSS для продакшена.

Нет, это я к вот этому, например:

.w-sport__addon{padding-bottom:8px}
.w-sport__addon .b-dropdown__visible{padding:5px 9px 0 0}
.w-sport__addon .b-dropdown__popup .b-dropdown__visible{padding:1px 9px 4px 7px}

Действительно, очень рационально! Контекстом переопределять одно и то же стилевое свойство.

И при этом в документации на сию "систему ООП" писать про контекстное наследование - "ФИ!"... Как там? "Если поместим блок в другое место кода, стили все равно будут работать!"?

А, у них ещё и на специфичности завязано... Это вообще атас!

Ещё вопрос - а в БЭМ используется приоритет свойства определённого ниже по коду?

Если да - всё! Я умываю руки...

Если нет - тогда у них обфускатор/минимизатор шутки шутит?

Edited January 18, 2012 by Nanto

[rash]

Пример Яндексовской цсс-ки:

Большего говнокода трудно себе представить!

А в чем говнокод? В том, что ее минимизировали?

CSS как CSS для продакшена.

Нет, это я к вот этому, например:

.w-sport__addon{padding-bottom:8px}
.w-sport__addon .b-dropdown__visible{padding:5px 9px 0 0}
.w-sport__addon .b-dropdown__popup .b-dropdown__visible{padding:1px 9px 4px 7px}

Действительно, очень рационально! Контекстом переопределять одно и то же стилевое свойство.

И при этом в документации на сию "систему ООП" писать про контекстное наследование - "ФИ!"... Как там? "Если поместим блок в другое место кода, стили все равно будут работать!"?

Эээ, а ничего, что если перенести блок b-dropdown в другое место, он продолжит работать, и если перенести w-spot в другое место, он тоже будет работать? Тем более, что скорее всего именно этот случай относится к конкретной странице, и не влияет на эти же блоки на других страницах, то есть это не в глобальном определении блока, а в более локальном переопределении написано. Ничего ужасного не вижу. Описан общий случай, и уточнен в конкретной ситуации. Вполне ОК.

Тем более, что контекстные селекторы плохи в общем случае, но они могут быть полезны в некоторых ситуациях. К примеру, "html body div ul li a {…}" — плохо, но ".b-list_highlighted_yes .b-list__item {…}" — нормально.

А, у них ещё и на специфичности завязано... Это вообще атас!

Гм, опять же, на специфичности завязан тот минимум, который необходим не во вред. Ну и я не уверен, что отчетливо понимаю, что там под капотом, и почему на выходе получается тот или иной код. К тому же не каждый сервис обязан использовать последние наработки, может где-то устаревший код, где-то устаревший инструментарий и т. п.

Как идеологический подход — штука хорошая. На практике не всегда удается использовать все в полной мере, я уверен. Так почти всегда и везде бывает, «добро пожаловать в наш дерьмовый мир обратно» © Масяня.