Я стал психопатом

# Как я организую свой CSS сейчас

Итак, я провел рефакторинг своего личного сайта-портфолио (перешел с React на Vue для развлечения). И меня раздражал старый способ организации моего CSS.

Несколько причин:

• Слишком много прокрутки, чтобы найти то, что я хочу (команда-F — тяжелая работа)
• CSS элемента для мобильных и настольных компьютеров слишком далеки друг от друга

Поэтому я изменил способ организации своего CSS-кода.

Разве это не красиво?

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

Объясняя себя

Вопрос 1) Почему большинство атрибутов находятся в одной строке?

Не усложняет ли это чтение? Например:

.something {width:10px; height:10px; color:red}

В моем старом случае каждый атрибут располагался на отдельной строке. Что заставило меня прокручивать слишком много. Слишком сильное вертикальное давление. Что раздражало.

Поэтому я хотел равномерно распределить вертикальное и горизонтальное давление — сделать отдельные строки длиннее, но сделать весь документ намного короче.

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

Вопрос 2) Почему запросы @media находятся ВНУТРИ?

.hi {@media only screen and (min-width: 768px) {color:red; height:10px}
     @media only screen and (max-width: 768px) {color:blue; height:0}}

В моем старом способе организации кода CSS все для мобильных устройств (и небольших экранов) было бы сверху, а все для настольных компьютеров (и больших экранов) — снизу. Например:

@media only screen and (min-width: 768px) {
  .a {
    color: red;
    height: 10px;
  }

  .b {
    color: blue;
    height: 11px;
  }
}

@media…