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.

1. CSS
a rapidly changing world

2. PART 1:
a quick
timeline

3. 2001

4. Browser changes in 2001
Internet Explorer 6 - August 2001
Opera 6 - December 2001

5. Trends from 2001
Using tables for layout, spacer gifs,
general hackery

6. 2002

7. Browser changes in 2002
Firefox 0.1 - September 2002

8. Highlights from 2002
Wired.net launch - February 2002

9. Trends from 2002
CSS moves towards “mainstream”

10. 2003

11. Browser changes in 2003
Safari 1 - January 2003
Opera 7 - January 2003

12. Highlights from 2003
ESPN launch - February 2003
CSS Zen Garden - May 2003
Listamatic - September 2003
Sliding doors - October 2003

13. Trends from 2003
CSS becoming more mainstream,
CSS tutorials everywhere!

14. 2004

15. Browser changes in 2004
Firefox 1.0 - November 2004

16. Highlights from 2004
Faux columns - January 2004
Resolution dependant layouts - Sep 2004

17. Trends from 2004
Dealing with IE, CSS hacks

18. 2005

19. Browser changes in 2005
Safari 2 - April 2003
Opera 8 - April 2005
Opera 9 - June 2005

20. Trends from 2005
Still dealing with IE, CSS hacks

21. 2006

22. Browser changes in 2006
Opera 9 - June 2006
Internet Explorer 7 - October 2006
Firefox 2.0 - October 2006

23. Trends from 2006
Still dealing with IE, CSS hacks

24. 2007

25. Browser changes in 2007
Safari 3 - January 2007

26. Highlights from 2007
Blueprint - May 2007
iPhone launches - June 2007
SASS - August 2007

27. Trends from 2007
Abstracting CSS - (CSS Frameworks)

28. 2008

29. Browsers changes in 2008
Safari 4 - June 2008
Firefox 3.0 - June 2008
Chrome 0.2 - October 2008
Chrome 1.0 - December 2008

30. Trends from 2008
Abstracting CSS - (CSS Frameworks)

31. 2009

32. Browser changes in 2009
Internet Explorer 8 - March 2009
Chrome 2.0 - May 2009
Chrome 3.0 - October 2009
Opera 10 - September 2009

33. Highlights from 2009
OOCSS - Feb 2009
LESS - August 2009

34. Trends from 2009
CSS3, Web fonts, Polyfills, SASS and
LESS

35. 2010

36. Browser changes in 2010
Chrome 4.0 - January 2010
Chrome 5.0 - May 2010
Chrome 6.0 - September 2010
Chrome 7.0 - October 2010
Chrome 8.0 - December 2010
Safari 5 - June 2010
Opera 11 - December 2010

37. Highlights from 2010
HTML5 Boilerplate - April 2010
Responsive Web Design - May 2010

38. Trends from 2010
Responsive Web Design, OOCSS

39. 2011

40. Browser changes in 2011
Chrome 9.0 - February 2011
Chrome 10.0 - February 2011
Chrome 11.0 - April 2011
Chrome 12.0 - June 2011
Chrome 13.0 - August 2011
Chrome 14.0 - September 2011
Chrome 15.0 - October 2011
Chrome 16.0 - December 2011

41. and more...
Internet Explorer 9 - March 2011
Firefox 4.0 - March 2011
Firefox 5.0 - June 2011
Firefox 6.0 - August 2011
Firefox 7.0 - September 2011
Firefox 8.0 - November 2011
Firefox 9.0 - November 2011

42. Highlights from 2011
SMACSS - September 2011

43. Trends from 2011
Mobile first, RWD, OOCSS, SMACSS,
SASS, LESS

44. 2012

45. Browser changes in 2012
Chrome 17.0 - February 2012
Chrome 18.0 - March 2012
Chrome 19.0 - May 2012
Chrome 20.0 - June 2012
Chrome 21.0 - July 2012
Chrome 22.0 - September 2012
Chrome 23.0 - November 2012

46. and more...
Firefox 10.0 - January 2012
Firefox 11.0 - March 2012
Firefox 12.0 - April 2012
Firefox 13.0 - June 2012
Firefox 14.0 - June 2012
Firefox 15.0 - August 2012
Firefox 16.0 - October 2012
Firefox 17.0 - November 2012

47. and more...
Opera 12 - June 2012
Safari 6 - July 2012
Internet Explorer 10 - October 2012

48. Trends from 2012
Mobile first, RWD, OOCSS, SMACSS,
Rethinking CSS

49. PART 2:
key
events

50. Key events
Here are some of the key events that have
helped to alter the way we build websites.

51. New browsers
“As hard as it may be for many people to
believe, Internet Explorer 6 began the
process, allowing designers and
developers to move to full CSS.”
rs = new possibilities
New browse

52. Frameworks
“A set of tools, libraries, conventions, and
best practices that attempt to abstract
routine tasks into generic modules that
can be reused.”
The beginning
of abstractin
g CSS

53. CSS3
“CSS3 provides us with a wide range of
new tools such as border-radius,
gradients, shadows, web-fonts,
animations, transforms, transitions and
more.”
cient, more effective
More effi

54. Web fonts
“Webfonts are a font format that allows
web designers to use real typography
online without losing the advantages of
live text — dynamic, searchable, accessible
content.”
Real fonts in
the browser

55. Responsive Web Design
“Responsive design is about creating
flexible layouts that can adapt to suit the
screen size and/or orientation of any
device.”
g from fixed to fluid
Movin

56. OOCSS
“The purpose of OOCSS is to encourage
code reuse and, ultimately, faster and
more efficient stylesheets that are easier
to add to and maintain.”
Fully abstrac
ted CSS

57. SMACSS
“SMACSS is more style guide than rigid
framework - an attempt to document a
consistent approach to site development
when using CSS.”
ture & conventions
Defining architec

58. Preprocessors
“Sass is an extension of CSS3, adding
nested rules, variables, mixins and
selector inheritance.”
Writing more
efficient & po
werful CSS

59. PART 3:
writing
better CSS?

60. a radical change in
practices

61. The old way
CSS used to be about clean HTML -
withe the absolute minimum of
classes. Layouts that used too many
classes were considered to be
suffering from “classitis”.

62. Problems
While the HTML stayed clean, the
CSS was often bloated and
inefficient.

63. The new way
Today, it is about abstracting layouts
into reusable modules so that CSS is
more lean and efficient. This means
that there are more classes inside the
HTML.

64. The benefits
While the HTML has additional
classes, the CSS remains very lean.
Implementation and modification is
quicker and more efficient.

65. setting up your
CSS architecture

66. SMACSS
Use SMACSS to set up your overall
CSS architecture
1. Base
2. Layout
3. Modules
4. States
5. Theme

67. setting up your
naming conventions

68. Avoid IDs
Use classes rather than IDs for
styling purposes. Classes are more
flexible. Using only classes can
reduce cascade issues.
#box { }
.box { }

69. Use dashes
Separate class names with dashes
.box-feature { }
.boxFeature { }
.box_feature { }

70. Use prefixes
Use “pseudo-namespaces” as
prefixes - so that related classes can
easily be identified.
.box-feature { }
.box-heading { }
.box-body { }
.box-content { }

71. Meaningful
Class names should be meaningful,
so that other developers can
understand their purpose.
.bbdy { }
.box-body { }

72. Semantic
Where possible, class names should
be semantic rather than
presentational.
.box-blue { }
.box-alt1 { }

73. look for patterns -
overall layout

74. An example layout
Look at the following example layout.
Can you see any patterns (aspects of
the design that can be defined into a
single concept and then reused)?

76. Layout patterns
There are some patterns that can be
used to define the overall layout,
such as:
wide column
narrow column
medium column

77. wide column narrow column
medium column medium column

78. wide narrow
narrow wide
medium medium

79. Layout rules
.col-wide,
.col-medium,
.col-narrow
{
! float: left;
! margin-right: 10%;
}

80. Layout rules (continued)
.col-wide { width: 60%; }
.col-medium { width: 45%; }
.col-narrow { width: 30%; }
.col-last { margin-right: 0; }

81. look for patterns -
rows

82. Rows
There are six distinct rows. These
rows can used to clear other page
components above and below.

83. row
row
row
row
row
row

84. Row module
.row
{
! clear: both;
! overflow: hidden;
! zoom: 1;
! _overflow: visible;
}

85. Row module extends
Two of these rows have additional
characteristics - they have padding
and background-color. These two
rows can be defined as “extends” -
extending the initial module

86. blue row
pink row

87. Row module extends
.row-alt1,.row-alt2 {
! padding: 1em; }
.row-alt1 {
! background: #bfe6ee; }
.row-alt2 {
! background: #edc9e0; }

88. look for patterns -
boxes

89. Boxes
There are seven boxes with similar
characteristics. These could be
converted into one overall module.

90. box box
box
box box
box box

91. Box module
.box
{
! overflow: hidden;
! zoom: 1;
! _overflow: visible;
! margin-bottom: 1em;
}

92. Box module extends
Two of these boxes have additional
characteristics - they have padding
and background-color. These two
rows can be defined as “extends” -
extending the initial module

93. yellow box
green box

94. Box module extends
.box-alt1,.box-alt2 {
! padding: 1em; }
.box-alt1 {
! background: #fbf49b; }
.box-alt2 {
! background: #bfe6ee; }

95. creating a highly
flexible box module

96. Flexible
We 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

97. box
box-feature box-body
box-heading
box-content

98. The classes
.box { }
.box-feature { }
.box-feature-right { }
.box-body { }
.box-heading { }
.box-content { }

99. Problem 1: width
How do we make this box module
work, even when the widths vary?

100. wide box narrow box
narrow box
medium box medium box
medium box medium box

101. Solution 1:
The box module has to spread to fit
the width of any parent container, so
it must not be given it’s own width.

102. Box
.box
{
! overflow: hidden;
! zoom: 1;
! _overflow: visible;
! margin-bottom: 1em;
}

103. Problem 2: placement
The box must work when placed
anywhere within the layout.

105. Solution 2:
The box module must be “location
agnostic”. The box should not be
defined based on it’s location.
aside .box { }
.box { }

106. Problem 3: alignment
Did you notice that the images could
sit at the left or right?

107. left aligned left aligned
right aligned
left aligned left aligned
left aligned left aligned

108. Solution 3:
The image/object must be able to be
modified to float left or right.

109. Box feature
.box-feature
{
! float: left;
! margin-right: .5em;
}

110. Box feature right
.box-feature-alt
{
! float: right;
! margin-left: .5em;
}

111. Problem 4: images
The box may contain images or
objects that have varying widths.

112. large image
small image
small image
medium image medium image
medium image medium image

113. Solution 3:
This can be solved using the “box-
body” class. This class will wrap
around the contents of the box and
force it to sit beside the feature
image or object, no matter how wide
this image or object is.

114. box-body

115. Box body
.box-body
{
! overflow: hidden;
! zoom: 1;
! _overflow: visible;
}

116. Why use “overflow”?
Using overflow: hidden is one
method that will trigger the block
formatting context, which allows a
box to sit beside a floated object,
without sliding under it or wrapping
around it.

117. overflow: hidden forces the
“box-body” class to sit beside
a floated object, no matter how wide.

118. changing modules

119. Modules and extends
We now have some base modules
and “extends”.
.row { }
.row-alt1 { }
.row-alt2 { }
.box { }
.box-alt1 { }
.box-alt2 { }

120. Change?
These base module may be used
numerous times within a layout. What
happens if you want to change a
base module to help in some
instances?

121. Rule 1: keep it simple
The base module should be defined
as simply as possible. This means
that they are highly flexible.

122. Rule 2: extend vs modify
Base modules can be extended (with
additional “extend “classes), but
should never be modified.

123. A new “extend”
If a based module needs to be
modified to suit a specific case, it is
probably better to create a new
module.

124. some tips when
writing CSS

125. Avoid repetition
Avoid redefining elements throughout
your style sheets. How many times
do you need to define headings or
font-sizes?
h2 { }
.intro h2 { }
h2 { }

126. Avoid deep selectors
Avoid deep selectors as these make
the cascade unnecessarily complex.
#content #nav ul li a { }

127. Avoid qualified selectors
Avoid qualified selectors as these are
unnecessary.
div.intro {}

128. Avoid !important
While !important may have it’s uses, it
should not be used “reactively” (such as
helping to solve cascade issues).
.box { margin: 0 !important; }

129. Avoid undoing styles
If your CSS is written correctly, you
should never have to undo previous
rules.
.box { float: left; }
.box-feature { float: none; }

130. Russ Weakley
Max Design
Site: maxdesign.com.au
Twitter: twitter.com/russmaxdesign
Slideshare: slideshare.net/maxdesign
Linkedin: linkedin.com/in/russweakley