К Оптимусу Прайму. Сортировка CSS свойств по алфавиту
В выступлении о пользе, смелости и счастье Таня Бибикова рассказывает о письме к Тиффани Шлейн. Таня не знала, что делать со своей жизнью и работой, и решила спросить совета у Тиффани. Письмо она так и не отправила, но со своей жизнью разобралась.
Привет, дорогой Оптимус Прайм.
Если ты еще не знаешь, то меня зовут Васюша. Из наших курских ребят я твой самый большой фанат. Ты самый добрый и мудрый во вселенной, поэтому точно поможешь с моей проблемой.
Ты, наверное, читал в интернете о CSS и знаешь, что они состоят из селекторов и наборов свойств:
селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}
Я никак не определюсь, в каком порядке свойства записывать.
Зачем им порядок? Затем, что порядок облегчает доступ к нужным свойствам и предотвращает ошибки:
.score {
position: relative;
float: left;
margin: 13px 0;
vertical-align: middle;
background-color: #fff;
border-radius: 20px;
z-index: 10;
font-size: 12px;
text-align: center;
line-height: 14px;
}
Чтобы найти z-index
надо прочитать 6 строчек. Если дописать font-size: 16px
в начало блока и не заметить font-size: 12px
ниже, то размер шрифта будет 12 пикселей, а не 16.
Если свойства отсортировать по алфавиту, эти проблемы исчезнут. z-index
будет в конце списка, а дублирующиеся свойства на соседних строчках:
.score {
background-color: #fff;
border-radius: 20px;
float: left;
font-size: 12px;
font-size: 16px;
line-height: 14px;
margin: 13px 0;
position: relative;
text-align: center;
vertical-align: middle;
z-index: 10;
}
Так сортировать свойства просто: 10 из 10 моих знакомых знают английский алфавит; 10 из 10 пользователей Саблайма способны нажать F5, чтобы отсортировать блок свойств по алфавиту.
При такой сортировке не нужно думать. Вообще. Поэтому она отлично подходит пишущим, но не понимающим, CSS ребятам.
Что не так с сортировкой по алфавиту, чем она меня смущает? Она не помогает с чтением стилей: чтобы понять, как блок расположен, приходится читать все свойства.
Кроме того, сортировка по алфавиту затрудняет работу со связанными свойствами: width
и height
, position
и left
слишком далеко друг от друга. Придется скакать от строчки к строчке, чтобы переместить абсолютно спозиционированный блок.
Ну, все, я заканчиваю писать свое первое письмо. Что скажешь, Оптимус? Как тебе сортировка по алфавиту? Что использовали на Кибертроне?
P. S. Когда ты снова будешь сниматься в нормальном кино?
P. S. Ещё больше постов о программировании, тестах и культуре разработки у меня в Телеграме.