Форматировать код хорошо и правильно. Здорово когда это происходит по определённым законам, принятым большинством разработчиков отрасли.
В CSS существуют де-факто общепринятый стандарт, который формализовали и описали ребята из гугла → https://google.github.io/styleguide/htmlcssguide.html и всё в их гайде здорово и приятно кроме предложения располагать цсс-свойства в алфавитном порядке.
У меня вошло в привычку группировать свойства по назначению.
display
. Если работаю с флекс-контейнером, то следом описываю его свойства.padding
, border
, margin
.position
, top
, right
, bottom
, left
. Смещение элемента описываю против часовой стрелки, примерно так же, как это указывается у полей и отступов.font
, line-height
, text-decoration
, text-transform
, color
. Свойств, управляющих текстом, конечно, намного больше, я указал лишь некоторые для примера.box-shadow
, background
, transform
, transition
и др.Пример описания блока:
.content-frame {
display: block;
padding: 0 12px;
border: 1px solid #333;
margin: 16px 0 32px;
position: relative;
left: −4px;
font: 300 18px/24px Helvetica, sans-serif;
color: #333;
background: #eee;
box-shadow: 0 2px 2px rgba(0,0,0,0.12);
}
Сортирую подобным образом свойства я уже года три. Когда поделился способом в комментариях на одном ресурсе, мне сказали, что нечто похожее рекомендует «Вордпресс» https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/#property-ordering. Ну что же неудивительно, что разные люди приходят ко схожим выводам.
Пост опубликован 16 сентября 2020 года в 19:00