Модификация блока путём увеличение специфичности

Стандартная ситуация

<body class="body body_fixed">
   <div class="logo">
      LOGO
   </div>
</body>


.logo {
   font-size: 40px;
}
.body.body_fixed .logo {
   80px;
}

Как мне такого рода CSS по папочкам разложить? Как посоветуете наименовать файлы? Что вообще можно сделать чтоб это грамотно сопровождать и deps какой и куда прикладывать. Решил упороться на сборщиках и правильной организации структуры. Настроил сборщики начал тесты проводить потом бац, а что делать со спецефичностью? Хочешь не хочешь но есть моменты когда от неё не уйти.

6 years ago

tadatuta

Если говорить строго про исходную разметку, то базовые стили стоит положить в logo.css, а переопределение от модификатора родителя — в body_fixed.css.

Но можно рассмотреть еще такой вариант:

<body class="body body_fixed">
   <div class="logo body__logo">
      LOGO
   </div>
</body>

И переопределять от модификаьтора уже не независимый блок logo, а элемент logo самого body:

.logo {
   font-size: 40px;
}

.body_fixed .body__logo {
   font-size: 80px;
}

6 years ago

Realetive

А если у .body_fixed нет никаких стилей, то и вовсе избавиться от специфичности, модифицировав блок logo:

<body class="body">
   <div class="logo logo_view_header">
      LOGO
   </div>
</body>

.logo {
   font-size: 40px;
}

logo_view_header {
   font-size: 80px;
}

6 years ago

PanSom

Это пример сферический конь. Тот же fixed это модификатор который появляется от какого либо события и влияет на ОЧЕНЬ МНОГО блоков на сайте. Проходить все блоки js'ом и навешивать им свои модификаторы такая себе идея если есть возможность действовать проще. Вот я и спрашиваю.

И переопределять от модификаьтора уже не независимый блок logo, а элемент logo самого body:

Всё равно проблему не решает. Мы не можем таким образом менять к примеру тему со светлой на тёмную и навешивать на всё вокруг .body__<елемент>.

6 years ago

PanSom

Изменение блока контекстом

Короче это из этой истории.

6 years ago

Realetive

Тот же fixed это модификатор который появляется от какого либо события и влияет на ОЧЕНЬ МНОГО блоков на сайте.

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

Мы не можем таким образом менять к примеру тему со светлой на тёмную и навешивать на всё вокруг .body__<елемент>.

Об этих ограничениях я тоже не догадался, руководствовался «Стандартной ситуацией».

6 years ago

tadatuta

менять к примеру тему со светлой на тёмную

На самом деле зависит от способа использования такой темы. Ведь если для выбора темы каждого компонента завязаться на модификатор для body, то не будет возможности иметь несколько тем на одной странице. А такая потребность возникает достаточно часто.

Чтобы оставлять комментарии, необходимо авторизоваться.