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/

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