CSSa rapidly changing world
PART 1:a quicktimeline
2001
Browser changes in 2001Internet Explorer 6 - August 2001Opera 6 - December 2001
Trends from 2001Using tables for layout, spacer gifs,general hackery
2002
Browser changes in 2002Firefox 0.1 - September 2002
Highlights from 2002Wired.net launch - February 2002
Trends from 2002CSS moves towards “mainstream”
2003
Browser changes in 2003Safari 1 - January 2003Opera 7 - January 2003
Highlights from 2003ESPN launch - February 2003CSS Zen Garden - May 2003Listamatic - September 2003Sliding doors - October...
Trends from 2003CSS becoming more mainstream,CSS tutorials everywhere!
2004
Browser changes in 2004Firefox 1.0 - November 2004
Highlights from 2004Faux columns - January 2004Resolution dependant layouts - Sep 2004
Trends from 2004Dealing with IE, CSS hacks
2005
Browser changes in 2005Safari 2 - April 2003Opera 8 - April 2005Opera 9 - June 2005
Trends from 2005Still dealing with IE, CSS hacks
2006
Browser changes in 2006Opera 9 - June 2006Internet Explorer 7 - October 2006Firefox 2.0 - October 2006
Trends from 2006Still dealing with IE, CSS hacks
2007
Browser changes in 2007Safari 3 - January 2007
Highlights from 2007Blueprint - May 2007iPhone launches - June 2007SASS - August 2007
Trends from 2007Abstracting CSS - (CSS Frameworks)
2008
Browsers changes in 2008Safari 4 - June 2008Firefox 3.0 - June 2008Chrome 0.2 - October 2008Chrome 1.0 - December 2008
Trends from 2008Abstracting CSS - (CSS Frameworks)
2009
Browser changes in 2009Internet Explorer 8 - March 2009Chrome 2.0 - May 2009Chrome 3.0 - October 2009Opera 10 - September ...
Highlights from 2009OOCSS - Feb 2009LESS - August 2009
Trends from 2009CSS3, Web fonts, Polyfills, SASS andLESS
2010
Browser changes in 2010Chrome 4.0 - January 2010Chrome 5.0 - May 2010Chrome 6.0 - September 2010Chrome 7.0 - October 2010C...
Highlights from 2010HTML5 Boilerplate - April 2010Responsive Web Design - May 2010
Trends from 2010Responsive Web Design, OOCSS
2011
Browser changes in 2011Chrome 9.0 - February 2011Chrome 10.0 - February 2011Chrome 11.0 - April 2011Chrome 12.0 - June 201...
and more...Internet Explorer 9 - March 2011Firefox 4.0 - March 2011Firefox 5.0 - June 2011Firefox 6.0 - August 2011Firefox...
Highlights from 2011SMACSS - September 2011
Trends from 2011Mobile first, RWD, OOCSS, SMACSS,SASS, LESS
2012
Browser changes in 2012Chrome 17.0 - February 2012Chrome 18.0 - March 2012Chrome 19.0 - May 2012Chrome 20.0 - June 2012Chr...
and more...Firefox 10.0 - January 2012Firefox 11.0 - March 2012Firefox 12.0 - April 2012Firefox 13.0 - June 2012Firefox 14...
and more...Opera 12 - June 2012Safari 6 - July 2012Internet Explorer 10 - October 2012
Trends from 2012Mobile first, RWD, OOCSS, SMACSS,Rethinking CSS
PART 2:keyevents
Key eventsHere are some of the key events that havehelped to alter the way we build websites.
New browsers“As hard as it may be for many people tobelieve, Internet Explorer 6 began theprocess, allowing designers andd...
Frameworks“A set of tools, libraries, conventions, andbest practices that attempt to abstractroutine tasks into generic mo...
CSS3“CSS3 provides us with a wide range ofnew tools such as border-radius,gradients, shadows, web-fonts,animations, transf...
Web fonts“Webfonts are a font format that allowsweb designers to use real typographyonline without losing the advantages o...
Responsive Web Design“Responsive design is about creatingflexible layouts that can adapt to suit thescreen size and/or ori...
OOCSS“The purpose of OOCSS is to encouragecode reuse and, ultimately, faster andmore efficient stylesheets that are easier...
SMACSS“SMACSS is more style guide than rigidframework - an attempt to document aconsistent approach to site developmentwhe...
Preprocessors  “Sass is an extension of CSS3, adding  nested rules, variables, mixins and  selector inheritance.”Writing m...
PART 3:writingbetter CSS?
a radical change inpractices
The old wayCSS used to be about clean HTML -withe the absolute minimum ofclasses. Layouts that used too manyclasses were c...
ProblemsWhile the HTML stayed clean, theCSS was often bloated andinefficient.
The new wayToday, it is about abstracting layoutsinto reusable modules so that CSS ismore lean and efficient. This meanstha...
The benefitsWhile the HTML has additionalclasses, the CSS remains very lean.Implementation and modification isquicker and m...
setting up yourCSS architecture
SMACSSUse SMACSS to set up your overallCSS architecture1. Base2. Layout3. Modules4. States5. Theme
setting up yournaming conventions
Avoid IDsUse classes rather than IDs forstyling purposes. Classes are moreflexible. Using only classes canreduce cascade is...
Use dashesSeparate class names with dashes.box-feature { }.boxFeature { }.box_feature { }
Use prefixesUse “pseudo-namespaces” asprefixes - so that related classes caneasily be identified..box-feature { }.box-headin...
MeaningfulClass names should be meaningful,so that other developers canunderstand their purpose..bbdy { }.box-body { }
SemanticWhere possible, class names shouldbe semantic rather thanpresentational..box-blue { }.box-alt1 { }
look for patterns -overall layout
An example layoutLook at the following example layout.Can you see any patterns (aspects ofthe design that can be defined in...
Layout patternsThere are some patterns that can beused to define the overall layout,such as:wide columnnarrow columnmedium ...
wide column        narrow columnmedium column      medium column
wide          narrownarrow          wide   medium          medium
Layout rules.col-wide,.col-medium,.col-narrow{! float: left;! margin-right: 10%;}
Layout rules (continued).col-wide {   width: 60%; }.col-medium   { width: 45%; }.col-narrow   { width: 30%; }.col-last {  ...
look for patterns -rows
RowsThere are six distinct rows. Theserows can used to clear other pagecomponents above and below.
rowrowrowrowrowrow
Row module.row{! clear: both;! overflow: hidden;! zoom: 1;! _overflow: visible;}
Row module extendsTwo of these rows have additionalcharacteristics - they have paddingand background-color. These tworows ...
blue rowpink row
Row module extends.row-alt1,.row-alt2 {! padding: 1em; }.row-alt1 {! background: #bfe6ee; }.row-alt2 {! background: #edc9e...
look for patterns -boxes
BoxesThere are seven boxes with similarcharacteristics. These could beconverted into one overall module.
box          box             box      box   box      box   box
Box module.box{! overflow: hidden;! zoom: 1;! _overflow: visible;! margin-bottom: 1em;}
Box module extendsTwo of these boxes have additionalcharacteristics - they have paddingand background-color. These tworows...
yellow boxgreen box
Box module extends.box-alt1,.box-alt2 {! padding: 1em; }.box-alt1 {! background: #fbf49b; }.box-alt2 {! background: #bfe6e...
creating a highlyflexible box module
FlexibleWe need to be able to target- the overall box- an image/object (aligned left or right)- the body content within th...
box  box-feature   box-body                                box-heading                  box-content
The classes.box { }.box-feature { }.box-feature-right { }.box-body { }.box-heading { }.box-content { }
Problem 1: widthHow do we make this box modulework, even when the widths vary?
wide box                  narrow box                          narrow box           medium box   medium box           mediu...
Solution 1:The box module has to spread to fitthe width of any parent container, soit must not be given it’s own width.
Box.box{! overflow: hidden;! zoom: 1;! _overflow: visible;! margin-bottom: 1em;}
Problem 2: placementThe box must work when placedanywhere within the layout.
Solution 2:The box module must be “locationagnostic”. The box should not bedefined based on it’s location.aside .box { }.bo...
Problem 3: alignmentDid you notice that the images couldsit at the left or right?
left aligned           left aligned                      right alignedleft aligned       left alignedleft aligned       le...
Solution 3:The image/object must be able to bemodified to float left or right.
Box feature.box-feature{! float: left;! margin-right: .5em;}
Box feature right.box-feature-alt{! float: right;! margin-left: .5em;}
Problem 4: imagesThe box may contain images orobjects that have varying widths.
large image                       small image                  small imagemedium image     medium imagemedium image     me...
Solution 3:This can be solved using the “box-body” class. This class will wraparound the contents of the box andforce it t...
box-body
Box body.box-body{! overflow: hidden;! zoom: 1;! _overflow: visible;}
Why use “overflow”?Using overflow: hidden is onemethod that will trigger the blockformatting context, which allows abox to ...
overflow: hidden forces the   “box-body” class to sit besidea floated object, no matter how wide.
changing modules
Modules and extendsWe now have some base modulesand “extends”..row { }.row-alt1   { }.row-alt2   { }.box { }.box-alt1   { ...
Change?These base module may be usednumerous times within a layout. Whathappens if you want to change abase module to help...
Rule 1: keep it simpleThe base module should be definedas simply as possible. This meansthat they are highly flexible.
Rule 2: extend vs modifyBase modules can be extended (withadditional “extend “classes), butshould never be modified.
A new “extend”If a based module needs to bemodified to suit a specific case, it isprobably better to create a newmodule.
some tips whenwriting CSS
Avoid repetitionAvoid redefining elements throughoutyour style sheets. How many timesdo you need to define headings orfont-s...
Avoid deep selectorsAvoid deep selectors as these makethe cascade unnecessarily complex.#content #nav ul li a { }
Avoid qualified selectorsAvoid qualified selectors as these areunnecessary.div.intro {}
Avoid !importantWhile !important may have it’s uses, itshould not be used “reactively” (such ashelping to solve cascade is...
Avoid undoing stylesIf your CSS is written correctly, youshould never have to undo previousrules..box { float: left; }.box...
Russ WeakleyMax DesignSite: maxdesign.com.auTwitter: twitter.com/russmaxdesignSlideshare: slideshare.net/maxdesignLinkedin...
CSS: a rapidly changing world
CSS: a rapidly changing world
Upcoming SlideShare
Loading in...5
×

CSS: a rapidly changing world

6,110

Published on

Extended slides from a recent Sydney Port80 presentation. The slides cover three overall topics: 1) a quick timeline of CSS-related events, 2) key events that changed CSS and 3) a discussion on writing better CSS.

Published in: Technology
10 Comments
33 Likes
Statistics
Notes
  • Theres no mention of Netscape and Mozilla in those browser changes list - I would have thought the user base for those browsers were better than Opera 6 in the day. Have Chrome and FireFox gone stupid with version numberings, someone please save me! Was doing some research into browser release dates and two of your slides may be inaccurate. According to the Wiki and Opera - Opera 9 was released in 2006 not 2005, but you seem to have them in both. Safari 4.0 beta was 2008 but Safari 4.0 final was 2009. I know you use nightly browser builds so I was a bit unsure of Safari's year. Otherwise I thoroughly enjoyed watching that slideshow :). Source: http://en.wikipedia.org/wiki/Timeline_of_web_browsers
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks for the show :D Was hoping for more trends but I guess I can't complain here, don't remember any more myself. I like the trends from 2004-2006, 'Dealing with IE, CSS hacks', kept me laughing for a while... I swear its still a trend. Is wired.net the wired.com? Couldn't find specifics through Google.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks for sharing Russ
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi Chris, yes, this could work. If it were a real site, there may be some other context that could be used instead of wide, medium and narrow.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • The name col-wide and col-narrow are too display-oriented; how about col-major and col-minor instead?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
6,110
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
167
Comments
10
Likes
33
Embeds 0
No embeds

No notes for slide

CSS: a rapidly changing world

  1. 1. CSSa rapidly changing world
  2. 2. PART 1:a quicktimeline
  3. 3. 2001
  4. 4. Browser changes in 2001Internet Explorer 6 - August 2001Opera 6 - December 2001
  5. 5. Trends from 2001Using tables for layout, spacer gifs,general hackery
  6. 6. 2002
  7. 7. Browser changes in 2002Firefox 0.1 - September 2002
  8. 8. Highlights from 2002Wired.net launch - February 2002
  9. 9. Trends from 2002CSS moves towards “mainstream”
  10. 10. 2003
  11. 11. Browser changes in 2003Safari 1 - January 2003Opera 7 - January 2003
  12. 12. Highlights from 2003ESPN launch - February 2003CSS Zen Garden - May 2003Listamatic - September 2003Sliding doors - October 2003
  13. 13. Trends from 2003CSS becoming more mainstream,CSS tutorials everywhere!
  14. 14. 2004
  15. 15. Browser changes in 2004Firefox 1.0 - November 2004
  16. 16. Highlights from 2004Faux columns - January 2004Resolution dependant layouts - Sep 2004
  17. 17. Trends from 2004Dealing with IE, CSS hacks
  18. 18. 2005
  19. 19. Browser changes in 2005Safari 2 - April 2003Opera 8 - April 2005Opera 9 - June 2005
  20. 20. Trends from 2005Still dealing with IE, CSS hacks
  21. 21. 2006
  22. 22. Browser changes in 2006Opera 9 - June 2006Internet Explorer 7 - October 2006Firefox 2.0 - October 2006
  23. 23. Trends from 2006Still dealing with IE, CSS hacks
  24. 24. 2007
  25. 25. Browser changes in 2007Safari 3 - January 2007
  26. 26. Highlights from 2007Blueprint - May 2007iPhone launches - June 2007SASS - August 2007
  27. 27. Trends from 2007Abstracting CSS - (CSS Frameworks)
  28. 28. 2008
  29. 29. Browsers changes in 2008Safari 4 - June 2008Firefox 3.0 - June 2008Chrome 0.2 - October 2008Chrome 1.0 - December 2008
  30. 30. Trends from 2008Abstracting CSS - (CSS Frameworks)
  31. 31. 2009
  32. 32. Browser changes in 2009Internet Explorer 8 - March 2009Chrome 2.0 - May 2009Chrome 3.0 - October 2009Opera 10 - September 2009
  33. 33. Highlights from 2009OOCSS - Feb 2009LESS - August 2009
  34. 34. Trends from 2009CSS3, Web fonts, Polyfills, SASS andLESS
  35. 35. 2010
  36. 36. Browser changes in 2010Chrome 4.0 - January 2010Chrome 5.0 - May 2010Chrome 6.0 - September 2010Chrome 7.0 - October 2010Chrome 8.0 - December 2010Safari 5 - June 2010Opera 11 - December 2010
  37. 37. Highlights from 2010HTML5 Boilerplate - April 2010Responsive Web Design - May 2010
  38. 38. Trends from 2010Responsive Web Design, OOCSS
  39. 39. 2011
  40. 40. Browser changes in 2011Chrome 9.0 - February 2011Chrome 10.0 - February 2011Chrome 11.0 - April 2011Chrome 12.0 - June 2011Chrome 13.0 - August 2011Chrome 14.0 - September 2011Chrome 15.0 - October 2011Chrome 16.0 - December 2011
  41. 41. and more...Internet Explorer 9 - March 2011Firefox 4.0 - March 2011Firefox 5.0 - June 2011Firefox 6.0 - August 2011Firefox 7.0 - September 2011Firefox 8.0 - November 2011Firefox 9.0 - November 2011
  42. 42. Highlights from 2011SMACSS - September 2011
  43. 43. Trends from 2011Mobile first, RWD, OOCSS, SMACSS,SASS, LESS
  44. 44. 2012
  45. 45. Browser changes in 2012Chrome 17.0 - February 2012Chrome 18.0 - March 2012Chrome 19.0 - May 2012Chrome 20.0 - June 2012Chrome 21.0 - July 2012Chrome 22.0 - September 2012Chrome 23.0 - November 2012
  46. 46. and more...Firefox 10.0 - January 2012Firefox 11.0 - March 2012Firefox 12.0 - April 2012Firefox 13.0 - June 2012Firefox 14.0 - June 2012Firefox 15.0 - August 2012Firefox 16.0 - October 2012Firefox 17.0 - November 2012
  47. 47. and more...Opera 12 - June 2012Safari 6 - July 2012Internet Explorer 10 - October 2012
  48. 48. Trends from 2012Mobile first, RWD, OOCSS, SMACSS,Rethinking CSS
  49. 49. PART 2:keyevents
  50. 50. Key eventsHere are some of the key events that havehelped to alter the way we build websites.
  51. 51. New browsers“As hard as it may be for many people tobelieve, Internet Explorer 6 began theprocess, allowing designers anddevelopers to move to full CSS.” rs = new possibilities New browse
  52. 52. Frameworks“A set of tools, libraries, conventions, andbest practices that attempt to abstractroutine tasks into generic modules thatcan be reused.”The beginning of abstractin g CSS
  53. 53. CSS3“CSS3 provides us with a wide range ofnew tools such as border-radius,gradients, shadows, web-fonts,animations, transforms, transitions andmore.” cient, more effective More effi
  54. 54. Web fonts“Webfonts are a font format that allowsweb designers to use real typographyonline without losing the advantages oflive text — dynamic, searchable, accessiblecontent.” Real fonts in the browser
  55. 55. Responsive Web Design“Responsive design is about creatingflexible layouts that can adapt to suit thescreen size and/or orientation of anydevice.” g from fixed to fluid Movin
  56. 56. OOCSS“The purpose of OOCSS is to encouragecode reuse and, ultimately, faster andmore efficient stylesheets that are easierto add to and maintain.” Fully abstrac ted CSS
  57. 57. SMACSS“SMACSS is more style guide than rigidframework - an attempt to document aconsistent approach to site developmentwhen using CSS.” ture & conventionsDefining architec
  58. 58. Preprocessors “Sass is an extension of CSS3, adding nested rules, variables, mixins and selector inheritance.”Writing more efficient & po werful CSS
  59. 59. PART 3:writingbetter CSS?
  60. 60. a radical change inpractices
  61. 61. The old wayCSS used to be about clean HTML -withe the absolute minimum ofclasses. Layouts that used too manyclasses were considered to besuffering from “classitis”.
  62. 62. ProblemsWhile the HTML stayed clean, theCSS was often bloated andinefficient.
  63. 63. The new wayToday, it is about abstracting layoutsinto reusable modules so that CSS ismore lean and efficient. This meansthat there are more classes inside theHTML.
  64. 64. The benefitsWhile the HTML has additionalclasses, the CSS remains very lean.Implementation and modification isquicker and more efficient.
  65. 65. setting up yourCSS architecture
  66. 66. SMACSSUse SMACSS to set up your overallCSS architecture1. Base2. Layout3. Modules4. States5. Theme
  67. 67. setting up yournaming conventions
  68. 68. Avoid IDsUse classes rather than IDs forstyling purposes. Classes are moreflexible. Using only classes canreduce cascade issues.#box { }.box { }
  69. 69. Use dashesSeparate class names with dashes.box-feature { }.boxFeature { }.box_feature { }
  70. 70. Use prefixesUse “pseudo-namespaces” asprefixes - so that related classes caneasily be identified..box-feature { }.box-heading { }.box-body { }.box-content { }
  71. 71. MeaningfulClass names should be meaningful,so that other developers canunderstand their purpose..bbdy { }.box-body { }
  72. 72. SemanticWhere possible, class names shouldbe semantic rather thanpresentational..box-blue { }.box-alt1 { }
  73. 73. look for patterns -overall layout
  74. 74. An example layoutLook at the following example layout.Can you see any patterns (aspects ofthe design that can be defined into asingle concept and then reused)?
  75. 75. Layout patternsThere are some patterns that can beused to define the overall layout,such as:wide columnnarrow columnmedium column
  76. 76. wide column narrow columnmedium column medium column
  77. 77. wide narrownarrow wide medium medium
  78. 78. Layout rules.col-wide,.col-medium,.col-narrow{! float: left;! margin-right: 10%;}
  79. 79. Layout rules (continued).col-wide { width: 60%; }.col-medium { width: 45%; }.col-narrow { width: 30%; }.col-last { margin-right: 0; }
  80. 80. look for patterns -rows
  81. 81. RowsThere are six distinct rows. Theserows can used to clear other pagecomponents above and below.
  82. 82. rowrowrowrowrowrow
  83. 83. Row module.row{! clear: both;! overflow: hidden;! zoom: 1;! _overflow: visible;}
  84. 84. Row module extendsTwo of these rows have additionalcharacteristics - they have paddingand background-color. These tworows can be defined as “extends” -extending the initial module
  85. 85. blue rowpink row
  86. 86. Row module extends.row-alt1,.row-alt2 {! padding: 1em; }.row-alt1 {! background: #bfe6ee; }.row-alt2 {! background: #edc9e0; }
  87. 87. look for patterns -boxes
  88. 88. BoxesThere are seven boxes with similarcharacteristics. These could beconverted into one overall module.
  89. 89. box box box box box box box
  90. 90. Box module.box{! overflow: hidden;! zoom: 1;! _overflow: visible;! margin-bottom: 1em;}
  91. 91. Box module extendsTwo of these boxes have additionalcharacteristics - they have paddingand background-color. These tworows can be defined as “extends” -extending the initial module
  92. 92. yellow boxgreen box
  93. 93. Box module extends.box-alt1,.box-alt2 {! padding: 1em; }.box-alt1 {! background: #fbf49b; }.box-alt2 {! background: #bfe6ee; }
  94. 94. creating a highlyflexible box module
  95. 95. FlexibleWe need to be able to target- the overall box- an image/object (aligned left or right)- the body content within the box- a possible heading (could be h1-h6)- possibly even the contents itself
  96. 96. box box-feature box-body box-heading box-content
  97. 97. The classes.box { }.box-feature { }.box-feature-right { }.box-body { }.box-heading { }.box-content { }
  98. 98. Problem 1: widthHow do we make this box modulework, even when the widths vary?
  99. 99. wide box narrow box narrow box medium box medium box medium box medium box
  100. 100. Solution 1:The box module has to spread to fitthe width of any parent container, soit must not be given it’s own width.
  101. 101. Box.box{! overflow: hidden;! zoom: 1;! _overflow: visible;! margin-bottom: 1em;}
  102. 102. Problem 2: placementThe box must work when placedanywhere within the layout.
  103. 103. Solution 2:The box module must be “locationagnostic”. The box should not bedefined based on it’s location.aside .box { }.box { }
  104. 104. Problem 3: alignmentDid you notice that the images couldsit at the left or right?
  105. 105. left aligned left aligned right alignedleft aligned left alignedleft aligned left aligned
  106. 106. Solution 3:The image/object must be able to bemodified to float left or right.
  107. 107. Box feature.box-feature{! float: left;! margin-right: .5em;}
  108. 108. Box feature right.box-feature-alt{! float: right;! margin-left: .5em;}
  109. 109. Problem 4: imagesThe box may contain images orobjects that have varying widths.
  110. 110. large image small image small imagemedium image medium imagemedium image medium image
  111. 111. Solution 3:This can be solved using the “box-body” class. This class will wraparound the contents of the box andforce it to sit beside the featureimage or object, no matter how widethis image or object is.
  112. 112. box-body
  113. 113. Box body.box-body{! overflow: hidden;! zoom: 1;! _overflow: visible;}
  114. 114. Why use “overflow”?Using overflow: hidden is onemethod that will trigger the blockformatting context, which allows abox to sit beside a floated object,without sliding under it or wrappingaround it.
  115. 115. overflow: hidden forces the “box-body” class to sit besidea floated object, no matter how wide.
  116. 116. changing modules
  117. 117. Modules and extendsWe now have some base modulesand “extends”..row { }.row-alt1 { }.row-alt2 { }.box { }.box-alt1 { }.box-alt2 { }
  118. 118. Change?These base module may be usednumerous times within a layout. Whathappens if you want to change abase module to help in someinstances?
  119. 119. Rule 1: keep it simpleThe base module should be definedas simply as possible. This meansthat they are highly flexible.
  120. 120. Rule 2: extend vs modifyBase modules can be extended (withadditional “extend “classes), butshould never be modified.
  121. 121. A new “extend”If a based module needs to bemodified to suit a specific case, it isprobably better to create a newmodule.
  122. 122. some tips whenwriting CSS
  123. 123. Avoid repetitionAvoid redefining elements throughoutyour style sheets. How many timesdo you need to define headings orfont-sizes?h2 { }.intro h2 { }h2 { }
  124. 124. Avoid deep selectorsAvoid deep selectors as these makethe cascade unnecessarily complex.#content #nav ul li a { }
  125. 125. Avoid qualified selectorsAvoid qualified selectors as these areunnecessary.div.intro {}
  126. 126. Avoid !importantWhile !important may have it’s uses, itshould not be used “reactively” (such ashelping to solve cascade issues)..box { margin: 0 !important; }
  127. 127. Avoid undoing stylesIf your CSS is written correctly, youshould never have to undo previousrules..box { float: left; }.box-feature { float: none; }
  128. 128. Russ WeakleyMax DesignSite: maxdesign.com.auTwitter: twitter.com/russmaxdesignSlideshare: slideshare.net/maxdesignLinkedin: linkedin.com/in/russweakley
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×