Инструменты и методы для рефакторинга CSS

Question

Мне нужно сделать это в более общем плане, но хорошим примером является мое два меню. У меня есть два класса меню, horizontal-menu и vertical-menu и два набора правил для таких элементов, как ul, li и a под этими классами. Многие из этих правил имеют общие черты, такие как значение color для элементов a. Я хотел бы реорганизовать общие правила и значения в «суперкласс» под названием menu, и они имеют только переопределяющие значения в классах horizontal-menu и vertical-menu. Есть ли инструмент (помимо инструмента, задающего этот вопрос), который может помочь мне в этом?

Answer 1

Лучшим инструментом для такого рода проблем является Compass, структура для определения правил, которые затем скомпилированы в css для использования в производстве. Он позволяет определять переменные во многом так же, как императивный язык.

В нем также есть другие полезные понятия, например mixins, которые позволяют определять набор свойств css, которые будут регулярно использоваться вместе, чтобы вы могли включить этот блок свойств в несколько стандартных правил CSS. Сила, заключающаяся в том, что вы можете затем отредактировать этот mixin в одном месте, изменив свойства и изменив это изменение на любое правило CSS, в котором использовался mixin.

я обнаружил, компас, и узнал, как оно должно быть использовано спасибо, чтобы a screencast по Chris Coyier на CSS Tricks

Единственная проблема в этом случае (и в большинстве случаев на самом деле), что вы действительно должны начать с нуля Compass, или найти способ интегрировать свой рабочий поток в существующий.

Answer 2

Вы можете сделать csscss выстрел. Я написал это, чтобы иметь представление о том, насколько я повторяюсь в своих собственных таблицах стилей. Я явно предвзято, но многие люди тоже сочли это полезным. Поддержка SASS, LESS и Compass испечена.

Еще один отличный инструмент - helium который является javascript инструментом, который запускается в браузере и позволяет вам узнать о любых неиспользуемых правилах.