Какой выбрать подход к структуре CSS?

Question

[O_Nayre]

Скажем так: я изучал CSS очень давно и занимаюсь программированием не с целью зарабатывания денег, а больше как хобби в своих проектах. Раньше я использовал подобный подход:

.class_name {
  proprety_name: property value;
  proprety_name2: property value2;
}

<div class="class_name ">Lorem Ipsum</div>

Но вот недавно копаясь в недрах стилей чужих проектов наткнулся на такой подход:

.padding_left_10 {
  padding-left: 10%;
}
.padding_top_10 {
  padding-top: 10%;
}

и т д от 1 до N видимо все что используется в проекте. По многим параметрам включая responsive классы типа padding_top_2_xs. В целом не больше одного свойства на класс.

Cам макет

<div class="padding_left_10 padding_top_10 padding_top_2_xs и т д портянкой все необходимые классы">Lorem Ipsum</div>

Глобально все это напоминает набивший оскомину bootstrap, но IMHO выглядить более гибким.
Собственно вопросов даже несколько:

1. Это что новые веяния (больше риторический)?
   
2. Где бы чего почитать на эту тему?
   
3. Ваши За и Против?
   

Причем все это попалось в о-очень крупном по мировым меркам проекте (так что аргументы к вопросам в виде "это овнокод", "никто так не делает" как бы не аргументы).

Comments

[O_Nayre]

не охото холиварить
сайт который я цитирую оцениватеся по версии гугеля в $ 23,429,520.00 и получает ежедневный доход в размере около $ 21,694.00
Так что повторюсь, аргументов "это овно" я нативно и на хабре могу почитать в любой статье по БЭМ.
Я не говорю что собираюсь прям сесть и переписывать свой проект который как раз таки на БЭМ.
Я хочу разобраться какие есть плюсы у такого подхода кроме гибкости. Или как минимум как он хотя бы называется, а дальше уже сам разберусь (=

[alvvi]

O_Nayre: это наиболее близко к Atomic CSS, который в последнее время почему-то стали называть "функциональным CSS", уж не знаю, есть ли принципиальная разница, но выглядит они очень схоже.

Answer 1

[O_Nayre]

В общем пока все опять же свелось к принципу
Хочешь понять "логику" сущности: ищи ответ у создавшего ее

Ну и собственно про разные подходы, ибо не единым Бэм можно быть сытым.

Answer 2

[sim3x]

BEM
https://www.youtube.com/watch?v=RM55tkWfHDc

Comments

[O_Nayre]

За линк спасибо. Покурю вечером.
Но по сути, в том то и дело что что в проекте вроде как не и БЭМ в чистом виде.
Приведу пример классов элементов
class="contentSansBold lineHeightTight fontSize20 sm-lineClamp2 sm-maxHeight2LineHeightTight"
или другой
"borderBox width-size6of12 paddingLeft10 xs-paddingLeft0 xs-paddingRight0 xs-size12of12".
То есть никаких блоков в чистом понимании классической модели

а наоборот
<header class="position-relative marginAuto maxWidth1000 paddingLeft20 paddingRight20">

[sim3x]

O_Nayre:
выкинуть и переписать на бем

[sim3x]

O_Nayre:
нет плюсов
совсем нет
Мы исключаем ситуацию, что вы любите говнокод

[O_Nayre]

Ok. sim3x: Видимо я не совсем правильно выражаю мысли/впоросы и описываю ситуацию. Я так понимаю Вы думаете там весь код написан таким образом - нет, только часть как уровень/надстройка над бэм (не знаю как правильно обозвать).
Собственно что бы дальше вести диалог сам пример medium.com
Чем-то ведь верстальшики руководстовались создавая узкие классы а-ля?

.u-xs-paddingRight0 {
    padding-right: 0!important;
}

Если Вам угодно, весь блок таблицы стилей отвечающий за кнопки - голимы бэм a-la bootstrap.
Но блок флексов весь сверхузкими классами.

.u-flex0 {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

[sim3x]

O_Nayre:
На бем просто найти класс и пофиксить его
Приведенные примеры - говнокод в виде фиксов

Почему такое существует - лучше спросить у разрабов медиума

Answer 3

[Negwereth]

Аргумент "это говнокод" может быть применён к проекту любого по мировым меркам уровня. Гениев и евангелистов ничтожная доля процента по отношению к формошлёпам.

Так что моё мнение - это говнокод, не смотрите туда.

Answer 4

[Андрей]

Отчетливо слышу запах atomic css в таком подходе. https://acss.io/

Answer 5

[Niriter Inc.]

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

Comments

[O_Nayre]

Так никто и не говорил, что это подход для универсального фреймворка.

Answer 6

[Islam Ibakaev]

похоже на immutable(functional)css типа tachyons и basscss