Как писать более чистый CSS: дюжина советов от банальных до неочевидных

[Roman_S]

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

[semendyaevanton]

Согласен с вами. Так было бы гораздо удобнее

[foxnorth228]

Я пытался как-то систематизировать свойства, типа вначале идет position и связанные с ним свойства типа z-index, потом display и все размерности, потом background свойства, font и так далее, но системы так никакой и не создал. Лично мне алфавитный порядок не нравится, потому что, к примеру, width, padding, margin, border, которые все относятся к размеру элемента, находятся в разных частях правила. То есть связанные смыслом правила мы разбрасываем, и связь резко ослабляется и становится неочевидной. Я идеально все свойства не знаю, так что мне оак проще писать

[ScorpAL]

https://github.com/kutsan/stylelint-config-clean-order

order output под спойлером

[franzose]

Как раз примерно такой порядок для себя вывел в бытность работы фронтендером. Как-то само получилось, естественным путем :)

[ImagineTables]

Лично я сортирую и группирую свойства по смыслу, а если в блоке ТАК много свойств, что приходится прибегать к сортировке по алфавиту, я бы задумался о передекомпозиции.

Во-первых, надо выделить роли. Даже если это театр одного актёра, описать каждое амплуа отдельно полезно для читаемости.

Во-вторых, не стоит пренебрегать системными библиотеками (классами общего назначения).

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

[k1ber]

Как там линтеры поживают?

[wadowad]

Если уж используем позиционирование, то наверно вот такой вариант центрирования будет более логичным:

.no-flex {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

[corvus007]

.no-flex {
  position: absolute;
  inset: 0;
  margin: auto;
}

или так

[domix32]

Ну хоть не про ITSCSS уже неплохо.

[Harconnen]

Порядок свойств использую вот так, и уже привык

Позиционирование следует первым, потому что оно влияет на положение блоков в потоке документа. Блочная модель идёт следующей, так как она определяет размеры и расположение блоков.

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

Сгруппированные объявления в правиле отделены друг от друга пустой строкой.

Порядок объявления подробных правил, таких как font-size, font-family, line-height, соответствует порядку в сокращённой версии правила. В случае совместного использования подробных и сокращённых правил, первой идёт сокращённая версия.

.declaration-order {
  /* Позиционирование */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Блочная модель */
  display: block;
  float: right;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;

  /* Типографика */
  font-family: "Arial", sans-serif;
  font-style: normal;
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  text-align: center;
  color: #333333;

  /* Оформление */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  opacity: 1;

  /* Анимация */
  transition: color 1s;

  /* Разное */
  will-change: auto;
}

[mrBarabas]

Примерно и у нас так заведено, с небольшой разницей в порядке, но так намного удобнее алфавитной сортировки (пробовали - не взлетело)

[slavaRomantsov]

Использовать emoji звучит конечно оригинально, но больше как шутка выглядит, не нравится мне такое

[delphinpro]

Лучший способ не изучать CSS — это использовать фреймворки, вроде Bootstrap или Tailwind CSS.

Тайлвинд - утилитарный Фреймворк. По сути это «CSS in HTML». То есть изучая тайлвинд, вы изучаете css.

c

[BlackStar1991]

Не используйте, псевдо математические операции которые указаны в примере.

<i class="drop" style="--order: 1"></i>
<i class="drop" style="--order: 2"></i>
<i class="drop" style="--order: 3"></i>

Это очень плохой пример. Хотите повыделываться, вот чистый код

.drop:nth-of-type(1) {
  animation-delay: 100ms;
}

.drop:nth-of-type(2) {
  animation-delay: 200ms;
}

.drop:nth-of-type(3) {
  animation-delay: 300ms;
}

https://jsfiddle.net/5j6L4b2g/ То что автор считает, "проще" потребляет вычеслительных мощностей пользователя. А теперь представим, что на странице 100 000 элементов и для каждого надо браузеру подсчитать calc и order.

[Vadiok]

Если на странице 100 000 элементов, то тут уже любая анимация загрузит браузер. Принципиально ничего не изменится, кроме того, что вам, учитывая этот случай придется прописать .drop:nth-of-type(x) 100000 раз.