БЭМ

rash · October 20, 2011

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

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

s0rr0w · October 20, 2011

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

Да я то и не спорил, скорее уточнял, дополнял и расшифровывал

psywalker · October 20, 2011

БЭМ-у не соответствует, но я бы делал так на небольших проектах и не парился С одной стороны привязка к структуре (селектор ребенка «>») не очень хорошо, но не сильно просадит производительность, очистит разметку от громоздких классов, и если поддерживать будет один и тот же человек — не сильно затруднит поддержку. Так что ОК, на мой субъективный взгляд.

Спасибо за ответ, но есть ряд вопросов:

1) БЭМ-у в полном объёме не соответствует, согласен. Но ведь тут есть же какие-та его частички, например "независимость блоков"? Или ты о другом? Расскажи поподробнее пожалуйста.

2) Почему, если такой код будет поддерживать несколько человек, то это будет трудно? Чем? Если можно, поясни с примерчиками. :rolleyes:

rash · October 20, 2011

Спасибо за ответ, но есть ряд вопросов:
1) БЭМ-у в полном объёме не соответствует, согласен. Но ведь тут есть же какие-та его частички, например "независимость блоков"? Или ты о другом? Расскажи поподробнее пожалуйста.

Независимост тут реализуется, я имел в виду именно не соответствует в полном объеме. Все верно.

2) Почему, если такой код будет поддерживать несколько человек, то это будет трудно? Чем? Если можно, поясни с примерчиками.

Ну это может тоже субъективно, но найти соответствие селектора элементу при такой записи немного сложнее, чем при однозначном использовании имени класса. Просто сам CSS-файл будет немного хуже читаться.

psywalker · October 20, 2011

rash,

Независимост тут реализуется, я имел в виду именно не соответствует в полном объеме. Все верно.

Ага, понял. Согласен.

Ну это может тоже субъективно, но найти соответствие селектора элементу при такой записи немного сложнее, чем при однозначном использовании имени класса. Просто сам CSS-файл будет немного хуже читаться.

Да, не спорю, но я привёл пример тех элементов, которые неотделимы друг от друга, например UL без LI не бывает. И очень часто, что не бывает и LI без A. Но если, например у UL будет родитель, то вот такое правило не будет участвовать в процессе вообще. Только если мы явно (не желательно) хотим как-то поплясать от контекста.

<div class="case">
        <ul class="nav">
                <li> <a href="#">1</a>
                        <ul class="nav__dropdown">
                                <li>
                                        <a href="#">Выпадающий пункт</a>
                                </li>
                        </ul>                   
                </li>
                <li> <a href="#">2</a>
                        <ul class="nav__dropdown">
                                <li>
                                        <a href="#">Выпадающий пункт</a>
                                </li>
                        </ul>                   
                </li>
        </ul>
</div>

.case > .nav {}

Вот такого допускать вообще нельзя, в редких случая только. И такого тоже

.case  .nav {}

В таких случаях конечно селекторы будут плясать от своих классов. Т.е. от того же .nav {}

ceil100 · October 20, 2011

я вовсе не против говорящих названий, совсем наоборот.

я против того чтобы вешать классы на каждый тег

Просто не надо доводить до абсурда, такие вещи

psywalker · October 20, 2011

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

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

Great Rash · October 20, 2011

я против того чтобы вешать классы на каждый тег

Тегов нет в природе. Есть элементы, блоки, виджеты, меню, колонки. А тегов нет.

s0rr0w · October 20, 2011

Я там ответ на первой странице написал, но среди полотенец кода он потерялся.

sigma77 · October 20, 2011

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

А я за то, чтобы вешать класс на каждый тег, к которому идет обращение.

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

psywalker · October 20, 2011

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

Оксан, поддерживаю, золотые слова :boast: Только я, например, не совсем за каждый тег. Вот таких ситуаций в простых проектах предлагаю избегать

				<ul class="b-news-list">
					<li class="b-news-list__item">
						<p class="b-news-list__text"><i class="dash">—</i><a href="#" class="b-news-list__link">Новости и пресс-релизы</a></p>

					</li>
					<li class="b-news-list__item">
						<p class="b-news-list__text"><i class="dash">—</i><a href="#" class="b-news-list__link">Блог Яндекса</a></p>
					</li>
					<li class="b-news-list__item">
						<p class="b-news-list__text"><i class="dash">—</i><a href="#" class="b-news-list__link">Факты</a></p>
					</li>
					<li class="b-news-list__item">

						<p class="b-news-list__text"><i class="dash">—</i><a href="#" class="b-news-list__link">Логотип Яндекса</a></p>
					</li>
					<li class="b-news-list__item">
						<p class="b-news-list__text"><i class="dash">—</i>Что <a href="#" class="b-news-list__link">пишут о Яндексе</a> другие журналисты</p>
					</li>
				</ul>

Т.е. пусть останется всё, кроме <li class="b-news-list__item">

Ведь по сути мы может сделать так b-news-list > li {}

Что думаешь?

Я там ответ на первой странице написал, но среди полотенец кода он потерялся.

Это ты кому, дружище? :unsure:

ceil100 · October 20, 2011

Тегов нет в природе. Есть элементы, блоки, виджеты, меню, колонки. А тегов нет.

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

зайди в википедию

тег-это тег,элемент-это элемент, то что образуется из открывающего и закрывающего тегов

Edited October 20, 2011 by ceil100

s0rr0w · October 20, 2011

зайди в википедию
тег-это тег,элемент-это элемент, то что образуется из открывающего и закрывающего тегов

Ты не понял прикола. Мышление тегами - самый примитивный уровень абстракции. Про-версталы не мыслят тегами, они им пофиг, они мыслят более высокими по уровню абстракциями.

ceil100 · October 20, 2011

а кто говорит о мышлении?

всего лишь лексика

psywalker · October 20, 2011

а кто говорит о мышлении?

Ты это сам сказал, задав свой вопрос.

Great Rash · October 20, 2011

зайди в википедию
тег-это тег,элемент-это элемент, то что образуется из открывающего и закрывающего тегов

Спасибо Кэп

ceil100 · October 20, 2011

в любом случае спасибо, кой какие идеи вы мне подкинули

пойду вкуривать БЭМ

Спасибо Кэп

та не за что

вопрос не по теме, а что у меня все время 33 сообщения?Так и должно быть?

Edited October 20, 2011 by ceil100

psywalker · October 20, 2011

вопрос не по теме, а что у меня все время 33 сообщения?Так и должно быть?

Во флейме - да.

ceil100 · October 20, 2011

понял.спс.

psywalker · October 20, 2011

s0rr0w

Я тебя понял. Твой подход мне понравился, но как обычно, есть вопросы.

1) Как бы выглядел твой код с такой вот структурой? И как бы ты применял к нему стили?

<div class="case">
        <ul class="nav">
                <li> <a href="#">1</a>
                        <ul class="nav__dropdown">
                                <li>
                                        <a href="#">Выпадающий пункт</a>
                                </li>
                        </ul>                   
                </li>
                <li> <a href="#">2</a>
                        <ul class="nav__dropdown">
                                <li>
                                        <a href="#">Выпадающий пункт</a>
                                </li>
                        </ul>                   
                </li>
        </ul>
</div>

2) А если боксов два и каждый из них имеет своё собственное поведение?

<div class="case">
	<div class="box1"></div>
	<div class="box2"></div>
</div>

s0rr0w · October 20, 2011

1) Как бы выглядел твой код с такой вот структурой? И как бы ты применял к нему стили?

Аналогично БЭМ

<div class="navigationBlock">
        <ul class="navigationBox">
                <li> <a href="#">1</a>
                        <ul class="dropdownBox">
                                <li>
                                        <a href="#">Выпадающий пункт</a>
                                </li>
                        </ul>                   
                </li>
                <li> <a href="#">2</a>
                        <ul class="dropdownBox">
                                <li>
                                        <a href="#">Выпадающий пункт</a>
                                </li>
                        </ul>                   
                </li>
        </ul>
</div>

2) А если боксов два и каждый из них имеет своё собственное поведение?
<div class="case">
	<div class="box1"></div>
	<div class="box2"></div>
</div>

То пусть имеют свое собственное поведение. Однако, если есть общее, то было бы

<div class="metaBlock">
	<div class="metaBox box1"></div>
	<div class="metaBox box2"></div>
</div>

psywalker · October 20, 2011

s0rr0w,

Понял, спасибо. А это удобно при постоянной поддержке проекта в будущем? Для работы разных людей с проектом и т.д?

s0rr0w · October 20, 2011

Понял, спасибо. А это удобно при постоянной поддержке проекта в будущем? Для работы разных людей с проектом и т.д?

Три года используем. Пока никто не жаловался.

Ялекс · October 20, 2011

Я обычно использую такой подход:

CSS-файл:


/* Если нужно что то подключить подключаем */

/* Глобальные стили */
html, body { ... }
a { ... }

/* Списки блоков */
.news-block { ... }
.news-block .date { ... }
.news-block .image { ... }
.news-block .link { ... }

/* Уточняющие стили блоков с ID */
#news { ... }
#news .image { ... }

#news2 { ... }
#news2 .image { ... }

HTML:

<div id="news" class="news-block">
   <div class="items">
      <div class="item">
         <img class="image" src="assets/news/image1.jpg" alt="..." />
         <span class="date">10/10/2010</span>
         <a class="link" href="#">Great news 1.</a>
      </div>
      <div class="item">
         <img class="image" src="assets/news/image1.jpg" alt="..." />
         <span class="date">10/10/2010</span>
         <a class="link" href="#">Great news 2.</a>
      </div>
      <div class="item">
         <img class="image" src="assets/news/image1.jpg" alt="..." />
         <span class="date">10/10/2010</span>
         <a class="link" href="#">Great news 3.</a>
      </div>
   </div>
</div>

<div id="news2" class="news-block">
   <div class="items">
      <div class="item">
         <img class="image" src="assets/news/image1.jpg" alt="..." />
         <span class="date">10/10/2010</span>
         <a class="link" href="#">Great news 1.</a>
      </div>
      <div class="item">
         <img class="image" src="assets/news/image1.jpg" alt="..." />
         <span class="date">10/10/2010</span>
         <a class="link" href="#">Great news 2.</a>
      </div>
      <div class="item">
         <img class="image" src="assets/news/image1.jpg" alt="..." />
         <span class="date">10/10/2010</span>
         <a class="link" href="#">Great news 3.</a>
      </div>
   </div>
</div>

Простые паравила:

1. Если код повторяется или будет повторяться, имеет смысл вынести в блок, определяем в «Списке блоков» новый блок, каждый блок должен иметь суффикс «-block».

2. Классы без суффикса «-block» могут быть только потомками элементов, которые имеют этот суффикс

3. ID обычно используются для уточнения позиции элементов (отступов), может размера шрифта

Можно как ни будь развить… например, добавив глобальные классы с суффиксом «-g».

BEM не понравился.

Не то чтобы не понравился, просто BEM решает задачи для совместной работы в команде. Единичным верстальщикам такой подход будет немного избыточным.

Edited October 20, 2011 by Ялекс

Анна · October 21, 2011

Вопрос не совсем в тему_:

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

Если давать каждому тегу класс, как это будет влиять на загрузку файла?

Я пока не понимаю каким образом осуществляется структуризация сайта браузером, для классов создается какая-то таблица, или они загружаются по мере встрече их в коде, или еще как-то?

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