un-semantic CSS

From 960.gs to OOCSS, it's time to move on to the era of "un-semantic CSS".

Talked on HappyDesigner Mini 分享會 #1. http://registrano.com/events/happydesigner-mini-1

Transcript

1. un-semantic CSS from 960.gs to Bootstrap
2. I am @minipai I use css framework.
3. 2008 960 grid system
4. It’s Not Semantic!
5. http://coding.smashingmagazine.com/2011/08/23/ the-semantic-grid-system-page-layout-for-tomorrow/ SAMPLE
6. 2011 Twitter Bootstrap
7. It’s Not Semantic!
8. http://ruby.bvision.com/blog/ please-stop-embedding-bootstrap-classes-in-your-html SAMPLE
9. Semantic What?
10. http://boagworld.com/dev/semantic-code-what-why-how/
11. <font size=”24”> <b>This is the page title<b> </font> <h1>This is a heading</h1> not semantic semantic html
12. https://speakerdeck.com/nathansmith/960-grid-system
13. Semantic HTML ≠ Semantic CSS
14. 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.
15. It’s Best Practice!
17. 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.
18. Semantic CSS It’s a coding style It’s not the BEST Time to move on
19. Raise of un-semantic CSS BEM http://bem.info/ OOCSS https://github.com/stubbornella/oocss/wiki SMACSS https://smacss.com/
20. How to learn 1. Use Bootstrap without guilt. 2. Read OOCSS or SMACSS. 3. Built your own component. 4. Be happy!
21. Thank You.