Как не переборщить с тяжёлыми css правилами?

IIIu6ko,
Спасибо )
Я правда надеялся это услышать ))

Как не переборщить с тяжёлыми css правилами?

Ну что поделать, вот такую информацию я получил, и теперь есть фобии...
Спасибо )

БЭМ. Как разметить текст, если часть предложения выделена другим цветом?

Виталий, Спасибо Вам большое, за такой развёрнутый ответ )

БЭМ. Как разметить текст, если часть предложения выделена другим цветом?

Виталий, Если в конкретном случае, то есть несколько попапов, вот структура одного из них:

<div class="shopping-cart__popup popup popup--shopping-cart dropdown"></div>

Вешаю общие стили на класс popup:

.popup {
  position: absolute;
  
  background-color: #f8f7f4;
  box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.4);
  border-radius: 6px;
}

А потом решаю, раз класс popup общий, и его всплытие зависит от конкретных координат, и он не влияет на родителя в потоке документов, то координаты я пропишу в классе модификаторе:

.popup--shopping-cart {
  right: 0;
  top: 110%;

  width: 540px;
  padding: 20px 15px;

  color: #323232;
}

А класс shopping-cart__popup, в таком случае, у меня остаётся пустым...

Хотя, когда я писал всё это, уже был уверен на 70%, что координаты должны быть в shopping-cart__popup, а не в его модификаторе (

А по поводу, кусков кода, я имел ввиду, что часть кода, забирают классы, которые я буду переиспользовать. Эти классы, я описываю, в самом начале простыни, до header. Потом уже, в общем потоке стилей, через 500-700 строчек, дохожу до описания конкретных блоков, и уже в них всплывают модификаторы переиспользуемых стилей.
Т.е. кусок кода в начале простыни, кусок в средине и т.д.

А ещё же количество классов в одном теге возрастает.
Посмотрите на мой пример. 4-е класса и все они описывают один элемент разметки. Все находятся в разных частях css стиля. Читать такое неудобно ) Хорошо есть инспектор браузера, но без него, даже свой собственный код, достаточно сложно воспринимать. Поэтому кстати, очень сильно гружусь, с правильным, лаконичным названием класса, что бы было ясно, что он делает.

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

БЭМ. Как разметить текст, если часть предложения выделена другим цветом?

Спасибо, за такой развёрнуты ответ.

color-grey

Хотел так сделать, но вспомнил то самое определение БЭМ. Т.е. в таком формате, я не могу сказать, что это как бы имя блока, которое по БЭМ не должно отвечать на вопрос "какой, как выглядит?".

Только потому что вы не можете продумать название или структуру? Очень плохо.

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

Тогда как Вы относитесь к избытку классов? Если в разметке, в дереве БЭМ, они там не лишние, но в стилях не используются? Допустим, будут дополнительные состояния, для мобильных устройств, но в моей текущей задачи, нет такой необходимости, проектировать такое решение.

Или например у меня есть такой стек классов:
- Block
- Block__elem mix-class mix-class--modif

По идее, я мог бы описать внешнюю геометрию в классе block__elem, общие стили в mix-class, и в mix-class--modif отличие для каждого элемента. Но представим, что этот элемент, я хочу позиционировать относительно и его координаты задаю не в block__elem, а в mix-class--modif, что бы в стилях, было наглядно ясно, как каждый блок позиционируется. Такой подход не верный? Особенно, если block__elem в этом случае, останется без стилей в принципе.
И как избежать разбросанных кусков кода? Когда за позиционирование будет отвечать одно, за общую структуру другое, а дальше пойдут всякие модификаторы в каждом конкретном случае?

БЭМ. Как разметить текст, если часть предложения выделена другим цветом?

Ankhena,
Да, я долго сомневался, цена ли эта, получается 200 руб. за килограмм, тут 1,2 кг ... Следующая ячейка, имеет класс shop-col__count.
В макете корзины есть три ценовых позиции:
- Цена за килограмм (200 руб.)
- Сумма, с учётом веса покупки (1.2 кг х 200 руб.)
- Цена всех покупок (total order).

Вроде как не price, но не хочется писать, что-то вроде price per kilogram. "На этом мои полномочия всё) ... "

БЭМ. Как разметить текст, если часть предложения выделена другим цветом?

Steppp,

Тут лучше так

Кстати да, просто я в последнее время избегаю давать такие имена, типо item-title )

Спасибо за Ваш ответ )

БЭМ. Как разметить текст, если часть предложения выделена другим цветом?

Ну, т.е. для вас, это не является препятствием, в использование БЭМ, обращаясь к тегу, без класса, через вложенность?

Focus-within: как при табе на скрытый блок, включать его стили как при hover?

Ого. А что, так можно было что ли?)
Спасибо ))

Focus-within: как при табе на скрытый блок, включать его стили как при hover?

Ankhena,

Но если блок будет скрыт через display none, то ссылка никакого фокуса не получит.

Увы (

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

Ну да, раздать всем ссылкам класс link, на него псевдо элемент.

Скажите, а такие правила не работают?

.link::after:not(:hover) {
  content: "";

  position: absolute;
  left: 0;
  right: 0;

  height: 1px;
  background-color: #ffbc9e;
}

Или это как-то по другому пишут?

Focus-within: как при табе на скрытый блок, включать его стили как при hover?

Ankhena,
Спасибо. Извините за беспокойство, я отказался от этой идеи.
Выпадающие блоки, почему-то не получают состояние фокус. Видимо по той причине, что Вы описали. Похоже, попадая во внутренний блок с помощью tab, фокус получает элемент этого блока (ссылка, инпут). А эффект, который я пытаюсь получить, у элемента параллельного дерева.

Получается, селекторы "~", ">", "+" и стандартная вложенность, просто не способны достучаться из потомка родителя, до параллельного родителя, который к тому-же ещё и находится выше в потоке их общего родителя.

Если наглядно:

<div class="all">
  <div class="block1"></div>
  <div class="block2">
    <div class="block2__1">
      <a href="" class="block2__link"></a>
    </div>
  </div>
</div>

Я, получая фокус(tab) на block2__link, пытаюсь применить стиль к block1. Ну тут как бы, никак... ) Без js.

Про спан я помню )
Вы правы, наверное это не самое лучше решение.
Есть вариант накинуть padding на лишку, и дать ей подсветку при ховере. Тогда я спокойно смогу дать линию на "a". Но лучше так не делать. Реальная эффективная область кнопки на ховере, останется прежней в пределах ссылки.
Ваш вариант, абсолютно верный, просто я когда-то давно, почему-то решил, что спаном круче, чем псевдо элементом (типо излишне). Я ещё не сломал это предубеждение )
Сама линия, это обычный underline, который рисует браузер, только на 2-3 пикселя ниже и другого цвета. Висит на всех ссылках.

Стоит ли мне как-то закрыть или удалить эту тему?

Как не переборщить с классами html с желанием потом их переиспользовать?

Да, просто у меня иногда получаются такие классы:
class="btn btn--white btn--cart hover-dropdown"

class="get-access__link get-access__link--registration link-underline"

А в css:

.btn {
  position: relative;

  padding: 8px 23px;
  padding-bottom: 10px;

  border: none;
  border-radius: 22px;

  font-family: inherit;
  color: #ffffff;
  text-align: center;
  text-transform: none;
  text-decoration: none;

  cursor: pointer;
}

.btn--white {
  padding: 7px 23px;
  padding-bottom: 9px;

  border-radius: 22px;

  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
  color: #ffffff;

  background-color: rgb(255, 255, 255, 0.2);
}

.btn--cart {
  padding-left: 45px;
  padding-right: 33px;
}

Ну тут, на мой взгляд оправданно.

А теперь представим, что есть попап, с 4-я разными состояниями, на 4-х разных блоках (размер и паддинги), и всё что их объединяет это закругленные углы окна, цвет фона, текст ну и position . Получается, я пропишу это состояние на бокс отдельным стилем, например popup, потом буду задать каждому внутреннюю геометрию, размер окна. Тогда от названия какого блока мне отталкиваться? Ведь этот popup будет миксом в другой структуре блока...

По логике, позиционирование окна, я должен прописать отталкиваясь от секции в которой он находится. Задать общие стили на повторяющиеся элементы, прописать модификаторы, для каждого изменённого состояния. Вот уже 3-и класса получается в html теге.

Вообще вопрос возник, ещё и из-за того, что куски такого кода, то там, то тут, тяжело отслеживать, без инспектора конечно )
Ну представьте, что у 5 тыс. строчек кода, в разных частях, разбросаны куски кода, формирующих блок, скажем 5-6 кусков. И если кто-то, захочет там что-то поменять, разработчику придётся бегать по всем пяти тысячам строчек кода, что бы изменить состояние блока. Вместо того, что бы зайти в раздел, этого блока и последовательно менять его состояние. Это немного неудобно, как мне кажется, хотя и есть нюансы )

Как достучаться до элемента при ховере по другому элементу, через css?

Ankhena,
Я даже не увидел, что Вы мне предложили решение, перед тем как прокомментировать :D
Сижу такой, думаю, а тут...
Так и знал, что как-то просто будет, но не так :D

Спасибо большое ))

Как достучаться до элемента при ховере по другому элементу, через css?

Ankhena,
Нужно на ссылку, задать кастомный underline (ниже чем может стандартный).
Вокруг ссылки padding и border-radius, для ховер эффекта на кнопке.

Как размечать заголовки, которые заголовками не являются?

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

Работа с svg. Инлайнить или нет? Как мёрджить svg вместе с эфектами из Photoshop?

Спасибо!
Про спрайты, если честно, мало что знаю. Стоит изучить этот вопрос.
Если вкратце, в чём преимущество такого подхода? Это про удобство или про производительность?

Form: input и label. Полезно ли всегда использовать label?

Дмитрий Беляев, Спасибо!
Ох.. неожиданно, однозначный, хороший ответ )
Как поставить больше лайков :D

Как создать панель, которая смещается влево и выезжает справа?

Ну по логике, отслеживается событие mouseover. В разных секциях, разная скорость прокрутки.
Дальше похоже на обычный слайдер, два блока с картинками, но отображается 100% вью порта по ширине, если mouseover в правой или левой секции с помощью position и transition прокручивать вправо или влево, если дошли до последнего блока загружать первый.
Тут кто-то спрашивал про горизонтальную прокрутку.
Как настроить css для прокрутки изображений?

Ну, я бы в эту сторону капал.

Специфичные теги article и figure. Применяете ли вы их и в каких случаях?

Спасибо!
Действительно, логично )

Специфичные теги article и figure. Применяете ли вы их и в каких случаях?

Спасибо!