melnik909 13 авг в 12:00

Магия CSS на практике: советы по вёрстке от гика. Часть 3

Средний

6 мин

5.8K

Блог компании RUVDS.comВеб-разработка*CSS*

Туториал

+27

Комментарии 12

Haze27 13 авг в 15:19

Префиксы у аторманых селекторов o-* и т.д. выглядят так, будто мы вернулись в эру именования переменных с префиксами типов (https://en.wikipedia.org/wiki/Hungarian_notation)

p07a1330 13 авг в 21:36

▍ Функции min() и max() помогают мне установить максимальный или минимальный размер у элемента
Периодически нам приходится ограничивать размеры элементов. Например, указывать ширину, но она не должна быть больше какого-то значения. Такая задача решается с помощью свойств width и max-width:

Это не магия
Это 10 минут чтения документации

Как бы в такой статье не ожидаешь пересказ стандартных функций из доки

vanxant 13 авг в 22:42

Да в современном css примерно всё - это пересказ стандартных функций из доки. Прошли времена, когда приходилось использовать text-indent для сокрытия элементов, теги <ins> и <del> как единственные с поведением inline-block в IE, и padding-bottom в процентах при нулевой высоте вместо aspect-ratio.

Лично для меня использование функций min и max это небольшое открытие. При том что в каких-нибудь гридах я использую их постоянно, но блин, перенести идею на обычные div-ы не догадался.

melnik909 13 авг в 22:50

Скажите, пожалуйста, что вы ожидали увидеть под словом "магия"?

Baigildin вчера в 08:07

Для реализации этой идеи существует правило. Атрибут class добавляется только для элементов, доступных для редактирования разработчиками. Элементы, редактируемые через редактор, должны быть без атрибута. В этом случае селектор :not([class]) сработает отлично.

То есть стили применятся для всех элементов без атрибута class? А если изначально например в body было задано стили для p, то его перезапишет? В первом случае же применится для элементов внутри специального класса. Или я неправильно понял?

melnik909 вчера в 11:58

Указываю элемент, например h2, к нему добавляю :not([class]) и получается так:

h2:not([class]) {
  font-size: 1.25rem;
  line-height: 1.625rem;
}

В HTML элемент будет без атрибута class .

Source 2 часа назад

Придётся везде дописывать этот суффикс и надеяться не получить случайно сайд-эффектов от того, что где-то ещё есть элементы без классов.

А общий класс можно просто вынести за скобки и всё будет структурировано:

.article-formatted-body {
  ol, ul {
    padding-inline-start: 32px;
  }

  h2 {
    font-size: 1.25rem;
    line-height: 1.625rem;
  }

  p {
    margin: 0;
    padding: 0;
  }
}