The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax Experience 2009

1. OBJECT-ORIENTED CSS scale to millions of users or thousands of pages

2. NICOLE SULLIVAN “stubbornella” on the web

3. SLIDES http://www.slideshare.net/stubbornella

4. THE STATE OF CSS

5. THE “C” IN CSS understanding the cascade

6. BROWSER DEFAULT STYLES ❖ Browsers have internal default stylesheets ❖ They are all different ❖ Use reset.css from YUI to level the playing ﬁeld

7. CLASS ORDER Borken! The order of the classes makes no difference.

8. ORDER OF THE PROPERTY VALUE PAIRS .foo{color: red; color: blue;}

9. BROWSER IGNORES BITS IT DOESN’T UNDERSTAND .foo{color: red; colour: blue;}

10. ORDER OF THE RULESETS .foo{color: red;} .foo{color: blue;}

11. ORDER OF THE STYLESHEETS <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css" /> <link rel="stylesheet" type="text/css" href="moreStyles.css" /> </head> <body> My page </body> </html>

12. SPECIFICITY? Sort of like a game of poker

13. FROM THE SPEC: ❖ Count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.) ❖ Count the number of ID attributes in the selector (= b) ❖ Count the number of other attributes and pseudo-classes in the selector (= c) ❖ Count the number of element names and pseudo-elements in the selector (= d)

14. IT GOES ON... ❖ The specificity is based only on the form of the selector. In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD. ❖ Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.

15. ROUGHLY SPEAKING... We need to calculate speciﬁcity faster...

16. ID AND CLASS #nav p{color: red } .nav p{color: blue }

17. INLINE STYLES My page

18. !IMPORTANT p{color: red !important} My page

19. CSS INHERITANCE body{font-size: 18px;} <body> This text is 18px. </body> http://www.w3.org/TR/CSS2/propidx.html

20. AGGREGATION OF RULES Boo Boo Boo

21. POWERFUL misunderstanding of CSS has led to a mess...

28. CODE IS TOO FRAGILE. Even the cleanest code gets ruined by the ﬁrst non-expert to touch it.

29. REQUIRE EXPERT ABILITY JUST TO GET STARTED. this is not a sign of maturity.

30. CODE RE-USE IS ALMOST NONEXISTENT people don’t trust other developers’ code.

31. FILE SIZE JUST KEEPS GETTING BIGGER As the site evolves we continuously modify the CSS.

32. WHAT IS THE MOST IMPORTANT MISTAKE TALENTED CODERS ARE MAKING? Writing really clever modules.

33. THE SIZE OF THEIR CSS WILL INCREASE in a 1:1 relationship with the number of blocks, pages, and complexity of content.

34. WHAT IS OBJECT-ORIENTED CSS? A philosophy? A framework? A tool?

35. MORE LIKE AN EVOLUTION OF THE LANGUAGE it makes CSS more powerful

36. HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...}

37. HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...} Until now, we focused all our effort here

38. HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...} But, the architecture lives here

39. TERMINOLOGY CAN BE CONFUSING so forget about a 1:1 mapping with either CSS or OOP

40. ALL OF THE CODE IS OPEN SOURCE: ON GITHUB http://wiki.github.com/stubbornella/oocss/

41. selector heading module grid

42. selector heading template grid

43. HEADINGS reusable Lego

44. 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

49. REUSING ELEMENTS MAKES THEM performance “freebies”

50. COMPONENTS ARE LIKE LEGO Mix and match to create diverse and interesting pages.

51. AVOID DUPLICATION Wasting performance resources on components that can’t add value.

52. NEARLY IDENTICAL MODULES Headings 3 and 5 are too similar.

53. Rule of thumb: If two modules look too similar to include on the same page, they are too similar to include together in a site, choose one!

54. AVOID LOCATION- DEPENDENT STYLES Sandboxing is better than spaghetti, but leads to performance problems

55. AVOID WHAT?

56. FUNCTION AREA()

57. FUNCTION AREA()

58. FUNCTION AREA()

59. EVERY NOW AND THEN...

60. RETURNED DIAMETER

61. BROKEN.

62. IN CSS WE DO THIS ALL THE TIME

63. BROKEN.

64. A Heading should not become a Heading in another part of the page.

65. AVOID EXAMPLE #weatherModule h3{color:red;} #tabs h3{color:blue} ❖ Global color undeﬁned for h3, so it will be ‣ unstyled in new modules, ‣ developers forced to write more CSS for the same style

66. AVOID EXAMPLE h3{color:black;} #weatherModule h3{color:red;} #tabs h3{color:blue} ❖ Global color deﬁned (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

67. CONSISTENCY Writing more rules to overwrite the crazy rules from before. e.g. Heading should behave predictably in any module.

68. TRY THIS INSTEAD h1, .h1{...} h2, .h2{...} h3, .h3{...} h4, .h4{...} h5, .h5{...} h6, .h6{...} ❖ Global values deﬁned ❖ Semantics respected (while allowing visual ﬂexibility) <h3 class=”h6”>Heading</h3>

69. NEED MORE THAN 6 HEADINGS? Really? Any duplicates? Any too similar?

70. 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

72. TEMPLATE & GRIDS Be ﬂexible - extensible height and width

73. TEMPLATE • 807 bytes • 13 lines of code • easily extended to custom page and column width

74. GRIDS • 574 bytes • 14 lines of code • Percentage widths adapt to different page sizes • Includes halfs, thirds, fourths, and ﬁfths • No gutters • Inﬁnite nesting and stacking

75. Grids control the width

76. Content controls height

77. FIXED DIMENSIONS limit the ways in which a module can be reused

79. TAMING SELECTORS sanity for our stylesheets

80. SIZE OF THE CSS FILE AND IMPLIED HTTP REQUESTS are the biggest factor for CSS performance

81. REFLOWS AND RENDERING TIME are (much!) less important

82. DUPLICATION IS WORSE THAN STALE RULES because we have tools to deal with the latter

83. DEFINE DEFAULT VALUES Don’t repeat this code in every object

84. #weatherModule h3{color:red;} #tabs h3{color:blue} DEFINE DEFAULT VALUES Don’t repeat this code in every object

85. X #weatherModule h3{color:red;} #tabs h3{color:blue} DEFINE DEFAULT VALUES Don’t repeat this code in every object

86. X #weatherModule h3{color:red;} #tabs h3{color:blue} DEFINE DEFAULT VALUES Don’t repeat this code in every object h1, .h1{...} h2, .h2{...} h3, .h3{...} h4, .h4{...} h5, .h5{...} h6, .h6{...}

87. DEFINE STRUCTURE IN A SEPARATE CLASS Don’t repeat this code in every object block inner hd bd ft

88. div.error{...} STYLE CLASSES rather than elements

89. X div.error{...} STYLE CLASSES rather than elements .error{ most of the code goes here }

90. X div.error{...} STYLE CLASSES rather than elements .error{ most of the code goes here } div.error{ } p.error{ exceptions only } em.error{ }

91. div{...} ul{...} p{..} AVOID STYLING ELEMENTS unless deﬁning defaults

92. div{...} X ul{...} p{..} AVOID STYLING ELEMENTS unless deﬁning defaults .error{...} .section{...} .products{...}

93. html body .myModule div .hd{...} .myModule2 .hd {...} GIVE RULES THE SAME STRENGTH Use cascade order to overwrite previous rules

94. X html body .myModule div .hd{...} .myModule2 .hd {...} GIVE RULES THE SAME STRENGTH Use cascade order to overwrite previous rules .myModule .hd{...} .myModule2 .hd{...}

95. .mod .hd{...} .ie .mod .hd{...} .weatherMod .hd {...} USE HACKS SPARINGLY And don’t let them change your speciﬁcity

96. .mod .hd{...} X .ie .mod .hd{...} .weatherMod .hd {...} USE HACKS SPARINGLY And don’t let them change your speciﬁcity .mod .hd{color: red; _zoom:1;} .weatherMod .hd{...}

97. .sidebar ul{...} .header ul {...} AVOID SPECIFYING LOCATION Apply classes to the object you wish to change

98. X .sidebar ul{...} .header ul {...} AVOID SPECIFYING LOCATION Apply classes to the object you wish to change .mainNav{...} .subNav {...}

99. AVOID OVERLY SPECIFIC CLASSES they’re all semantic, but limiting

100. AVOID OVERLY SPECIFIC CLASSES they’re all semantic, but limiting .vehicle{...} .motorcycle{...} .ducati{...} .ducatiMonster620{...} .nicolesDucatiMonster620{...}

101. AVOID OVERLY SPECIFIC CLASSES they’re all semantic, but limiting .vehicle{...} .motorcycle{...} .ducati{...} X .ducatiMonster620{...} .nicolesDucatiMonster620{...}

102. #myUniqueIdentifier{...} #myUniqueIdentifier2{...} AVOID SINGLETONS ids can only be used once in any given page Source: Chris Griego

103. X #myUniqueIdentifier{...} #myUniqueIdentifier2{...} AVOID SINGLETONS ids can only be used once in any given page Source: Chris Griego

104. 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. USE MIXINS to avoid repeating code Media Extended 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.

105. .inner{...} .weatherMod .inner{...} .tr{...} .weatherMod .tr{...} .bl{...} .weatherMod .bl{...} ENCAPSULATION don’t access sub-nodes of an object directly inner

106. .inner{...} X .weatherMod .inner{...} .tr{...} .weatherMod .tr{...} .bl{...} .weatherMod .bl{...} ENCAPSULATION don’t access sub-nodes of an object directly inner

107. OOCSS: A REAL LIFE EXAMPLE Gonzalo Cordero Front-End Engineer @Yahoo! inc.

108. Who

109. Who

110. Who

111. Who

112. TO SHARE

113. TO SHARE

114. TO SHARE

115. DESIGN CONSIDERATIONS

116. DESIGN CONSIDERATIONS ❖ Cross browser compatible

117. DESIGN CONSIDERATIONS ❖ Cross browser compatible ❖ Multi-language support

118. DESIGN CONSIDERATIONS ❖ Cross browser compatible ❖ Multi-language support ❖ Accessible

119. DESIGN CONSIDERATIONS ❖ Cross browser compatible ❖ Multi-language support ❖ Accessible ❖ Aggressive deadline to complete both layout and functionality

120. The Puzzle

121. The Puzzle

122. The Puzzle

123. The Puzzle

124. RESULT

The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax Experience 2009

The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax Experience 2009

Recommandé

Contenu connexe

Tendances

Tendances(20)

En vedette

En vedette(20)

Similaire à The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax Experience 2009

Similaire à The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax Experience 2009(20)

Plus de Nicole Sullivan

Plus de Nicole Sullivan(9)

Dernier

Dernier(20)

The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax Experience 2009