You've got a sneaking suspicion that design impacts performance. What next? Your engineers know nothing about design and your designers know nothing about performance. How can you get everyone on the same page? Which design flaws must you absolutely avoid? How do engineers slow designs with poor CSS? This presentation covers the best practices in design and OO CSS for fast, maintainable sites.
* Abstraction
* Flexibility
* Grids
* Location dependent styles
Velocity Conference, 2009
5. GOOD NEWS
CSS and front-end architecture have a huge impact on
performance.
6. AND BAD
NEWS
If I don’t do my job right, I can slow your site down to a crawl
7. Web Dev Philosophy
• Work out of respect for the design.
• Designers make our code as beautiful and
clever on the outside as it is on the inside.
• Respect the original design vision.
consistent design = clean code = fast site.
36. BUILD HTML FROM THE
COMPONENT LIBRARY.
New pages should not generally require additional CSS
37. Heading Level 1
Heading Level 2
HEADINGS Heading Level 3
Getting the look and feel you
want with the semantics you Heading Level 4
need.
Heading Level 5
Heading Level 6
38. Default List ‣ Toggle List
List Item 2 ‣ List Item 2
List Item 3 ‣ List Item 3
LISTS ❖ Action List
❖ List Item 2
Should be available to all ❖ List Item 3
modules on the page.
57. A Heading should not become a Heading
in another part of the page.
58. AVOID
EXAMPLE
#weatherModule h3{color:red;}
#tabs h3{color:blue}
❖ Global color undefined for h3, so it will be
‣ unstyled in new modules,
‣ developers forced to write more CSS for the same style
59. AVOID
EXAMPLE
h3{color:black;}
#weatherModule h3{color:red;}
#tabs h3{color:blue}
❖ Global color defined (better!)
❖ Weather and tabs override default h3
‣ three styles for h3 cannot co-exist in the same module
‣ default style cannot be used in weather and tabs without costly
overrides
❖ Weather and tabs h3 can never be used outside of those
modules
60. CONSISTENCY
Writing more rules to
overwrite the crazy rules from
before.
e.g. Heading should behave
predictably in any module.
62. NEED MORE THAN 6
HEADINGS?
Really? Any duplicates? Any too similar?
63. STILL NEED MORE
HEADINGS?
.category{...}
.section{...}
.product{...}
.prediction{...}
❖ Extend the heading object via a class on the object itself
❖ Avoid using the cascade to change display of nested objects
68. Media
Subheading
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
image
or flash OPEN EDITABLE ZONE
71. Contour blocks Background blocks Content Objects -
headings, paragraphs, lists, headers,
footers, buttons, etc.
Capital of the Canterbury region and the largest city
on the South Island (population just over 300,000)
exudes a palpable air of gentility and a connectedness
with the mother country.
Read more...
X X
1:n
77. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
EXAMPLE: MODULE
78. mod
block
inner
hd
STRUCTURE
Solves browser bugs, positions bd
presentational elems, and
generally does the heavy lifting
of CSS.
ft
79. mod
block
inner
hd
STRUCTURE
Solves browser bugs, positions bd
presentational elems, and
generally does the heavy lifting
of CSS.
ft
82. SKIN
Makes it pretty.
The goal is very predictable
skins, complexity is absorbed
by the structure object and
shared across the site.
83. /* ----- simple (extends mod) ----- */
.simple .inner {
border:1px solid gray;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
.simple b{
*background-image:url(skin/mod/corners.png);
}
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu
84. WHAT BELONGS IN THE
SKIN?
Every value in the skin should be predictable, something that
can easily be calculated or measured.
Colors
Borders
Images
101. TEMPLATE
• 807 bytes
• 13 lines of code
• easily
extended to custom
page and column width
102. GRIDS
• 574 bytes
• 14 lines of code
• Percentage widths adapt to
different page sizes
• Includes halfs, thirds, fourths, and
fifths
• No gutters
• Infinite nesting and stacking
103. MODULE
• 1.3K (structure)
• 22 lines of code
• Width and height agnostic
• Three structures
• 264 different combos of
skins
106. 1. Remove right column
http://wiki.github.com/stubbornella/oocss
107. 1. Remove right column
2. Change left
column width
to 300px
http://wiki.github.com/stubbornella/oocss
108. 1. Remove right column
2. Change left
column width
to 300px
3. Save as myPage.html
http://wiki.github.com/stubbornella/oocss
109. hint: simply delete
hint: add one the right column
class to the left
1. Remove right column
column
2. Change left
column width
to 300px
3. Save as myPage.html
http://wiki.github.com/stubbornella/oocss
112. 1. Add four 1/4 grids inside the main column
1/4 1/4 1/4 1/4
http://wiki.github.com/stubbornella/oocss/grids
113. hint: copy grids from
the docs and modify
the size and number of
units
1. Add four 1/4 grids inside the main column
1/4 1/4 1/4 1/4
http://wiki.github.com/stubbornella/oocss/grids