Как минимизировать постоянно меняющиеся изменения стиля сайта с помощью AngularJS

Question

Я действительно хочу минимизировать работу по изменению внешнего вида на моем сайте / портале. Изменения иногда связаны только с CSS, который иногда хочет, чтобы я обновил имя классов, и в большинстве случаев обновляются только внутренние стили (только в этом случае изменения прозрачны). Но настоящая пытка наступает, когда я узнаю, что есть изменения в структуре HTML нового руководства по стилю, и после того, как все приложение / виджеты должны быть обновлены и выровнены в соответствии с новым руководством по стилю.

Технологии, используемые в приложении: AngularJS, Bootstrap 3

Теперь, пожалуйста, предложите, что было бы наилучшим способом минимизировать эти изменения в руководстве по стилю? Может AngularJS поможет мне в этом?

Спасибо,

Jaffy

Answer 1

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

Что вам нужно, это 2 вещи:

1. Если вы используете Foundation или Bootstrap, вы должны использовать их файлы SASS/LESS и переопределить стили таким образом, если требования к пользовательскому интерфейсу изменяются, например: background-color, или жеborder-radius для определенных компонентов, вам нужно только перейти к надлежащему .scss или же .less файл и изменить значение переменной

Вы можете импортировать версию sass, используя

bower install bootstrap-sass-official --save

Затем настройте ваш grunt/gulp или любого другого сборщика задач, например, для создания sass, и вы можете переопределить переменные начальной загрузки.

2. Соглашение об именовании ваших компонентов и знание OOCSS (объектно-ориентированного CSS). Я рекомендую вам использовать BEM, его очень легко прочитать, когда вы поймете соглашение, и очень поможет с возможными проблемами специфичности CSS.

Я надеюсь, что это поможет, в противном случае, пожалуйста, обновите свой ответ больше, чтобы понять, где вы стоите.