Каким плагином упорядочить стили в WebStorm?

Question

[Aleaxander Burykin]

Интересует нативное решение или плагин, который позволит комбинацией клавиш, изменить расстановку свойств в .sass файле, или в выделеном фрагменте кода по приоритету

Свойства, сильнее влияющие на документ, идут первыми
Рекомендуется располагать свойства в следующем порядке:

• Сначала положение элемента относительно других: position, left/right/top/bottom, float, clear, z-index.
  
• Затем размеры и отступы: width, height, margin, padding…
  
• Рамка border, она частично относится к размерам.
  
• Общее оформление содержимого: list-style-type, overflow…
  
• Цветовое и стилевое оформление: background, color, font…
  

Взято с learn.javascript.ru

Если такого нет, было бы интересно, послушать, сложно ли написать что то подобное, если был опыт, или подходящие ресурсы, буду рад всему

Comments

[Сергей delphinpro]

Алфавит универсален, объективен, исключает разночтения отдельных разработчиков (никто не будет спорить, что padding должен располагаться после align-items). Алфавитная сортировка может быть легко автоматизирована. Все остальные "рекомендации" - это сугубо личные предпочтения отдельных девелоперов и могут кардинально различаться у каждого из них.
Почему рекомендуется сначала располагать позиционирующие свойства? Я, например, сначала задаю внешний вид элемента (шрифты, цвета и т.п.), а уже потом его "вписываю" в страницу (по принципу независимых блоков). И вот уже возник спорный момент в сортировке свойств "по смыслу".

[Сергей delphinpro]

MaxKorz: =) моему "чувству сортировки" глубоко пофиг в каком порядке идут свойства. Но если я правлю чужой код, в котором описание селектора содержит пару десятков строк, то мне было бы удобнее и быстрее найти нужное свойство по алфавитному порядку, а не гадать, какими соображения руководствовался автор, группируя определения. Именно в этом заключается мой месседж - предпочтения субъективны, алфавит - один для всех.
Только один хрен всё это не имеет никакого значения. Как бы ни были отсортированы свойства - все равно поиск любого вряд ли займет у вас более полусекунды-секунды. Мелочь. Фигня. Отсюда вопрос - нафига вообще их сортировать/группировать?

[Сергей delphinpro]

MaxKorz: я кажется выше уже написал - мне удобнее упорядоченные списки. по алфавиту =) Но я также уточнил, что по большому счету это мизерная разница и она не имеет особого значения.
А давай взглянем на ситуацию под другим углом. Пусть будет какой-то проект средней паршивости. Не задрипанная визитка, а какой-то более или менее развивающийся сайт с длительной поддержкой и есть я - пришедший новый разработчик или даже нанятый фрилансер на разовые доработки. Как мне догадаться в какую группу вставить новое свойство, которое еще не определено в данном селекторе? Правильный ответ - прочитать стайлгайд по написанию стилей в данном проекте. Но мы-то помним, что проект - средней паршивости, никто там никаких стайлгайдов не писал и не собирается. А гадить в коде тоже не хотелось бы. В итоге имеем красиво написанный код, который постепенно превращается в гавно. И это не вымышленный пример, это суровая реальность. Для меня вывод очевиден - не стоит идти на поводу собственных хотелок, чем проще правила, тем легче их придерживаться.

[Сергей delphinpro]

т.к. top, left, bottom, right, position - все свойства сильно разбросаны и невозможно с первого взгляда сразу сказать, как спозиционирован элемент.

@include stretchAtBottom(); =))

Answer 1

[Александр Лысенко]

Попробуйте использовать csscomb, подробнее тут

Comments

[Богдан]

Уже везде говорят что csscomb умирающий проект. Поэтому использование его непреспективно

The tool is no longer being developed though we may still fix parsing errors and critical bugs.
That means that you should not expect any new features or options.

[Александр Лысенко]

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

[Богдан]

AlexanderZe: Сам искал и не нашел. Поэтому отказался от реализации этой идеи. Лучше как бы не внедрять инструмент который в последствии станет костылем в плане того что совместимости с новыми продуктами у него не будет

[Александр Лысенко]

bogdan_uman: Когда CSSComb только появлялся, сам инициатор идеи высказался, что подобный подход актуален для больших команд, где поддержка кода ведется сразу несколькими людьми. Логично, что искать необходимое свойства удобнее на привычном месте, а не где попало. Таким образом можно сделать вполне закономерный вывод — это причесывание это просто вопрос удобства. Достаточно один раз для себя определить где что будет стоять и все.