tmaslen/gist:7785915

## gistfile1.txt
HTML + CSS are not mutually exclusive

Semantic HTML is one of the foundations of modern, professional web development.  Semantic HTML is important to us because it increases the machine readability of a website, this is vital for SEO indexing and accessibility (screen readers).  But machines read element names and property values, you make HTML more semantic by applying the correct element and by using id and href properties.

Search engine bots and screen readers take no semantic value from classes.  Classes are semantic in the fact that they describe to us what they are for, but the primary purpose of them is to serve as hooks for developers to hang JS and CSS onto.  Classes are semantically useful for describing how they will be presented, not what the content is about.

The most important thing for class name semantics in non-trivial (i.e. complex) applications is that they be driven by pragmatism and best serve their primary purpose - providing meaningful, flexible and reusable presentational/behavioural hooks for developers to use.

We add additional HTML (normally <div>s) to help us render the presentation of a webpage all the time.  <div>s have no semantic meaning, yet they are the most common element.

More info: http://nicolasgallagher.com/about-html-semantics-front-end-architecture/

Component modifiers

Writing CSS requires either complex selectors (#header .logo img) or complex classes.  Non-trivial amounts of CSS become hard to manage because CSS cascades, everything is in the global scope.  Its very easy to run into speficity problems when CSS gets to a certain size.  Any CSS on the page can have a knock on effect on anything in the DOM.  A warning sign becomes when you have to use "!important" values in your CSS properties.

Modern methodologies for writing CSS (BEM, OOCSS, SMACCS) all to tackle this by using very low specificity.  BBC News currently uses BEM methodology, this involves (mostly) using single class names for everything.

Ease of maintenance and new feature creation is more important than chasing an ideal of HTML semantics.  Semantic HTML is important for SEO and accessibility, but this relates to the correct use of HTML elements, and certain properties like href and id.  Class names serve no semantic meaning to search engines or end users.

There are two options when writing CSS

- Use strict content semantic names with CSS, and create complex selector values in the CSS using a mixture of classnames, ids and native elements
- Use presentational class names in the HTML and keep the CSS selectors as short as possible.

You can either have the complexity in the CSS with long selectors, or you can have the complexity in the HTML with many class names.

With small amounts of CSS, the differences in approaches are very small, but with non-trivial sized codebases, ease of maintainance and new feature creation become very important.

Using single classnames instead of complex selectors have two big benefits:

1) Its obvious to a developer what CSS is being applied to that specific section of HTML.  Relationships are traceable from both the HTML and CSS
2) Specificity is kept low, so modifying components is easy.

Using content driven semantic classnames have drawbacks:

1) making blocks of component styles is harder because:
   i) you require selector lists
  ii) style definitions are specified in multiple areas of your CSS
2) Additional HTML and classes have to be added to the HTML anyway, keeping to the content semantic naming becomes more and more isoteric as you have to find ways of making repeating styles relate to one another
3) Tracing relationships is harder as they are one to many (HTML to CSS)

Nobody delivers HTML and CSS separately, they are inherently deeply coupled.  The only public example of HTML and CSS delivered separately is CSS Zend Garden.  This is a dangerous false prophet to the idealists who chase semantic perfection.  Designs in Zen Garden are defined by what is possible with the limited structure of the HTML, and not led by a separate UX process.
	HTML + CSS are not mutually exclusive

	Semantic HTML is one of the foundations of modern, professional web development. Semantic HTML is important to us because it increases the machine readability of a website, this is vital for SEO indexing and accessibility (screen readers). But machines read element names and property values, you make HTML more semantic by applying the correct element and by using id and href properties.

	Search engine bots and screen readers take no semantic value from classes. Classes are semantic in the fact that they describe to us what they are for, but the primary purpose of them is to serve as hooks for developers to hang JS and CSS onto. Classes are semantically useful for describing how they will be presented, not what the content is about.

	The most important thing for class name semantics in non-trivial (i.e. complex) applications is that they be driven by pragmatism and best serve their primary purpose - providing meaningful, flexible and reusable presentational/behavioural hooks for developers to use.

	We add additional HTML (normally <div>s) to help us render the presentation of a webpage all the time. <div>s have no semantic meaning, yet they are the most common element.

	More info: http://nicolasgallagher.com/about-html-semantics-front-end-architecture/

	Component modifiers

	Writing CSS requires either complex selectors (#header .logo img) or complex classes. Non-trivial amounts of CSS become hard to manage because CSS cascades, everything is in the global scope. Its very easy to run into speficity problems when CSS gets to a certain size. Any CSS on the page can have a knock on effect on anything in the DOM. A warning sign becomes when you have to use "!important" values in your CSS properties.

	Modern methodologies for writing CSS (BEM, OOCSS, SMACCS) all to tackle this by using very low specificity. BBC News currently uses BEM methodology, this involves (mostly) using single class names for everything.

	Ease of maintenance and new feature creation is more important than chasing an ideal of HTML semantics. Semantic HTML is important for SEO and accessibility, but this relates to the correct use of HTML elements, and certain properties like href and id. Class names serve no semantic meaning to search engines or end users.

	There are two options when writing CSS

	- Use strict content semantic names with CSS, and create complex selector values in the CSS using a mixture of classnames, ids and native elements
	- Use presentational class names in the HTML and keep the CSS selectors as short as possible.

	You can either have the complexity in the CSS with long selectors, or you can have the complexity in the HTML with many class names.

	With small amounts of CSS, the differences in approaches are very small, but with non-trivial sized codebases, ease of maintainance and new feature creation become very important.

	Using single classnames instead of complex selectors have two big benefits:

	1) Its obvious to a developer what CSS is being applied to that specific section of HTML. Relationships are traceable from both the HTML and CSS
	2) Specificity is kept low, so modifying components is easy.

	Using content driven semantic classnames have drawbacks:

	1) making blocks of component styles is harder because:
	i) you require selector lists
	ii) style definitions are specified in multiple areas of your CSS
	2) Additional HTML and classes have to be added to the HTML anyway, keeping to the content semantic naming becomes more and more isoteric as you have to find ways of making repeating styles relate to one another
	3) Tracing relationships is harder as they are one to many (HTML to CSS)

	Nobody delivers HTML and CSS separately, they are inherently deeply coupled. The only public example of HTML and CSS delivered separately is CSS Zend Garden. This is a dangerous false prophet to the idealists who chase semantic perfection. Designs in Zen Garden are defined by what is possible with the limited structure of the HTML, and not led by a separate UX process.