Простой CSS

Стиль кода

  1. Порядок и группировка свойств #

    Свойства следует группировать по смыслу, и вот почему это важно:

    • Плохо
      .block {
  margin-bottom: 50px;
  padding: 20px;
  vertical-align: middle;
  color: teal;
  line-height: 30px;
  display: inline-block;
  margin: 20px auto;
  font: 16px/1.4 Arial,sans-serif;
  float: left;
  position: relative;
}
    • Хорошо
      .block {
  display: inline-block;  /* 💥 */
  float: left;
  position: relative;
  margin-bottom: 50px;    /* 💥 */
  margin: 20px auto;
  padding: 20px;
  vertical-align: middle; /* 💥 */
  line-height: 30px;      /* 💥 */
  font: 16px/1.4 Arial,sans-serif;
  color: teal;
}

    Если взять код слева и расставить в нём свойства по порядку (пример справа), сразу обнаруживается куча ошибок: display: inline-block не будет работать с float: left, потому что в этом случае элемент становится блочным. По этой же причине не будет работать vertical-align. margin-bottom не сработает, потому что ниже перезаписывается сокращенной записью свойства margin. line-height не работает, потому что перезапишется короткой записью font.

    Достаточно сгрупировать свойства по смыслу, чтобы эти ошибки стали видны как на ладони, поэтому старайтесь всегда придерживаться определённого порядка свойств.

    Порядок свойств можно подглядеть у HTML-Академии. Для сортировки можно использовать CSScomb, но лучше просто привыкнуть записывать свойства в определённой последовательности.

  2. Оформление кода #

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

    Например, везде должны быть одинаковые отступы слева:

    • Плохо
      .block {
  padding: 20px;
  font: 16px/1.4 Arial, sans-serif;
   color: teal;
}
    • Хорошо
      .block {
  padding: 20px;
  font: 16px/1.4 Arial, sans-serif;
  color: teal;
}

    И не забывайте пробелы после фигурных скобок, двоеточий и запятых:

    • Плохо
      .block{
  padding:20px;
  font:16px/1.4 Arial,sans-serif;
  color: teal;
}
    • Хорошо
      .block {
  padding: 20px;
  font: 16px/1.4 Arial, sans-serif;
  color: teal;
}

    Для проверки форматирования кода можно использовать stylelint.