We keep thinking we can write better CSS if we just try harder, that the next site will be clean and stay that way. This presentation shows that in fact, messy CSS is the direct result of our worst best-practices. We need to reexamine those assumptions with an eye to practicality and scalability as well as accessibility, standards, and fabulous design.
19. FONT-SIZE
889
declarations changed the font-size
78% >10
23% >100
Wednesday, March 30, 2011
20. DOES THIS APPLY TO YOU?
Do your websites have the same issues? Workshop
Wednesday, March 30, 2011
21. SO, DUPLICATION IS A
PROBLEM AT:
❖ Facebook
❖ Salesforce
❖ w3c
❖ Box.net
❖ the Alexa Top 1000 sites
❖ Government websites
❖ Small and large businesses
Wednesday, March 30, 2011
22. INSANITY:
doing the same thing over and over
and expecting different results
Wednesday, March 30, 2011
23. STOP POINTING FINGERS
the truth is, we all have this problem
http://www.flickr.com/photos/illumiquest/2749137895/sizes/l/in/photostream/
Wednesday, March 30, 2011
24. “JAVASCRIPT DOESN’T SUCK
You’re just doing it wrong.” -- Douglas Crockford
Wednesday, March 30, 2011
25. CSS
“JAVASCRIPT DOESN’T SUCK
You’re just doing it wrong.” -- Douglas Crockford
Wednesday, March 30, 2011
26. ABOUT CSS
CSS (much like JS) will let
you do anything
(no matter how stupid)
wheeee!
Wednesday, March 30, 2011
27. THE POINT
IS...
That we don’t have to do
stupid things, just because
we can.
Wednesday, March 30, 2011
28. SO, WHAT ARE THE STUPID
THINGS?
Best Practice Myths
Wednesday, March 30, 2011
29. THREE BEST PRACTICE
MYTHS:
❖ Don’t add any extra elements
❖ Don’t add classes (Classitis! Ahhh!)
❖ Use descendent selectors exclusively
Wednesday, March 30, 2011
32. SPECIFICITY - THE SIMPLE
VERSION
elements
& pseudo elements
Wednesday, March 30, 2011
33. SPECIFICITY - THE SIMPLE
VERSION
classes elements
& pseudo classes & pseudo elements
& attributes
Wednesday, March 30, 2011
34. SPECIFICITY - THE SIMPLE
VERSION
IDs classes elements
& pseudo classes & pseudo elements
& attributes
Wednesday, March 30, 2011
35. SPECIFICITY - THE SIMPLE
VERSION
inline IDs classes elements
& pseudo classes & pseudo elements
& attributes
Wednesday, March 30, 2011
36. SPECIFICITY - THE SIMPLE
VERSION
#sidebar ul li a.myclass:hover{}
inline IDs classes elements
& pseudo classes & pseudo elements
& attributes
Wednesday, March 30, 2011
37. SPECIFICITY - THE SIMPLE
VERSION
#sidebar ul li a.myclass:hover{}
inline IDs classes elements
3
& pseudo classes & pseudo elements
& attributes
Wednesday, March 30, 2011
38. SPECIFICITY - THE SIMPLE
VERSION
#sidebar ul li a.myclass:hover{}
inline IDs classes elements
2 3
& pseudo classes & pseudo elements
& attributes
Wednesday, March 30, 2011
39. SPECIFICITY - THE SIMPLE
VERSION
#sidebar ul li a.myclass:hover{}
inline IDs classes elements
1 2 3
& pseudo classes & pseudo elements
& attributes
Wednesday, March 30, 2011
40. SPECIFICITY - THE SIMPLE
VERSION
#sidebar ul li a.myclass:hover{}
inline IDs classes elements
0 1 2 3
& pseudo classes & pseudo elements
& attributes
Wednesday, March 30, 2011
41. SPECIFICITY - THE SIMPLE
VERSION
#sidebar ul li a.myclass:hover{}
inline IDs classes elements
0 1 2 3
& pseudo classes & pseudo elements
& attributes
Wednesday, March 30, 2011
42. UNIVERSAL SELECTOR
* {}
inline IDs classes elements
& pseudo classes & pseudo elements
& attributes
Wednesday, March 30, 2011
43. UNIVERSAL SELECTOR
* {}
inline IDs classes elements
0
& pseudo classes & pseudo elements
& attributes
Wednesday, March 30, 2011
44. UNIVERSAL SELECTOR
* {}
inline IDs classes elements
0 0
& pseudo classes & pseudo elements
& attributes
Wednesday, March 30, 2011
45. UNIVERSAL SELECTOR
* {}
inline IDs classes elements
0 0 0
& pseudo classes & pseudo elements
& attributes
Wednesday, March 30, 2011
46. UNIVERSAL SELECTOR
* {}
inline IDs classes elements
0 0 0 0
& pseudo classes & pseudo elements
& attributes
Wednesday, March 30, 2011
47. CONCATENATING
SPECIFICITY
.item{color: blue;}
ul li li li li li li li li li{color: red;}
inline IDs classes elements
& pseudo classes & pseudo elements
& attributes
Wednesday, March 30, 2011
48. CONCATENATING
SPECIFICITY
.item{color: blue;}
ul li li li li li li li li li{color: red;}
inline IDs classes elements
0
& pseudo classes & pseudo elements
& attributes
Wednesday, March 30, 2011
49. CONCATENATING
SPECIFICITY
.item{color: blue;}
ul li li li li li li li li li{color: red;}
inline IDs classes elements
1 0
& pseudo classes & pseudo elements
& attributes
Wednesday, March 30, 2011
50. CONCATENATING
SPECIFICITY
.item{color: blue;}
ul li li li li li li li li li{color: red;}
inline IDs classes elements
0 1 0
& pseudo classes & pseudo elements
& attributes
Wednesday, March 30, 2011
51. CONCATENATING
SPECIFICITY
.item{color: blue;}
ul li li li li li li li li li{color: red;}
inline IDs classes elements
0 0 1 0
& pseudo classes & pseudo elements
& attributes
Wednesday, March 30, 2011
52. CONCATENATING
SPECIFICITY
.item{color: blue;}
ul li li li li li li li li li{color: red;}
inline IDs classes elements
& pseudo classes & pseudo elements
& attributes
Wednesday, March 30, 2011
53. CONCATENATING
SPECIFICITY
.item{color: blue;}
ul li li li li li li li li li{color: red;}
inline IDs classes elements
10
& pseudo classes & pseudo elements
& attributes
Wednesday, March 30, 2011
54. CONCATENATING
SPECIFICITY
.item{color: blue;}
ul li li li li li li li li li{color: red;}
inline IDs classes elements
0 10
& pseudo classes & pseudo elements
& attributes
Wednesday, March 30, 2011
55. CONCATENATING
SPECIFICITY
.item{color: blue;}
ul li li li li li li li li li{color: red;}
inline IDs classes elements
0 0 10
& pseudo classes & pseudo elements
& attributes
Wednesday, March 30, 2011
56. CONCATENATING
SPECIFICITY
.item{color: blue;}
ul li li li li li li li li li{color: red;}
inline IDs classes elements
0 0 0 10
& pseudo classes & pseudo elements
& attributes
Wednesday, March 30, 2011
57. CLASS ORDER
<p class=”message error”>Borken!</p>
Wednesday, March 30, 2011
58. CLASS ORDER
The order of the classes makes no difference.
<p class=”message error”>Borken!</p>
Wednesday, March 30, 2011
70. WHAT IS HAPPENING WITH
THE SPECIFICITY?
h3{...}
#sidebar h3{...}
#sidebar .account h3{...}
Wednesday, March 30, 2011
71. WHAT IS HAPPENING WITH
THE SPECIFICITY?
h3{...} 0 0 0 1
#sidebar h3{...}
#sidebar .account h3{...}
Wednesday, March 30, 2011
72. WHAT IS HAPPENING WITH
THE SPECIFICITY?
h3{...} 0 0 0 1
#sidebar h3{...} 0 1 0 1
#sidebar .account h3{...}
Wednesday, March 30, 2011
73. WHAT IS HAPPENING WITH
THE SPECIFICITY?
h3{...} 0 0 0 1
#sidebar h3{...} 0 1 0 1
#sidebar .account h3{...} 0 1 1 1
Wednesday, March 30, 2011
74. THE SITE HAS A WEATHER
MODULE IN THE SIDEBAR
h2
h3
#sidebar .weatherMod h3{
color: #fff;
text-transform: uppercase;
}
Wednesday, March 30, 2011
75. IMAGINE YOU RECEIVED
THIS WIREFRAME
h3
MORN NOON EVENING NIGHT h3
27° 35° 38° 30°
Wednesday, March 30, 2011
76. IMAGINE YOU RECEIVED
THIS WIREFRAME
h3
MORN NOON EVENING NIGHT h3
27° 35° 38° 30°
What if the visual designer decided that fewer
users would be interested in the by-hour weather,
so those titles should be smaller and not bold
Wednesday, March 30, 2011
77. NOTICE ANYTHING ABOUT
NESTING & SPECIFICITY?
h3
MORN NOON EVENING NIGHT h3
27° 35° 38° 30°
#sidebar .weatherMod h3{}
#sidebar .weatherMod .hourly h3{}
Wednesday, March 30, 2011
80. SIX MONTHS LATER, IT
GETS COMPLICATED
❖ Specificity grows over time
❖ Difficult to tell which rules will take precedence
❖ Developers end up coding by firebug
Wednesday, March 30, 2011
81. WHAT HAPPENS WHEN...
there are no more ways to make a rule more specific than the
one you are trying to override?
Wednesday, March 30, 2011
82. <h3 style=”color: red; font-weight: bold; font-size: 20px;”>My
shiny new heading level 3</h3>
WHAT HAPPENS WHEN...
there are no more ways to make a rule more specific than the
one you are trying to override?
Wednesday, March 30, 2011
83. <h3 style=”color: red; font-weight: bold; font-size: 20px;”>My
shiny new heading level 3</h3>
WHAT HAPPENS WHEN...
there are no more ways to make a rule more specific than the
one you are trying to override?
1 0 0 0
Wednesday, March 30, 2011
84. AND THEN ANOTHER
DEVELOPER SAYS...
“this is gross! we should not be using inline-styles”
but, at this point, what choice to they have left?
Wednesday, March 30, 2011
85. #sidebar .weatherMod .hourly .tuesday h3{color: blue !important;}
YOU MIGHT THINK
!IMPORTANT WOULD END
the specificity war, not so.
Wednesday, March 30, 2011
86. #sidebar .weatherMod .hourly .tuesday h3{color: blue !important;}
YOU MIGHT THINK
!IMPORTANT WOULD END
the specificity war, not so.
0 0 0 0
Wednesday, March 30, 2011
87. #sidebar .weatherMod .hourly .tuesday h3{color: blue !important;}
YOU MIGHT THINK
!IMPORTANT WOULD END
the specificity war, not so.
0 0 0 0
Wednesday, March 30, 2011
88. #sidebar .weatherMod .hourly .tuesday h3{color: blue !important;}
YOU MIGHT THINK
!IMPORTANT WOULD END
the specificity war, not so.
0 1 3 1 0 0 0 0
Wednesday, March 30, 2011
89. HOSTILE CODE
ENVIRONMENT
❖ Two layers develop
❖ Specificity grows over time (more and more rules become
important).
❖ Even more difficult to tell which rules will take precedence
❖ Developers always code by firebug
❖ Eventually, it becomes impossible to get the look and feel you
want.
Wednesday, March 30, 2011
90. SPECIFICITY AT IT’S WORST
normal
IDs
Classes
Elements
Wednesday, March 30, 2011
91. SPECIFICITY AT IT’S WORST
inline Inline Styles
normal
IDs
Classes
Elements
Wednesday, March 30, 2011
92. SPECIFICITY AT IT’S WORST
!important IDs
Classes
Elements
inline Inline Styles
normal
IDs
Classes
Elements
Wednesday, March 30, 2011
93. #sidebar
A Normal Heading Level 3
Wednesday, March 30, 2011
98. HOW DO WE SOLVE THESE
PROBLEMS?
Examine our best practice myths rationally
❖ Add non-semantic elements judiciously
❖ Keep specificity as low as possible
❖ Abstract repeating visual patterns
❖ Use specificity to define your architecture
Wednesday, March 30, 2011
107. HTML SIZE
reduced by 50%
by Stefan Parker
Wednesday, March 30, 2011
108. “Due to these efforts, we cut our average
CSS bytes per page by 19% (after gzip) and
HTML bytes per page by 44% (before
gzip).”
Jason Sobel
http://www.facebook.com/note.php?note_id=307069903919
Wednesday, March 30, 2011