CSS: a rapidly changing world

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