Идеальный CSS код

Немного пофилософствуем, какой HTML и CSS код можно было бы назвать идеальным при вёрстке по сетке. Или хотя бы приятным.

1. В HTML нет огромных наборов одинаковых классов у однотипных элементов
2. В CSS нет избыточного кода, только нужный

Пример:

<div class="userList">
   <div class="userCard">User 1 inner tags...<div>
   <div class="userCard">User 2 inner tags...<div>
   <div class="userCard">User 3 inner tags...<div>
   <div class="userCard">User 4 inner tags...<div>
</div>

.userList{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}
 
.userCard{
    box-sizing: border-box;
    margin: 15px;
    width: calc(100% / 12 * 3 - 30px);
}
 
@media screen and (max-width: 720px){
   .userCard{
      width: calc(100% / 12 * 6 - 30px);
   }
}
 
/* Если вас дико бесит приём с отрицательным margin, 
вам поможет сочетание клавиш alt + f4 :) /*

Такой код полностью соответствует базовой философии разделения кода на структуру и оформление. У нас минимум классов в HTML, все правила оформления в CSS.

Почему же так не делают вёрстку по сетке? Зачем фреймворки?

Делают и так! Просто редко, потому что такой код предполагает много копипаста и большое количество одинаковых кусков в CSS.

Допустим, нам надо перестроить на 992px вёрстку. В bootstrap мы добавим всем однотипным элементам один класс. А в "чистом коде", пример которого был приведён выше, придётся копипастить media-запрос и менять width calc.

Добавить класс явно проще и быстрее, чем копировать media.

Но что, если бы мы могли создать media-запрос одной строкой?

На помощь приходят препроцессоры.