CSMess to OOCSS: Refactoring CSS with Object Oriented Design

Ask any web developer: the most neglected part of their site/app is likely its CSS. Unlike other parts of the stack, most CSS is messy, complex, and long overdue for a rewrite. But it doesn’t have to be. Break out of these bad patterns by applying an object oriented CSS framework (OOCSS).

This talk will step through the process of designing, building, and implementing a custom OOCSS framework for a mid-sized web application, outlining the basic methodology, best practices, and expected outcomes, which include significant gains in both front-end performance as well as developer productivity.

Written transcript:
http://blog.kate-travers.com/how-oo-design-saved-our-css-and-site-performance/

Transcript

1. CSMESS TO OOCSS Refactoring CSS With Object Oriented Design
2. Kate Travers // kate@flatironschool.com // @kttravers // github: ktravers
4. Modular Encapsulated Maintainable OBJECT ORIENTED DESIGN
5. └── assets └── stylesheets ├── admissions │ ├── index.scss │ └── show.scss ├── lessons │ ├── index.scss │ └── show.scss ├── shared │ ├── _fonts.scss │ ├── _vars.scss │ ├── _mixins.scss │ ├── footer.scss │ ├── header.scss │ └── nav.scss ├── application.scss ├── admissions.scss ├── lessons.scss ├── shared.scss etc...
6. #lesson-show { position: fixed; width: auto; top: 10px; left: 80px; z-index: 10; .title { margin-top: 0; vertical-align: middle; } .btn-row { line-height: 1; padding-left: 15px; background-color: $light-gray; margin-bottom: 4px; margin-left: 8px; } /* etc... */ } └── assets └── stylesheets ├── admissions │ ├── index.scss │ └── show.scss ├── lessons │ ├── index.scss │ └── show.scss ├── shared │ ├── _fonts.scss │ ├── _vars.scss │ ├── _mixins.scss │ ├── footer.scss │ ├── header.scss │ └── nav.scss ├── application.scss ├── admissions.scss ├── lessons.scss ├── shared.scss etc...
7. └── assets └── stylesheets ├── admissions │ ├── index.scss │ └── show.scss ├── lessons │ ├── index.scss │ └── show.scss ├── shared │ ├── _fonts.scss │ ├── _vars.scss │ ├── _mixins.scss │ ├── footer.scss │ ├── header.scss │ └── nav.scss ├── application.scss ├── admissions.scss ├── lessons.scss ├── shared.scss etc... LEARN_V1 NATIVE 213 stylesheets 1.3 MB VENDOR 116 stylesheets 848 KB TOTAL 329 stylesheets 2.1 MB
8. MODULAR ENCAPSULATED MAINTAINABLE
9. MODULAR ENCAPSULATED MAINTAINABLE
10. MODULAR Coupled to single view ENCAPSULATED MAINTAINABLE
11. MODULAR Coupled to single view Too brittle / specific to re-use ENCAPSULATED MAINTAINABLE
12. MODULAR Coupled to single view Too brittle / specific to re-use ENCAPSULATED MAINTAINABLE
13. MODULAR Coupled to single view Too brittle / specific to re-use ENCAPSULATED Specificity wars MAINTAINABLE
14. MODULAR Coupled to single view Too brittle / specific to re-use ENCAPSULATED Specificity wars Unpredictable behavior MAINTAINABLE
15. MODULAR Coupled to single view Too brittle / specific to re-use ENCAPSULATED Specificity wars Unpredictable behavior MAINTAINABLE
16. MODULAR Coupled to single view Too brittle / specific to re-use ENCAPSULATED Specificity wars Unpredictable behavior MAINTAINABLE Writing new CSS for every view
17. MODULAR Coupled to single view Too brittle / specific to re-use ENCAPSULATED Specificity wars Unpredictable behavior MAINTAINABLE Writing new CSS for every view Difficult to onboard new team members
18. SOLUTION?
20. OFF-THE-SHELF ROLL YOUR OWN
21. OFF-THE-SHELF ROLL YOUR OWN Heavy
22. OFF-THE-SHELF ROLL YOUR OWN Heavy Lightweight
23. OFF-THE-SHELF ROLL YOUR OWN Heavy Lightweight
24. OFF-THE-SHELF ROLL YOUR OWN Heavy Lightweight Override-able
25. OFF-THE-SHELF ROLL YOUR OWN Heavy Lightweight Override-able Extensible
26. OFF-THE-SHELF ROLL YOUR OWN Heavy Lightweight Override-able Extensible
27. OFF-THE-SHELF ROLL YOUR OWN Heavy Lightweight Override-able Extensible Third-party maintainers
28. OFF-THE-SHELF ROLL YOUR OWN Heavy Lightweight Override-able Extensible Third-party maintainers Internally maintained
29. OFF-THE-SHELF ROLL YOUR OWN Heavy Lightweight Override-able Extensible Third-party maintainers Internally maintained
30. CASE STUDY: Flatiron School’s Learn CSS Framework
31. ROADMAP
32. 1. Take visual inventory of app’s UI/UX ROADMAP
33. 1. Take visual inventory of app’s UI/UX 2. Build component OOCSS library ROADMAP
34. 1. Take visual inventory of app’s UI/UX 2. Build component OOCSS library 3. Rewrite CSS and markup ROADMAP
35. 1. Take visual inventory of app’s UI/UX 2. Build component OOCSS library 3. Rewrite CSS and markup 4. Onboard your team ROADMAP
36. STEP 1: Visual Inventory
39. header section main section sidebar section
41. multi-part container with borders and white background
43. multi-part container with text sitting next to media
45. circular object with image
46. STEP 2: COMPONENT LIBRARY STEP 2: Component Library
47. .site-header .site-sidebar .site-main LAYOUT COMPONENTS .site-subheader .site-banner
48. .site-header .site-sidebar .site-main LAYOUT >> CONTAINER COMPONENTS .site-subheader .site-banner .module .media-block .media-block .media-block .media-block
49. .site-header .site-sidebar .site-main LAYOUT >> CONTAINER >> OBJECT COMPONENTS .site-subheader .site-banner .module .media-block .media-block .media-block .media-block .image .text-block .button
50. .site-header .site-sidebar .site-main LAYOUT >> CONTAINER >> OBJECT >> GLOBAL COMPONENTS .site-subheader .site-banner .module .media-block .media-block .media-block .media-block .image .text-block .button.util--pull-right
51. Modular components defined through strong naming conventions
52. Compartmentalized Portable MODULAR COMPONENTS
53. Compartmentalized Limited/single responsibility Portable MODULAR COMPONENTS
54. Compartmentalized Limited/single responsibility Complexity through combination Portable MODULAR COMPONENTS
55. Compartmentalized Limited/single responsibility Complexity through combination Portable Interchangeable from view to view MODULAR COMPONENTS
56. Compartmentalized Limited/single responsibility Complexity through combination Portable Interchangeable from view to view Components don’t affect parent or relative styles MODULAR COMPONENTS
57. STRONG NAMING CONVENTIONS
58. Generic class names STRONG NAMING CONVENTIONS
59. Generic class names Semantic syntax STRONG NAMING CONVENTIONS
60. BEM SYNTAX .block__element--modifier
61. /* Block component */ .list /* Child element of parent block */ .list__card /* Modifier that changes the style of the block */ .list--accordion .list--spacing-large
62. └── assets └── stylesheets ├── layout │ ├── site-header.scss │ ├── site-footer.scss │ └── site-main.scss ├── containers │ ├── list.scss │ ├── media-block.scss │ └── module.scss ├── objects │ ├── button.scss │ ├── image-frame.scss │ └── input.scss ├── global │ ├── special.scss │ ├── typography.scss │ └── vars.scss └── application.scss
63. STEP 3: Rewrite
64. multi-part container with text sitting next to media
65. .media-block--side-alt .media-block--dual-media .media-block--side-alt .media-block MEDIA BLOCK
66. /* * Overall Rules */ .media-block { display: table; } /* * Local Descendants */ .media-block__content { display: table-cell; vertical-align: middle; } .media-block__media { display: table-cell; vertical-align: middle; padding-right: $content-spacing; }
67. /* * Overall Rules */ .media-block { display: table; } /* * Local Descendants */ .media-block__content { display: table-cell; vertical-align: middle; } .media-block__media { display: table-cell; vertical-align: middle; padding-right: $content-spacing; } .media-block .media-block__content .media-block__media
68. /* * Overall Rules */ .media-block { display: table; } /* * Local Descendants */ .media-block__content { display: table-cell; vertical-align: middle; } .media-block__media { display: table-cell; vertical-align: middle; padding-right: $content-spacing; } <!-- Start by outlining the basic container + objects --> <div class="media-block"> <div class="media-block__media"> <!-- circle with user’s profile picture --> </div> <div class="media-block__content"> <!-- text object: user name --> <!-- text object: time ago --> <!-- text object: action completed by user --> </div> </div>
69. /* * Overall Rules */ .media-block { display: table; } /* * Local Descendants */ .media-block__content { display: table-cell; vertical-align: middle; } .media-block__media { display: table-cell; vertical-align: middle; padding-right: $content-spacing; } <!-- Start by outlining the basic container + objects --> <div class="media-block"> <div class="media-block__media"> <!-- circle with user’s profile picture --> </div> <div class="media-block__content"> <!-- text object: user name --> <!-- text object: time ago --> <!-- text object: action completed by user --> </div> </div>
70. /* * Overall Rules */ .media-block { display: table; } /* * Local Descendants */ .media-block__content { display: table-cell; vertical-align: middle; } .media-block__media { display: table-cell; vertical-align: middle; padding-right: $content-spacing; } <div class="media-block"> <div class="media-block__media"> <!-- image container that adds circle border radius --> <div class="image-frame image-frame--border-radius-full"> <!-- image object --> <img class="image-frame__image" src="img.png"/> </div> </div> <div class="media-block__content"> <!-- text object: user name --> <!-- text object: time ago --> <!-- text object: action completed by user --> </div> </div>
71. /* * Overall Rules */ .media-block { display: table; } /* * Local Descendants */ .media-block__content { display: table-cell; vertical-align: middle; } .media-block__media { display: table-cell; vertical-align: middle; padding-right: $content-spacing; } <div class="media-block"> <div class="media-block__media"> <!-- image container that adds circle border radius --> <div class="image-frame image-frame--border-radius-full"> <!-- image object --> <img class="image-frame__image" src="img.png"/> </div> </div> <div class="media-block__content"> <!-- text object: user name --> <!-- text object: time ago --> <!-- text object: action completed by user --> </div> </div>
72. /* * Overall Rules */ .media-block { display: table; } /* * Local Descendants */ .media-block__content { display: table-cell; vertical-align: middle; } .media-block__media { display: table-cell; vertical-align: middle; padding-right: $content-spacing; } <div class="media-block"> <div class="media-block__media"> <div class="image-frame image-frame--border-radius-full"> <img class="image-frame__image" src="img.png"/> </div> </div> <div class="media-block__content"> <!-- .heading is an text object component --> <!-- can be applied to text and non-text DOM elements --> <span class="heading heading--level-5">Brent...</span> <span class="heading heading--level-6">5 min ago</span> <h5 class="heading heading--level-5">Built...</h5> </div> </div>
73. /* * Overall Rules */ .media-block { display: table; } /* * Local Descendants */ .media-block__content { display: table-cell; vertical-align: middle; } .media-block__media { display: table-cell; vertical-align: middle; padding-right: $content-spacing; } <!-- End product: encapsulated, reusable block of markup --> <!-- Ready to drop into any view --> <div class="media-block"> <div class="media-block__media"> <div class="image-frame image-frame--border-radius-full"> <img class="image-frame__image" src="img.png"/> </div> </div> <div class="media-block__content"> <span class="heading heading--level-5">Brent...</span> <span class="heading heading--level-6">5 min ago</span> <h5 class="heading heading--level-5">Built...</h5> </div> </div>
74. But what about your JAVASCRIPT?
75. BEM SYNTAX .js--<whatever>
76. STEP 4: Onboarding
77. PHASE 1
78. New stylesheets and markup shipped behind feature flag PHASE 1
79. New stylesheets and markup shipped behind feature flag Training session on BEM syntax, OOCSS basics PHASE 1
80. PHASE 2
81. QA testing: feature turned on for select user groups PHASE 2
82. QA testing: feature turned on for select user groups Training session on rewriting existing markup PHASE 2
83. QA testing: feature turned on for select user groups Training session on rewriting existing markup Identify & assign views for “hands-on learning” rewrites PHASE 2
84. PHASE 3
85. Launch: feature 100% live PHASE 3
86. Launch: feature 100% live Ship style guide with full framework documentation PHASE 3
87. Launch: feature 100% live Ship style guide with full framework documentation Pair with teammates as needed on new feature builds PHASE 3
88. CHALLENGES
89. SCOPE CREEP
90. Originally prototyped for 3 user-facing views SCOPE CREEP
91. Originally prototyped for 3 user-facing views Grew to cover ALL user-facing views SCOPE CREEP
92. Originally prototyped for 3 user-facing views Grew to cover ALL user-facing views Packaged with JS refactor SCOPE CREEP
93. NEOPHOBES
94. Comfortable doing things the “old way” NEOPHOBES
95. Comfortable doing things the “old way” Wary of new system NEOPHOBES
96. OUTLIERS
97. New designs introduce “one-off” elements OUTLIERS
98. New designs introduce “one-off” elements Push back on design/product OUTLIERS
99. New designs introduce “one-off” elements Push back on design/product Justify introduction of stylistic inconsistencies OUTLIERS
100. RESULTS
101. UX GAINS
102. Faster pageloads UX GAINS
103. Faster pageloads More consistent, cohesive UI UX GAINS
104. DEVELOPMENT GAINS
105. Ship faster DEVELOPMENT GAINS
106. Ship faster Fast, accurate prototyping DEVELOPMENT GAINS
107. Ship faster Fast, accurate prototyping Accessible, maintainable stylesheets DEVELOPMENT GAINS
108. PERFORMANCE GAINS
109. LEARN_V1 LEARN_V2 (OOCSS) NATIVE 213 stylesheets 31 stylesheets 1.3 MB 193 KB VENDOR 116 stylesheets 6 stylesheets 848 KB 49 KB TOTAL 329 stylesheets 37 stylesheets 2.1 MB 242 KB
110. LEARN_V1 LEARN_V2 (OOCSS) NATIVE 213 stylesheets 31 stylesheets 1.3 MB 193 KB VENDOR 116 stylesheets 6 stylesheets 848 KB 49 KB TOTAL 329 stylesheets 37 stylesheets 2.1 MB 242 KB
111. LEARN_V1 LEARN_V2 (OOCSS) TRACK#SHOW 262 ms 108 ms LESSON#SHOW 98 ms 48 ms PUBLIC_LESSON#SHOW 40 ms 21 ms
112. LEARN_V1 LEARN_V2 (OOCSS) TRACK#SHOW 262 ms 108 ms LESSON#SHOW 98 ms 48 ms PUBLIC_LESSON#SHOW 40 ms 21 ms
113. Kate Travers // kate@flatironschool.com // @kttravers // github: ktravers QUESTIONS?
114. Nicole Sullivan’s OOCSS https://github.com/stubbornella/oocss/wiki http://confreaks.tv/presenters/nicole-sullivan BEM Syntax https://css-tricks.com/bem-101/ https://en.bem.info/method/key-concepts/ RESOURCES