БЭМ

Justnewone · November 10, 2011

Сразу скажу, я не минусовал, но Зачем вы предлагаете померяца кое-чем, например размерами проектов? Точно уверены, что тут люди не найдутся с подобным опытом?

Nanto · November 10, 2011

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

Есть, например, такая штука как партнёрская вёрстка - знаете что это за ужас?

Great Rash · November 10, 2011

Знаю делал.

1) Ужасная партнерка - это траблы менеджмента, который должен сказать: "В рамках нашего проекта эдакий дизайн сделать нельзя!", и предложить варианты, а не мять сиськи, боясь упустить клиента побогаче.

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

В БЭМ все это уложить можно с пол пинка. Главное выделить всемя на планирование проекта, а не тупо верстать, верстать, верстать. Только это мало где возможно, и не по причине сложности, а по причине особенностей русского бизнеса: урвать побольше и побыстрее.

И не надо заливать нам тут.

Justnewone · November 10, 2011

Золотые слова, Юрий Бенедиктович

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

Nanto · November 10, 2011

Какие проблемы менеджмента? Вы о чём? Я о совместимости проектов...

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

Конкретный пример - сделал шаблон всплывашки, всё как надо, перепроверил... У пяти партнёров разваливается!.. Полез смотреть в чём дело. А просто у четырёх партнёров в своих цсс-ках были проставлены z-indexы до миллиона (ребята, так сказать с ЗАПАСОМ делали). Выход? Вручную в своём шаблоне перепрописывашь z-indexы до 1000100...

А Вы про менеджемент...

Опять двадцать пять! Говорю же - нет опыта у минусовщиков...

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

Отдал шаблон, тестеры косяки заметили, файербагом отсмотрел, исправил и забыли! Или он по-Вашему должен свою верстку в соответствии с "системой" перелопатить?

Justnewone · November 10, 2011

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

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

Нету Системы разработки, Канвы, Стандартов (я не про спецификацию, а стандартизацию работы, приемов), стало быть - пожинайте.

Gaspode · November 10, 2011

Вопрос:

Какие проблемы менеджмента? Вы о чём?

Ответ:

И мне что, с каждым связываться - давайте выработаем общую систему? Да нах это надо всем?..

Nanto · November 10, 2011

Так Вы до первопричин бед хотите докопаться? Это к Тиму Бернерсу-Ли! Вначале сменами стандартов всех запутали, а когда в нете получилась натуральная каша мала, стали "обратно совместимо" пытаться исправлять, да только всем уже по барабану - интернет теперь не для образования и игрушек, в нём теперь деньги все зарабатывают! А время - деньги, так что большинство скажет - идите вы со своими системами в ... у нас каждая копейка на счету, не до систем нам!

Вопрос:
Какие проблемы менеджмента? Вы о чём?
Ответ:
И мне что, с каждым связываться - давайте выработаем общую систему? Да нах это надо всем?..

Вы просто слабо представляете ОБЪЁМ работы необходимый для перехода на общую систему! Проще все с нуля сделать (мне самому в разы приятнее делать что-то с нуля, а не перелопачивать чужую вёрстку во время очередного ребрендинга). Но время-время!..

Justnewone · November 10, 2011

Так Вы до первопричин бед хотите докопаться? Это к Тиму Бернерсу-Ли! Вначале сменами стандартов всех запутали, а когда в нете получилась натуральная каша мала, стали "обратно совместимо" пытаться исправлять, да только всем уже по барабану - интернет теперь не для образования и игрушек, в нём теперь деньги все зарабатывают! А время - деньги, так что большинство скажет - идите вы со своими системами в ... у нас каждая копейка на счету, не до систем нам!
Вопрос:
Какие проблемы менеджмента? Вы о чём?
Ответ:
И мне что, с каждым связываться - давайте выработаем общую систему? Да нах это надо всем?..
Вы просто слабо представляете ОБЪЁМ работы необходимый для перехода на общую систему! Проще все с нуля сделать (мне самому в разы приятнее делать что-то с нуля, а не перелопачивать чужую вёрстку во время очередного ребрендинга). Но время-время!..

Когда нибудь руководители поймут, что бессистемная разработка "а верстать мы наймем чувака из фриланса" гораздо ДОРОЖЕ за счет обслуживания (я нашел именно такого, это счастье ) и в т.ч. переделать все на наманый лад это ДЕШЕВЛЕ по той же причине - то все пойдет.

Но нестабильность, слабость менеджмента (в ворде умеешь работать? - будешь манагером) отодвигают счастье. Общим словом - реалии. Я, например, всегда стараюсь "пробить" полную переделку, если только возможно. Зачастую, это экономия времени.

lexxcode · November 17, 2011

Вопрос:
Какие проблемы менеджмента? Вы о чём?
Ответ:
И мне что, с каждым связываться - давайте выработаем общую систему? Да нах это надо всем?..
Вы просто слабо представляете ОБЪЁМ работы необходимый для перехода на общую систему! Проще все с нуля сделать (мне самому в разы приятнее делать что-то с нуля, а не перелопачивать чужую вёрстку во время очередного ребрендинга). Но время-время!..

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

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

exessqd1 · December 14, 2011

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

Добавлена библиотека блоков.

В библиотеке собраны наиболее часто используемые на страницах элементы.

На данный момент в ней 8 блоков.

.b-grid
.b-devider
.b-article
.b-pic
.b-input
.b-pin
.b-elastic
.i-expand

Со временем библиотека будет пополняться.

Добро пожаловать

Great Rash · December 14, 2011

Позырил я к примеру грид... я вот одного не пойму (это отдаляет меня от полного понимания грида) что делать при "резине"? Фикс эт конечно хорошо, но я никогда ещё не видел "резиновых" сеток? Было бы замечательно если бы все примеры были "резиновыми". Или сие в принципе невозможно?

s0rr0w · December 14, 2011

Позырил я к примеру грид... я вот одного не пойму (это отдаляет меня от полного понимания грида) что делать при "резине"? Фикс эт конечно хорошо, но я никогда ещё не видел "резиновых" сеток? Было бы замечательно если бы все примеры были "резиновыми". Или сие в принципе невозможно?

Размеры гридов в процентах можно ставить

Great Rash · December 14, 2011

Как тогда себя должны вести расстояния между блоками? Тоже в процентах или остаться в пикселях? Самая известная сетка - 960px как будет выглядеть в процентах? Отступы так и остаются по 10 пикселей?

UPD: еще мне интересно как задавать вертикальный ритм? line-height должен быть каким в той или иной сетке?

s0rr0w · December 14, 2011

Как тогда себя должны вести расстояния между блоками?

Расстояний между блоками нет. Они формируются самими блоками

Самая известная сетка - 960px как будет выглядеть в процентах? Отступы так и остаются по 10 пикселей?


#grid {
        display: grid;
        grid-columns: 10px 1fr 10px;
    }

UPD: еще мне интересно как задавать вертикальный ритм? line-height должен быть каким в той или иной сетке?

Скорее всего, аналогично таблице. Но точно не скажу

exessqd1 · December 14, 2011

Как тогда себя должны вести расстояния между блоками? Тоже в процентах или остаться в пикселях? Самая известная сетка - 960px как будет выглядеть в процентах? Отступы так и остаются по 10 пикселей?

Как тебе удобно так и будут, можно свободно задавать отступы и в процентах и в пикселях.

Отступы между ячейками .b-grid__cell задаются не самим ячейкам, а элементам внутри них.

Например, мы хотим сделать отступ между ячейками в 5% или любой другой.

HTML


<div class="b-grid">
   <div class="b-grid__cell b-grid__cell_1-4">
       1-4
   </div>
   <div class="b-grid__cell b-grid__cell_1-4">
       1-4
   </div>
   <div class="b-grid__cell b-grid__cell_1-4">
       1-4
   </div>
   <div class="b-grid__cell b-grid__cell_1-4">
       1-4
   </div>
</div>

Создаем новый блок .b-example и внутри ячейки .b-grid__cell элемент .b-example__block и задаем этому элементу отступ справа в 5%

HTML


<div class="b-grid b-example">
   <div class="b-grid__cell b-grid__cell_1-4">
       <div class="b-example__block">1-4</div>
   </div>
   <div class="b-grid__cell b-grid__cell_1-4">
       <div class="b-example__block">1-4</div>
   </div>
   <div class="b-grid__cell b-grid__cell_1-4">
       <div class="b-example__block">1-4</div>
   </div>
   <div class="b-grid__cell b-grid__cell_1-4">
       <div class="b-example__block">1-4</div>
   </div>
</div>

CSS


.b-example__block {
    margin-right: 5%;
}

Теперь между каждым элементом .b-example__block есть отступ в 5%, но у последнего элемента он нам не нужен.

Для того чтобы компенсировать отступ последнего элемента прописываем на блоке .b-example отступ справа margin-right: -5%;

HTML


<div class="b-grid b-example">
   <div class="b-grid__cell b-grid__cell_1-4">
       <div class="b-example__block">1-4</div>
   </div>
   <div class="b-grid__cell b-grid__cell_1-4">
       <div class="b-example__block">1-4</div>
   </div>
   <div class="b-grid__cell b-grid__cell_1-4">
       <div class="b-example__block">1-4</div>
   </div>
   <div class="b-grid__cell b-grid__cell_1-4">
       <div class="b-example__block">1-4</div>
   </div>
</div>

CSS


.b-example {
   margin-right: -5%;
}

.b-example__block {
    margin-right: 5%;
}

Все готово, отступы между ячейками .b-grid__cell в 5% точно выровнены по левому и правому краю.

UPD: еще мне интересно как задавать вертикальный ритм? line-height должен быть каким в той или иной сетке?

Что мешает?

Edited December 14, 2011 by exessqd1

Great Rash · December 14, 2011

Что мешает?

Что? К чему этот вопрос?

exessqd1 · December 14, 2011

UPD: еще мне интересно как задавать вертикальный ритм? line-height должен быть каким в той или иной сетке?

Задай вопрос правильно.

Edited December 14, 2011 by exessqd1

s0rr0w · December 14, 2011

Задай вопрос правильно.

Вопрос задан правильно. Учите матчасть, сударь

exessqd1 · December 15, 2011

UPD: еще мне интересно как задавать вертикальный ритм? line-height должен быть каким в той или иной сетке?

Задай вопрос правильно.
Вопрос задан правильно. Учите матчасть, сударь

Хм, интересно, уже два человека меня уверяют, что .b-grid .b-grid__cell как-то нестадартно(не так как обычные боксы) влияет на высоту строк, то есть на вертикальный ритм.

Хорошо попробуем разобраться как .b-grid .b-grid__cell вообще может повлиять на вертикальный ритм.

Строковый котекст форматирования. Теория.

от eric meyer. ссылка

Во-первых, немного равенств, а затем объяснения терминов.

em-box = font-size = content-area

content-area + (half-)leading = inline box

inline box(min/max) = line-box

...где:

em-box = em-box определяется заданным шрифтом.

font-size = свойтво которое определяет размер шрифта.

content-area для строковых элементов это аналог content-box блоковых элементов. Для незамещаемых элементов, высота бокса content-area описывается свойством font-size для каждого символа в элементе; для замещаемых элементов, это действительная высота элемента плюс margin, padding или border.

(half-)leading = разница между font-size и line-height, применяется в равной степени сверху и снизу content-area для каждого элемента.

inline box = сложение (half-)leading с content-area для каждого элемента; для незамещаемых элементов, высота inline box для каждого элемента точно равна line-height, если line-height меньше font-size высота inline box будет равна content-area; для замещаемых элементов высота inline box для каждого элемента точно равна действительной высоте элемента плюс margin, padding или border.

line-box(строка) = высота строки(line-box) определяется по самой высокой и самой низкой границе inline box'ов в строке. (если проще высота строки определяется от самого большого inline box’а в ней)

Следствия:

background для строковых элементов применяется к content-area плюс padding.
любая рамка (border) на строковом элементе будет окружать content-area плюс padding.
margin,padding,border на незамещаемых элементах не имеют влияния на поток по вертикали, но имеют по горизонтали.
margin,padding,border на замещаяемых элементах влияют на высоту inline box’а для этого элемента.

Продолжение у мейера

Все что сейчас нам нужно знать, это то что высота строки, если в ней нет замещаемых элементов, зависит только от двух свойств font-size и line-height

И с этим знанием мы можем ответить на наш вопрос:

Каким образом .b-grid .b-grid__cell может повлиять на вертикальный ритм?

Никаким, т.к в них не заданы font-size или line-height.

CSS:

.b-grid {
  letter-spacing: -0.31em;
  word-spacing: -0.43em;
}

ГреатРаш, если ты испугался вот этих деклараций, не бойся, они просто убирают пробелы между строками.

.b-grid__cell {
  display: inline-block;
  word-wrap: break-word;
  letter-spacing: normal;
  word-spacing: normal;
  vertical-align: top;
}

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

P.S. s0rr0w, я кое-что для тебя сделал

s0rr0w · December 16, 2011

P.S. s0rr0w, я кое-что для тебя сделал

А я сделал кое что для тебя

Именно про этот эффект и спрашивал Great Rash. А то, что ты тут написал и нарисовал, конечно же занятно и интересно, но не по теме.

Great Rash · December 16, 2011

Каким образом .b-grid .b-grid__cell может повлиять на вертикальный ритм?

Я такой вопрос задавал? Когда?

exessqd1 · December 29, 2011

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

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

.b-grid

Переделан демо-пример
Добавлен вертикальный ритм
Добавлено описание

.b-divider

Переделан демо-пример
Добавлено описание
Переделаны примеры использования

.b-article

Добавлен вертикальный ритм

.b-pic

Добавлено описание
Исправлен баг с expression в IE, когда в некоторых ситуация картинка пропадала если был прописан background

bemclub.in

Gaspode · January 4, 2012

bemclub.in:

Элемент - часть блока, которая вне этого блока не имеет смысла, не может быть использована вне контекста этого блока (если может, то это уже блок и её надо оформлять как блок).

Нет элементов вложеных в элементы, все элементы распологаются на одном уровне. Даже если они в конечном html всегда используются один внутри другого.

Я не могу этого уразуметь как-то. Вот пример: есть у меня слайдер (допустим. .b-slider), в каждом слайде есть заголовок слайда (допустим, .b-slider__title). А в этом заголовке ещё часть выделена, как особо важная. И как мне с этим поступать? Заголовок слайда на самостоятельный блок не катит, потому что вне слайдера он не упёрся никому вообще. Эта часть заголовка, как я понимаю концепцию, — это элемент заголовка, вне заголовка она не имеет смысла. Выделять эту часть, скажем, тегом strong можно (.b-slider__title strong), но мы же должны опираться только на имена классов в селекторах или как? В общем, помогите кашу в голове разгрести =)

Edited January 4, 2012 by Gaspode

rash · January 5, 2012

В вашем случае нужно что-то вроде .b-slider__title-emphasis, но не .b-slider__title__emphasis, в этом все дело.

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