un-semantic CSS from 960.gs to Bootstrap 

I am @minipai I use css framework. 

2008 960 grid system 

It’s Not Semantic! 

http://coding.smashingmagazine.com/2011/08/23/ the-semantic-grid-system-page-layout-for-tomorrow/ SAMPLE 

2011 Twitter Bootstrap 

It’s Not Semantic! 

http://ruby.bvision.com/blog/ please-stop-embedding-bootstrap-classes-in-your-html SAMPLE 

Semantic What? 

http://boagworld.com/dev/semantic-code-what-why-how/ 

This is the page title

This is a heading

not semantic semantic html 

https://speakerdeck.com/nathansmith/960-grid-system 

Semantic HTML ≠ Semantic CSS 

Semantic CSS http://www.w3.org/TR/html5/dom.html#classes There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content. 

It’s Best Practice! 

No content

About HTML semantics and front-end architecture http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ Despite the HTML5 specification section on classes repeating the assumed “best practice” that… …authors are encouraged to use [class attribute] values that describe the nature of the content, rather than values that describe the desired presentation of the content. …there is no inherent reason to do this. In fact, it’s often a hindrance when working on large websites or applications. 

Semantic CSS It’s a coding style It’s not the BEST Time to move on 

Raise of un-semantic CSS BEM http://bem.info/ OOCSS https://github.com/stubbornella/oocss/wiki SMACSS https://smacss.com/ 

How to learn 1. Use Bootstrap without guilt. 2. Read OOCSS or SMACSS. 3. Built your own component. 4. Be happy! 

Thank You.