Потерял сайт с обсуждением css methodology
39 повідомлень
#10 років тому
Всем доброго дня/вечера
Как-то давным-давно в интернете наткнулся на статью, где шло обсуждение, вот такого стиля обозначения модификаторов блока:
.b-block {}
.b-block._size_large {}
.b-block._theme_light {}
<div class="b-block _size_large _theme_light"></div>
Теперь никак не могу найти этот сайт, где только не искал. Может быть кто-нибудь знает?

6863 повідомлення
#10 років тому
- отсутствует семантика, этого уже достаточно, чтоб раз и навсегда забраковать такой подход;- элементы оформления в разметке (пусть и завуалированные под классы, но это они);
- каша из черточек и дефисов;
- несамодостаточность классов и сложность лаконичного описания элемента;
6863 повідомлення
#10 років тому
БЭМ как раз семантичен. Ваш пример совершенно к нему не относится. .product_box__price{}
Как видите, отражается и семантика, и вложенность, и все с одним типом черточек.
Хотя, я бы так не дела, больше по душе определять элемент иерархией (умеренной), но это уже дело вкуса, и, возможно, сложности проекта.
39 повідомлень
#10 років тому
floppox, Этот подход насколько я помню, противопоставлялся БЭМ, где класс модификатора, вместе с названием блока и элемента получался очень длинным:.b-block {}
.b-block__element._size_large {}
.b-block__element._theme_light {}
<div class="b-block">
<div class="b-block__element _size_large">
</div>
Против:
.b-block {}
.b-block__element_size_large {}
.b-clock__element_theme_light {}
<div class="b-block">
<div class="b-block__element b-block__element_size_large">
</div>
Цитата:
- отсутствует семантика, этого уже достаточно, чтоб раз и навсегда забраковать такой подход;
Семантика - вещь довольно неопределенная. Где вы здесь видите отсутствие семантики?
Цитата:
- каша из черточек и дефисов;
Это уже, что называется на вкус и цвет товарищей нет

Цитата:
- элементы оформления в разметке (пусть и завуалированные под классы, но это они);
Согласен, что иногда это плохо. Но как бы вы поступили имея один элемент, но с разными вариантами размеров шрифта, например?
6863 повідомлення
#10 років тому
Цитата (pettson):Где вы здесь видите отсутствие семантики?Сперва вы мне покажите отсутствие чайника Рассела, а потом я вам - отсутствие семантики.
Цитата (pettson):
Это уже, что называется на вкус и цвет товарищей нетЕсть сложившиеся устои программирования, которые не на ровном месте создавались.
Цитата (pettson):
как бы вы поступили имея один элемент, но с разными вариантами размеров шрифта, например?Для это и нужно анализировать контекст и семантику. Если больший шрифт выделяет особое предложение, его нужно называть special, если наиболее важную информацию - accent, а вот в том случае, если это демо текста для слабовидящих - то будет уместно писать large-font
39 повідомлень
#10 років тому
Цитата:Есть сложившиеся устои программирования, которые не на ровном месте создавались.
Окей, что вы называете устоями, или ссылку на статью

Цитата:
Для это и нужно анализировать контекст и семантику. Если больший шрифт выделяет особое предложение, его нужно называть special, если наиболее важную информацию - accent, а вот в том случае, если это демо текста для слабовидящих - то будет уместно писать large-font
Это несемантичный код?
.btn-cart {
display: inline-block;
background: red;
}
.btn-cart--large {
padding: 15px;
font-size: 30px;
}
.btn-cart--small {
padding: 10px;
font-size: 20px;
}
------------------------------------------------------------------
<a href="#" class="btn-cart btn-cart--small">Добавить в корзину</a>
Цитата:
Есть сложившиеся устои программирования, которые не на ровном месте создавались.
Окей, что вы называете устоями, или ссылку на статью :)
Цитата:
Для это и нужно анализировать контекст и семантику. Если больший шрифт выделяет особое предложение, его нужно называть special, если наиболее важную информацию - accent, а вот в том случае, если это демо текста для слабовидящих - то будет уместно писать large-font
Это несемантичный код?
.btn-cart {
display: inline-block;
background: red;
}
.btn-cart--large {
padding: 15px;
font-size: 30px;
}
.btn-cart--small {
padding: 10px;
font-size: 20px;
}
------------------------------------------------------------------
<a href="#" class="btn-cart btn-cart--small">Добавить в корзину</a>
Reslee,
Цитата:
В чем преимущество перед мультиклассами?
Не совсем понял, здесь наоборот мультиклассовость используется.Reslee,
77 повідомлень
#10 років тому
pettson, подумал, что нижняя черта это какой-то хитрый способ взаимодействия родительского и дочернего класса. Не пойму смысл такой записи: условно отделить дополнительные классы?
А пропустить обязательную точку перед чертой — запросто. Вот эта запись: _size_large _theme_light — бытсро и правильно прочитать не получается, я вижу сразу 4 класса, а не 2.
6863 повідомлення
#10 років тому
Цитата (pettson):или ссылкуhttp://www.ozon.ru/context/detail/id/3159814/
Цитата (pettson):
.btn-cart--largeЧто такое btn? Это кнопки, которые находятся в большой и в маленькой корзине? Или мы имеем дело с некоторым количеством кнопок, среди которых есть большие и маленькие, а внутри этих кнопок есть корзина?
Цитата (Reslee):
бытсро и правильно прочитать не получаетсяАбсолютно верное замечание.
39 повідомлень
#10 років тому
Цитата:Что такое btn? Это кнопки, которые находятся в большой и в маленькой корзине?
Да, согласен, получилось не очень хорошо. Не могли бы привести пример, как вы считаете правильно?

6863 повідомлення
#10 років тому
А такой пример не может составляться наобум, без конкретного макета. Выше я писала о крупном тексте. Принцип тот же.Но, для кнопки добавления я бы писала так:
.product .to-cart {}и без всяких btn, потому что это может быть и кнопка, и текстовая ссылка.
Если по БЭМ, то:
.product__to_cart {}
39 повідомлень
#10 років тому
Цитата:и без всяких btn, потому что это может быть и кнопка, и текстовая ссылка.
Понял, замечание дельное, спасибо
