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.
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
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
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
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
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”.
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.
68. Avoid IDs
Use classes rather than IDs for
styling purposes. Classes are more
flexible. Using only classes can
reduce cascade issues.
#box { }
.box { }
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 { }
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)?
75.
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
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
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
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
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.
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.
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 { }
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; }