Блок, Элемент, Модификатор (БЭМ)

• префикс l- зло, вместо него испольузется элемент layout внутри блока
• префикс h- не нужен
• префиксы вообще не нужны (алилуя!)
• добавились модификаторы у элементов
• global reset зло, он не будет использоваться в библиотеке блоков
• каскад в CSS тоже зло, будет использован по минимуму
• оптимизируем скорость разработки и скорость работы кода в продакшене
• стили для MSIE7- хочется писать в том же файле, что и основные, например, через @media ie6 {…}

Насколько я понял система сейчас такая: грузится страница и после загрузки (DOMReady), если у юзер-агента включен JS, скрипт в body пишет id="js" (до этого "nojs"), ну и тогда к странице применяются стили и фишки, которые видят почти все. Вопрос: почему нельзя использовать для этих же целей тег <noscript> и подключать внутри него стили без js. Да, понимаю что кармически грузить два файла со стилями - это ай-яй-яй, но всё-таки, мне кажется, это лучше, чем неисчезающие label'ы над инпутами (реализация аттрибута placeholder из HTML5), на каком-нибудь Яндекс.Мэпсе, которые не исчезают, потому что страница долго грузится или просто канал медленный, и это из мелочей, что я на вскидку вспомню. Есть ли минусы, кроме вышеуказанного, у этого подхода, или этот минус решающий в этом вопросе?

Замечаю довольно часто, что не все верстальщики любят делать иконку частью ссылки и выравнивать ее относительно текста, однако пользователю приятно наводить курсор на иконку и видеть активность ссылки.

У меня в одном проекте было очень много иконок разных размеров, как самих иконок, так и шрифта, в результате чего я решил изобрести велосипед и сделать универсальное решение которым делюсь.

.b-icons {
    position: relative;
    
    padding-left: 0 0 0 1em; /* отступ на свое усмотрение */
    
    display: inline-block; /* костыль для Opera, в противном случае при ресайзе окна браузера в инлайновых элементах иконки поплывут */
    
    zoom: 1; /* неизбежность для ie6, по учению фреймворка вообще можно вынести в отдельный CSS */
}
.b-icons i {
    position: absolute;
    top: 50%;
    left: 0;
    
    display: block;
    overflow: hidden;
}

HTML:

<a href="#" class="b-icons b-icons_main"><i></i>главная</a>

далее индивидуальный код для иконок, хотя если у вас используются все иконки с одинаковыми свойствами ширины, высоты и фона, их можно перенести в код выше или создать отдельный класс например b-icons_16x16, кроме background-position

.b-icons_main i {
    width: 16px;
    height: 16px;
    margin-top: -8px; /* половина высоты иконки */
    
    background: url(/images/sprite.gif) 0 -20px;
}

p.s. сейчас посмотрел как реализованы иконки на главной странице Яндекса, очень похожее решение, но я предлагаю немного другой способ, как универсально выровнять иконку относительно текста, а не конкретное решение реализации иконок. В Яндексе используются спрайты с png-24, ниже немного усложненный вариант для того чтобы можно было в ie6 применить альфа фильтр.

.b-icons i s {
    display: block;
}

.b-icons_main i {
    width: 16px;
    height: 16px;
    margin-top: -8px;

    display: block;
    overflow: hidden;
}
.b-icons_main i s {

    width: 250px; /* обязательно указать полный размер картинки */
    height: 250px; /* обязательно указать полный размер картинки */
    margin: -12px 0 0 -24px; /* уже позиционирование в спрайте не через background-position, а марджином */
   
    background: url(/images/sprite.png); /* в отдельном CSS для ie6 можно прописать альфа фильтр */
}

HTML:

<a href="#" class="b-icons b-icons_main"><i><s></s></i>главная</a>

единственный косяк с которым я так и не справился — это если изменить font-size в самой ссылке, выравнивание работать не будет, нужно менять размер шрифта в дереве выше.

предлагаю это решение включить в фреймворк

Жизнь в клубе совсем затихла. Все ждут очередных статей от Виталия.

Друзья! Не кажется ли вам, что все основные принципы будущего фреймворка уже подробно описаны и рассмотрены на примерах здесь и в субботниках. Мы уже знаем зачем, мы уже знает как.

А не пора ли начать думать над идеями блоков, которые будут полезны не только в конкретном специфичном проекте, но и в других (те самые reuseble), совместно разрабатывать и тестировать их, создавать материальную основу фреймворка.

А быть может уже делиться своими наработками, как это сделал Виталий на примерах b-round, b-icon, g-png?

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

Вот просмотрел 2 раза Ваши видео о теории и о практике фреймворка своими руками, но всё равно не понял одной вещи.

Вопрос: запрашивая файл стилей, откуда cgi-скрипт (который, судя по видео, собирает кирпичики в дом) берёт названия нужных ему (точнее даже конкретной странице) кирпичиков, из которых потом выдирает содержимое и заталкавает в один файл? Какой порядок в создании большого стилевого файла?

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

Спасибо!

Приветствую всех! Я новый член вашего клуба и мне, как и всем вам, интересна тема создания универсальных компонентов, для верстки часто встречающихся елементов. Такими элементами, безусловно, являются блоки с круглыми углами.

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

• изпользование символа &bull; вместо графики, что позволяет менять радиус скругления и цвет уголков из css
• все размеры указанны в em, для кроссплатформенности и кроссбраузерности
• возможность делать блоки как с фоном так и просто с рамкой например 2px
  
• не используется ни графика, ни JS, ни expression
• используются отдельные стили для IE7 и ниже

И так, как вы уже поняли самое главное это то, что вместо картинок и спрайтов я использую символ булета большого размера.

Отличие моего метода от аналогов в том что он не только отлично работает во всех браузерах под Windows(IE6+, Opera, FF2+, Safari3+, Chrome), но и под MacOS и  Linux.

С удовольствием продемонстрирую это на примере.

Очень интересно ваше мнение, коллеги, особенно Виталия Харисова.

Здравствуйте.

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

Блоки, имена которых используются для выбора через ява-скриптовые фреймворки (jQuery и т.п.) я предваряю префиксом  js-

В скриптах получается что-то вроде $(".js-mp3").bind("click", function() { ...

Сначала я использовал для этого префикс модификатора m- но потом решил что неправильно использовать префикс, имеющий отношение к CSS в JS. Вот такая мысль.