Яндекс БЭМ

[DivMan]

Использовать ли всегда яндекс Б.Э.М?

[raptor-dm]

как хочешь

Edited May 30, 2015 by raptor-dm

[satantx]

Еще в двухтысячных использовал БЭМ

Edited May 30, 2015 by satantx

[antonKar]

Использовать ли всегда

Нет.

 

1) Стили для контента (текст, который будет наполнять контентщик/наполнист) пишутся через теги, например

.article p { blablabla: blobloblo; }

.article strong { font-size: 1000px; }

 

2) Не использую БЭМ при вёрстке форм.

 

Для начала задаю все стили для единого input. Что-то типа

input { font-size: 12px; blablabla }

 

То есть не парюсь со стилями для tel, email, text, а всё сразу. На radio и checked эти стили в большей части не применяются, в крайнем случае можно отдельно что-то подрегулировать.

 

А так как на нормальных сайтах стили внутряков формы должны выдерживаться, то не надо по миллиону раз по БЭМ-методологии писать одно и тоже.

 

input[type=submit] не использую, вместо него использую submit[type=submit], т.к. последний более гибок в управлении (предварительно конечно используя сброс стилей), на который также как на input пишу единый стиль.

 

Ну а затем уже, если надо вносить какие-то корректировки, то можно уже их делать отталкиваясь от класса тега form

.callback input[type=email]

Edited May 30, 2015 by antonKar

[DivMan]

 

Использовать ли всегда

Нет.

 

1) Стили для контента (текст, который будет наполнять контентщик/наполнист) пишутся через теги, например

.article p { blablabla: blobloblo; }

.article strong { font-size: 1000px; }

 

2) Не использую БЭМ при вёрстке форм.

 

Для начала задаю все стили для единого input. Что-то типа

input { font-size: 12px; blablabla }

 

То есть не парюсь со стилями для tel, email, text, а всё сразу. На radio и checked эти стили в большей части не применяются, в крайнем случае можно отдельно что-то подрегулировать.

 

А так как на нормальных сайтах стили внутряков формы должны выдерживаться, то не надо по миллиону раз по БЭМ-методологии писать одно и тоже.

 

input[type=submit] не использую, вместо него использую submit[type=submit], т.к. последний более гибок в управлении (предварительно конечно используя сброс стилей), на который также как на input пишу единый стиль.

 

Ну а затем уже, если надо вносить какие-то корректировки, то можно уже их делать отталкиваясь от класса тега form

.callback input[type=email]

 

 

 

А можно ли использовать БЭМ бех JSONA?

[afdw]

JSONA

Что это? 

[li4e]

Это не json, это просто селектор же, если я про то же думаю.

[DivMan]

 

JSONA

Что это? 

 

{  block: 'page',  content: {    block: 'head',    content: [      { block: 'menu', content: … },      {        elem: 'column',        content: { block: 'logo' }      },      {        elem: 'column',        content: [          {            block: 'search',            content: [              { elem: 'input' },              { elem: 'button', content: 'Search' }            ]          }        ]      },      {        elem: 'column',        content: {          block: 'auth', content: …        }      }    ]  }}

[afdw]

 

 

JSONA

Что это? 

 

{  block: 'page',  content: {    block: 'head',    content: [      { block: 'menu', content: … },      {        elem: 'column',        content: { block: 'logo' }      },      {        elem: 'column',        content: [          {            block: 'search',            content: [              { elem: 'input' },              { elem: 'button', content: 'Search' }            ]          }        ]      },      {        elem: 'column',        content: {          block: 'auth', content: …        }      }    ]  }}

А в чём отличие от JSON? Понял. Была фраза без JSON'а.

Edited May 30, 2015 by afdw

[Aleksandr.L]

Раз уж речь в теме о БЭМ'e. Спрошу тут.

 

Допустим есть такая разметка:

<div class="page-header">	<div class="page_header_in">		<a href="" class="page-header__logo">			<img src="" alt="" />		</a>		<div class="search">			<input class="search__field" type="search" />			<button class="search__button">Поиск</button>		</div>	</div></div><div class="content">	<div class="content_in">		...	</div></div><div class="footer">	<div class="footer_in">		...	</div></div>

В каждом блоке (шапка, контент, подвал) должна быть обертка, которая нужна для центрирования. Так вот, часто встречал нечто такое: .header_in, content_in, footer_in. Как с точки зрения БЭМ будет правильнее? Для каждого блока делать отдельно обертку или просто сделать один класс, допустим wrapper и добавлять его?

[afdw]

А в чём проблема центрировать каждый из этих элементов?

[DivMan]

А в чём проблема центрировать каждый из этих элементов?

 

Говорят повторение кода - это плохо

[Aleksandr.L]

А в чём проблема центрировать каждый из этих элементов?

 

Да не важно. Пускай у каждого блока будет свой background, растягивающийся на всю ширину, а нужно центрировать только контент внутри.

[Sergik+]

 

А в чём проблема центрировать каждый из этих элементов?

 

Говорят повторение кода - это плохо

 

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

Ну и по факту все эти умные фразы про повторяемость сильно переоценены (когда в 30000 строк css повторений строк 500 этого никто не заметит просто), но я никого не призываю говнокодить но иногда приходится идти на компромиссы в угоду скорости разработки.

[afdw]

 

А в чём проблема центрировать каждый из этих элементов?

 

Говорят повторение кода - это плохо

 

Какое повторение кода?

header, main, footer {  margin: 0 auto;  width: 300px;}

[antonKar]

А можно ли использовать БЭМ бех JSONA?

А почему нет? Я из методологии БЭМ только именование классов использую, JSON'овский БЭМ мне как-то не нужен в проектах.

 

В каждом блоке (шапка, контент, подвал) должна быть обертка, которая нужна для центрирования. Так вот, часто встречал нечто такое: .header_in, content_in, footer_in

Я делаю так. Например, есть блок с классом .header. Обёртка задаётся как .header-wrapper, а внутряки уже дальше идут не .header-wrapper__element, а .header-element.