Audit stylesheets
Goal
Bring sanity and direction to how we handle styles.
Most of our styles are controlled at the component level with my.component.ng.scss
files. No changes need to be made here.
Some older components have stylesheets that use the .scss
suffix instead of .ng.scss
and require a complete rebuild in order for any changes to be displayed in the browser. These ones don't use the :host
decorator and therefore don't enforce the styles defined within to be contained within their component. (See front/src/app/modules/comments/comments.component.scss).
There are also a handful of stylesheets that are maintained at other (non-component-level) locations and cascade down into components. For example, front/src/app/foundation and front/src/app/stylesheets. If we are going to use these, we need to do so consistently and everyone needs to know about it.
There are also instances of components using classes of other components that have since been retired (e.g. .m-topbar--navigation
classes are used in the admin module even though that topbar component is no longer used).
The lack of orderliness makes it inefficient to make changes older components without .ng.scss suffixes, hard to debug which sheet is overriding which, hard to predict what something is going to look like, hard to restrict scope of changes without knowing what else might be affected.
What needs to be done
-
Cleanup styles from one component's .scss file creeping into other components (e.g. comments) -
Decide if it's worth it to convert .scss files to .ng.scss (see how many are there, how many utilize classes outside of :host
scope) -
If it is worth it, do it. -
Consider strategies moving forward with regard to higher level cascading stylesheets -
Communicate and document findings
QA
Visual testing to confirm no changes
UX/Design
N/A
Personas
Developers
Experiments
N/A
Acceptance Criteria
-
Stylesheet-related anomalies and disorder reduced -
Findings communicated to team -
Findings added developer docs if necessary -
Top-level re-usable styles added to storybook if useful
Definition of Ready Checklist
-
Definition Of Done (DoD) -
Acceptance criteria -
Weighted -
QA -
UX/Design -
Personas -
Experiments