Some code is written both in SCSS and Typescript. Which could lead to changes in one not applied in the other and some things to not work as intended.
Items to sync
Animations
CSS ones are preferred, but some can't be done with just CSS. So Angular animations are coded in Typescript.
Impact if out of sync
Animations timings and easing functions need to be in sync for a harmonic user experience
Detection
Currently, nothing is set to detect if they get out of sync
Layout breakpoints
Some CSS layouts depend on breakpoints. Also, responsive images depend on those for proper responsive image breakpoints generation. They need to be in sync with layout, hence with those layout breakpoints so that proper responsive image breakpoints can be generated.
Impact if out of sync
Responsive image breakpoints won't be generated according to image sizes
Detection
Fortunately, Lighthouse would detect issues when breakpoints aren't right enough
Responsive images size
They're coded in CSS styles (in vw mainly). But those values are also needed in component code to generate responsive image breakpoints accordingly.
Impact if out of sync
Responsive image breakpoints won't be generated according to image sizes
Detection
Fortunately, Lighthouse would detect issues when breakpoints aren't right enough
Ideas
Try moving everything to component code. Which is prerendered, so would end up as static inline CSS anyway. Doesn't apply for animations though
SCSS to JSON. Or something like that. To export variables from SCSS for reuse inside the app components code.
davidlj95
commented
7 months ago
Description
Some code is written both in SCSS and Typescript. Which could lead to changes in one not applied in the other and some things to not work as intended.
Items to sync
Animations
CSS ones are preferred, but some can't be done with just CSS. So Angular animations are coded in Typescript.
Impact if out of sync
Animations timings and easing functions need to be in sync for a harmonic user experience
Detection
Currently, nothing is set to detect if they get out of sync
Layout breakpoints
Some CSS layouts depend on breakpoints. Also, responsive images depend on those for proper responsive image breakpoints generation. They need to be in sync with layout, hence with those layout breakpoints so that proper responsive image breakpoints can be generated.
Impact if out of sync
Responsive image breakpoints won't be generated according to image sizes
Detection
Fortunately, Lighthouse would detect issues when breakpoints aren't right enough
Responsive images size
They're coded in CSS styles (in
vwmainly). But those values are also needed in component code to generate responsive image breakpoints accordingly.Impact if out of sync
Responsive image breakpoints won't be generated according to image sizes
Detection
Fortunately, Lighthouse would detect issues when breakpoints aren't right enough
Ideas