БЭМ

amazori · January 8, 2012

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

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

exessqd1 · January 8, 2012

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

<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 · January 11, 2012

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

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

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

bemclub.in

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

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

.b-grid

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

.b-divider

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

.b-pin

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

.b-pic

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

bemclub.in/_matrioshka/

Edited January 11, 2012 by exessqd1

amazori · January 15, 2012

На видео зритель задает примерно такой вопрос: "Не проще ли использовать для модификаторов множественные классы?" В ответе в качестве основного аргумента говорится, что 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 · January 15, 2012

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

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

amazori · January 15, 2012

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

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

Gaspode · January 15, 2012

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

s0rr0w · January 15, 2012

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

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

psywalker · January 15, 2012

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

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

s0rr0w · January 15, 2012

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

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

exessqd1 · January 16, 2012

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

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

psywalker · January 16, 2012

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

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

s0rr0w · January 16, 2012

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

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

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

psywalker · January 16, 2012

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

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

Svatov · January 16, 2012

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

Edited January 16, 2012 by Svatov

sigma77 · January 16, 2012

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

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

psywalker · January 16, 2012

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

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

Nanto · January 18, 2012

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

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

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

s0rr0w · January 18, 2012

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

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

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

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

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

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

Nanto · January 18, 2012

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

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

Кому это полезно?
Крупным сайтам
Ясная структура кода
Повышение качества кода
Легкое внесение изменений
Разделение работы между несколькими людьми

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

.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 · January 18, 2012

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

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

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

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

Edited January 18, 2012 by Gaspode

s0rr0w · January 18, 2012

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

Если вы не крот, то сумеете легко отличить чисто визуально 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 · January 18, 2012

Пример Яндексовской цсс-ки:
Большего говнокода трудно себе представить!

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

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

Nanto · January 18, 2012

Двойное почёркивание - это ненормальное явление! Если вы не копипастите названия классов, а набираете их вручную - скорее всего вы долго будете разбираться - почему же не работают стилевые правила.
Вероятно, стоит иметь представление, о чём ведёте речь, прежде чем... вести речь. Посмотрите какую-нибудь яндексовую презентацию по БЭМу, в частности ту часть, где речь идёт о сборке проектов из готовых блоков. Вероятно, вопрос отпадёт.
Большего говнокода трудно себе представить!
Вы таки наивно полагаете, что сидел человек и руками её писал целиком, похоже. А другой, чтоб внести изменения, втыкает в этот файл и ищет нужное место.

А что, Яндекс блоки собирает на 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}

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

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

:rofl:

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

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

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

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

Edited January 18, 2012 by Nanto

rash · January 18, 2012

Пример Яндексовской цсс-ки:
Большего говнокода трудно себе представить!
А в чем говнокод? В том, что ее минимизировали?
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 {…}" — нормально.

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

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

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

Sign In

БЭМ

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Nanto

Nanto

Nanto

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information