Upload
russ-weakley
View
119
Download
2
Tags:
Embed Size (px)
DESCRIPTION
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.
Citation preview
CSSa rapidly changing world
PART 1:
a quicktimeline
2001
Browser changes in 2001
Internet Explorer 6 - August 2001Opera 6 - December 2001
Trends from 2001
Using tables for layout, spacer gifs, general hackery
2002
Browser changes in 2002
Firefox 0.1 - September 2002
Highlights from 2002
Wired.net launch - February 2002
Trends from 2002
CSS moves towards “mainstream”
2003
Browser changes in 2003
Safari 1 - January 2003Opera 7 - January 2003
Highlights from 2003
ESPN launch - February 2003CSS Zen Garden - May 2003Listamatic - September 2003Sliding doors - October 2003
Trends from 2003
CSS becoming more mainstream, CSS tutorials everywhere!
2004
Browser changes in 2004
Firefox 1.0 - November 2004
Highlights from 2004
Faux columns - January 2004Resolution dependant layouts - Sep 2004
Trends from 2004
Dealing with IE, CSS hacks
2005
Browser changes in 2005
Safari 2 - April 2003Opera 8 - April 2005Opera 9 - June 2005
Trends from 2005
Still dealing with IE, CSS hacks
2006
Browser changes in 2006
Opera 9 - June 2006Internet Explorer 7 - October 2006Firefox 2.0 - October 2006
Trends from 2006
Still dealing with IE, CSS hacks
2007
Browser changes in 2007
Safari 3 - January 2007
Highlights from 2007
Blueprint - May 2007iPhone launches - June 2007SASS - August 2007
Trends from 2007
Abstracting CSS - (CSS Frameworks)
2008
Browsers changes in 2008
Safari 4 - June 2008Firefox 3.0 - June 2008Chrome 0.2 - October 2008Chrome 1.0 - December 2008
Trends from 2008
Abstracting CSS - (CSS Frameworks)
2009
Browser changes in 2009
Internet Explorer 8 - March 2009Chrome 2.0 - May 2009Chrome 3.0 - October 2009Opera 10 - September 2009
Highlights from 2009
OOCSS - Feb 2009LESS - August 2009
Trends from 2009
CSS3, Web fonts, Polyfills, SASS and LESS
2010
Browser changes in 2010
Chrome 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
Highlights from 2010
HTML5 Boilerplate - April 2010Responsive Web Design - May 2010
Trends from 2010
Responsive Web Design, OOCSS
2011
Browser changes in 2011
Chrome 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
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
Highlights from 2011
SMACSS - September 2011
Trends from 2011
Mobile first, RWD, OOCSS, SMACSS, SASS, LESS
2012
Browser changes in 2012
Chrome 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
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
and more...
Opera 12 - June 2012Safari 6 - July 2012Internet Explorer 10 - October 2012
Trends from 2012
Mobile first, RWD, OOCSS, SMACSS, Rethinking CSS
PART 2:
key events
Key events
Here are some of the key events that have helped to alter the way we build websites.
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.”
New browsers = new possibilities
The beginning of abstracting CSS
Frameworks
“A set of tools, libraries, conventions, and best practices that attempt to abstract routine tasks into generic modules that can be reused.”
More efficient, more effective
CSS3
“CSS3 provides us with a wide range of new tools such as border-radius, gradients, shadows, web-fonts, animations, transforms, transitions and more.”
Real fonts in the browser
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.”
Moving from fixed to fluid
Responsive Web Design
“Responsive design is about creating flexible layouts that can adapt to suit the screen size and/or orientation of any device.”
Fully abstracted CSS
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.”
Defining architecture & conventions
SMACSS
“SMACSS is more style guide than rigid framework - an attempt to document a consistent approach to site development when using CSS.”
Writing more efficient & powerful CSS
Preprocessors
“Sass is an extension of CSS3, adding nested rules, variables, mixins and selector inheritance.”
PART 3:
writingbetter CSS?
a radical change in practices
The old wayCSS 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”.
ProblemsWhile the HTML stayed clean, the CSS was often bloated and inefficient.
The new wayToday, 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.
The benefitsWhile the HTML has additional classes, the CSS remains very lean. Implementation and modification is quicker and more efficient.
setting up your CSS architecture
SMACSSUse SMACSS to set up your overall CSS architecture
1. Base2. Layout3. Modules4. States5. Theme
setting up your naming conventions
Avoid IDsUse classes rather than IDs for styling purposes. Classes are more flexible. Using only classes can reduce cascade issues.
#box { }.box { }
Use dashesSeparate class names with dashes
.box-feature { }
.boxFeature { }
.box_feature { }
Use prefixesUse “pseudo-namespaces” as prefixes - so that related classes can easily be identified.
.box-feature { }
.box-heading { }
.box-body { }
.box-content { }
MeaningfulClass names should be meaningful, so that other developers can understand their purpose.
.bbdy { }
.box-body { }
SemanticWhere possible, class names should be semantic rather than presentational.
.box-blue { }
.box-alt1 { }
look for patterns - overall layout
An example layoutLook 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)?
Layout patternsThere are some patterns that can be used to define the overall layout, such as:
wide columnnarrow columnmedium column
wide column narrow column
medium column medium column
wide
narrow
medium medium
wide
narrow
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 { margin-right: 0; }
look for patterns - rows
RowsThere are six distinct rows. These rows can used to clear other page components above and below.
row
row
row
row
row
row
Row module.row{! clear: both;! overflow: hidden;! zoom: 1;! _overflow: visible;}
Row module extendsTwo of these rows have additional characteristics - they have padding and background-color. These two rows can be defined as “extends” - extending the initial module
blue row
pink row
Row module extends.row-alt1,.row-alt2 {! padding: 1em; }
.row-alt1 { ! background: #bfe6ee; }
.row-alt2 { ! background: #edc9e0; }
look for patterns - boxes
BoxesThere are seven boxes with similar characteristics. These could be converted 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 additional characteristics - they have padding and background-color. These two rows can be defined as “extends” - extending the initial module
yellow box
green box
Box module extends.box-alt1,.box-alt2 {! padding: 1em; }
.box-alt1 { ! background: #fbf49b; }
.box-alt2 { ! background: #bfe6ee; }
creating a highly flexible box module
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
box
box-feature box-bodybox-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 module work, even when the widths vary?
wide box narrow box
narrow box
medium box medium box
medium box medium box
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.
Box.box{! overflow: hidden;! zoom: 1;! _overflow: visible;! margin-bottom: 1em;}
Problem 2: placementThe box must work when placed anywhere within the layout.
Solution 2:The box module must be “location agnostic”. The box should not be defined based on it’s location.
aside .box { }.box { }
Problem 3: alignmentDid you notice that the images could sit at the left or right?
left aligned
right aligned
left aligned
left aligned
left aligned
left aligned
left aligned
Solution 3:The image/object must be able to be modified 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 or objects that have varying widths.
large imagesmall image
medium image
small image
medium image
medium image
medium image
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.
box-body
Box body.box-body{! overflow: hidden;! zoom: 1;! _overflow: visible;}
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.
overflow: hidden forces the “box-body” class to sit beside
a floated object, no matter how wide.
changing modules
Modules and extendsWe now have some base modules and “extends”.
.row { }
.row-alt1 { }
.row-alt2 { }
.box { }
.box-alt1 { }
.box-alt2 { }
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?
Rule 1: keep it simpleThe base module should be defined as simply as possible. This means that they are highly flexible.
Rule 2: extend vs modifyBase modules can be extended (with additional “extend “classes), but should never be modified.
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.
some tips when writing CSS
Avoid repetitionAvoid redefining elements throughout your style sheets. How many times do you need to define headings or font-sizes?
h2 { }.intro h2 { }h2 { }
Avoid deep selectorsAvoid deep selectors as these make the cascade unnecessarily complex.
#content #nav ul li a { }
Avoid qualified selectorsAvoid qualified selectors as these are unnecessary.
div.intro {}
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; }
Avoid undoing stylesIf your CSS is written correctly, you should never have to undo previous rules.
.box { float: left; }
.box-feature { float: none; }
Russ WeakleyMax Design
Site: maxdesign.com.auTwitter: twitter.com/russmaxdesignSlideshare: slideshare.net/maxdesignLinkedin: linkedin.com/in/russweakley