24. YOUR CSS CAUSES LOTS
OF PERF ISSUES
❖ It blocks progressive rendering
❖ It pulls in background images
❖ It correlates directly to render speed
❖ It causes janky scrolling and animations
48. HOW WE COMPILE
❖ JSON ﬁle that references components (we don’t love this bit)
❖ @import component Sass ﬁles
❖ Watchers set up to automatically build all the docs whenever
49. WE’LL FOCUS ON THE
You are probably comfortable with templating, watchers, build
processes, so we’ll focus on building our styles effectively.
51. MY BOX NEEDS CLEARFIX
so let’s create a mixin and see how it affects the output.
52. WHAT DO MIXINS DO TO
Property value pairs are copied throughout the stylesheet
80. MAKE IT EASIER TO DO
THE RIGHT THING THAN
THE WRONG THING
People will have a tendency to go back to “views” based CSS,
unless they have been shown another way
81. TAKE AWAYS:
❖ This was clearly a group effort, these metrics improved
because of design, style guide, Sass, UI layer improvements, and
server side cleanup
❖ Sass can be made to be performant when effectively
combined with OOCSS for architecture and styleguides for
❖ Most importantly, the team is enjoying working on the UI
code.They feel ownership, and want to improve it.
❖ Good performance is a feature!