Разные логические способы группировки CSS-свойств

От автора: много я стилей настрочил. Скажу сразу, что своего собственного мнения по поводу сортировки свойств у меня не было. Я просто добавляю, что мне нужно. Я думаю, что мои стили в конечном итоге в значительной степени «группируются» по общим признакам, потому что именно так мой мозг разбил их.

Есть такой CSS:

Хотя я и не особо против «рандомного» устройства (никакой логики в структурировании стилей), я вижу аргументы против него. Если в коде будет дубликат, его будет сложно найти, а также придется попотеть при отладке. Сейчас я подумал об этом и понял, что со мной это происходило очень часто.

Также скажу, что у меня есть свой стиль написания. Типа двойного пробела, пробела перед открывающей скобкой, одного пробела после запятой и т.д. Но это уже другая статья.

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

По алфавиту

Перестроим стили по алфавиту:

Теперь в стилях есть определенная логика. Если вы ищите свойство opacity, вы можете быстро пробежаться по коду до буквы О. Необходимо полностью доверять алфавитной сортировке, в чем я вижу призыв.

Jerry Low большой защитник: «Алфавитный порядок универсально понятен. Большинство людей могут сортировать вещи по алфавиту без перегрузки мозгов… Из основных плюсов алфавитной сортировки CSS-свойств можно выделить скорость и недвусмысленность. Но лично для меня самый большой плюс это то, что здесь не нужно ничего изучать.»

Часть свойств группируется естественным образом. Обратите внимание, что свойства font и transform объединены просто по своему именованию. Чисто случайно свойства flexbox идут друг за другом, но пропускаются filter и fill. Что-то, что по логике вещей должно идти друг за другом, например, margin и padding, идет в разнобой. И это ведет нас к…

Группировка по типу

Мы уже поняли, что группировка по «типу» отчасти работает сама по себе при соблюдении алфавитного порядка. Тем не менее, в такой структуре будет много исключений, так почему бы не сгруппировать свойства по тому, что они делают, а не по тому, как они называются. Я написал слово «тип» в кавычках, потому что группировка по типу – это полностью наше мнение, это не семантическая и не программная концепция.

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

Тогда возникает вопрос: как сортировать группы типов? В какой тип что пойдет? Как сортировать свойства внутри типов? На эти вопросы не обязательно отвечать, это просто пища для размышления.

Michael Arestad не особо заботится о том, как вы сортируете свойства, и он говорит: «Обычно люди хорошо группируют свойства по позиционированию, бокс модели и шрифтам и без обучения.»

Но он дает четко понять, что просто «читаемости» не достаточно в споре: «Легкость чтения для меня не аргумент. Ее легко сбить, так как нас волнует только легкость нахождения свойства. Это так же легко с методами, и чаще всего, по моему опыту, начинается в браузере.»

Группировка по длине

Хотите кое-что странное? Вот так делает гораздо больше людей, чем вы думаете:

Не хочу показаться грубым и называть чей-то стиль кода странным, но для меня смысла в этой сортировке нет. Кроме аккуратности у такой структуры нет плюсов. Однако минусов очень много. Например, смена значения может повлечь за собой пересортировку.

CSS Comb

Стоит упомянуть CSS Comb, проект организующий CSS-свойства.

Инструмент с большим количеством настроек. Можно пройти настройку из 24 шагов, чтобы код был точно таким, как вы хотите. Вот это мне нравится. Я только что создал свой конфиг и буду использовать его. Сервис смотрится еще более привлекательно в командной работе. Так вы получаете преимущества логической сортировки (если она есть!), а также последовательный и принудительный стиль кода без усилий.

Также есть PostCSS plugin. Не забывайте, что не важен конечный результат с обрабатываемым CSS-файлом, мы говорим об обработке наших стилей. Все происходит внутри IDE.

Другие способы сортировки

Знаете другие способы сортировки свойств? Может, «по последнему добавленному»? Сортировка по вашим предпочтениям?! Какие свойства для вас важны??!!

Автор: Chris Coyier

Источник: //mediatemple.net/

Редакция: Команда webformyself.

Комментарии Вконтакте: