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.ļ¬ickr.com/photos/illumiquest/2749137895/sizes/l/in/photostream/
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
ā Speciļ¬city grows over time
ā Difļ¬cult to tell which rules will take precedence
ā Developers end up coding by ļ¬rebug
Wednesday, March 30, 2011
81. WHAT HAPPENS WHEN...
there are no more ways to make a rule more speciļ¬c 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 speciļ¬c 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 speciļ¬c 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 speciļ¬city war, not so.
Wednesday, March 30, 2011
86. #sidebar .weatherMod .hourly .tuesday h3{color: blue !important;}
YOU MIGHT THINK
!IMPORTANT WOULD END
the speciļ¬city 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 speciļ¬city 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 speciļ¬city war, not so.
0 1 3 1 0 0 0 0
Wednesday, March 30, 2011
89. HOSTILE CODE
ENVIRONMENT
ā Two layers develop
ā Speciļ¬city grows over time (more and more rules become
important).
ā Even more difļ¬cult to tell which rules will take precedence
ā Developers always code by ļ¬rebug
ā Eventually, it becomes impossible to get the look and feel you
want.
Wednesday, March 30, 2011
98. HOW DO WE SOLVE THESE
PROBLEMS?
Examine our best practice myths rationally
ā Add non-semantic elements judiciously
ā Keep speciļ¬city as low as possible
ā Abstract repeating visual patterns
ā Use speciļ¬city to deļ¬ne 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