Modular CSS and HTML5: Organize the chaos

This is a resume of my talk presented at Better Software 2012, Florence (IT). It just a quick preflight for this topic that includes lot of different technologies. It's a mix of best practices for frontend web developments, styles, file structure, tools, especially SASS.

Transcript

1. Modular CSS / HTML5 Organize the chaos Thursday, September 27, 12
2. Module Thursday, September 27, 12
3. is something predetermined, standard, intended to be repeated several times. module definition Thursday, September 27, 12
4. A module is a stand- alone software component, well identified and easily reusable programming Thursday, September 27, 12
5. stereotype(!) too complex woody too extended twisted Thursday, September 27, 12
6. stereotype(!) too complex woody too extended twisted good points essentials mantianence readable reusable Thursday, September 27, 12
7. when to use modular CSS? Thursday, September 27, 12
8. always! Thursday, September 27, 12
9. choose how to use modular CSS! Thursday, September 27, 12
10. A web page is a collection of modules remind Thursday, September 27, 12
11. A web page is a collection of modules remind Thursday, September 27, 12
12. who I am Thursday, September 27, 12
13. who I am matteo papadopoulos @spleenteo front end muddle-headed ruby on rails / django www.cantierecreativo.net Thursday, September 27, 12
14. be precise is an extremely hard work Thursday, September 27, 12
15. save yourself the trouble be DRY don’t repeat yourself Thursday, September 27, 12
16. Modular HTML5 the age of the hope Thursday, September 27, 12
17. HTML 4 to 5 Thursday, September 27, 12
18. HTML 4 to 5 Thursday, September 27, 12
19. Roy Tomeij / @roy Thursday, September 27, 12
20. Roy Tomeij / @roy All sections can start with <h1> Screw SEO “experts” Thursday, September 27, 12
21. choose a side. In all cases google will choose for us! Thursday, September 27, 12
22. use JS libs as HTML5 SHIV and Modernizer Thursday, September 27, 12
23. DIVs are not evil Thursday, September 27, 12
24. Sketching: draw it raw Thursday, September 27, 12
25. Sketching: draw it raw Thursday, September 27, 12
26. Sketching: draw it raw Thursday, September 27, 12
27. define your objects Thursday, September 27, 12
28. define your objects Thursday, September 27, 12
29. define your objects Thursday, September 27, 12
30. “NO Style” markup Thursday, September 27, 12
31. “NO Style” markup Thursday, September 27, 12
32. finally: a module Thursday, September 27, 12
33. finally: a module Thursday, September 27, 12
34. think object oriented “OO” Thursday, September 27, 12
35. OO is made in our image and likeness don’t be scared discover it http://processing.org/learning/objects/ Thursday, September 27, 12
36. God was the nerd of all nerds because he made ​​the universe in just six days using OO! Thursday, September 27, 12
37. Spaghetti Code vs MVC Thursday, September 27, 12
38. <?php ?> query.sql + functions(){ $variables + <tables> + } + <div style=””> + $_GLOBALS + <<<EOF + js (early 2000’s style) Thursday, September 27, 12
39. Rails MVC model, view, controller separating db, logic & presentation an eye opener in 2007 Thursday, September 27, 12
40. CSS good practices Thursday, September 27, 12
41. CSS good practices Oh, no! AGAIN?!? Thursday, September 27, 12
42. find a strong RESET Thursday, September 27, 12
43. I do prefer classes instead of IDs Thursday, September 27, 12
44. be verbose naming classes and assets Thursday, September 27, 12
45. selectors the greats unknown learn how to use’em Thursday, September 27, 12
46. if you need !IMPORTANT there’s something wrong Thursday, September 27, 12
47. SASS / Scss can’t live without you Thursday, September 27, 12
48. •variables like $white: #FFF •math like 10px + 10px = 20px •@mixins as functions ($with_params) •logic like IF/ELSE FOR •nested classes •compiled css extended or compact SASS features Thursday, September 27, 12
49. SCSS example compiled Thursday, September 27, 12
50. SCSS example compiled Thursday, September 27, 12
51. Modular CSS one module = one class = one file Thursday, September 27, 12
52. •base •layout •modules •sections •themes Structure Thursday, September 27, 12
53. •base •layout •modules •sections •themes Structure Thursday, September 27, 12
54. •base •layout •modules •sections •themes Structure Thursday, September 27, 12
55. •base •layout •modules •sections •themes Structure Thursday, September 27, 12
56. •base •layout •modules •sections •themes Structure Thursday, September 27, 12
57. •base •layout •modules •sections •themes Structure Thursday, September 27, 12
58. •base •layout •modules •sections •themes Structure Thursday, September 27, 12
59. the bridging technique @import every single scss to your application.css Thursday, September 27, 12
60. bridging: before / after Thursday, September 27, 12
61. bridging: before / after Thursday, September 27, 12
62. application.scss Thursday, September 27, 12
63. application.scss Thursday, September 27, 12
64. application.scss Thursday, September 27, 12
65. 5 reasons to bridge Thursday, September 27, 12
66. 5 reasons to bridge •clean file •manteinance •readable •performance •caching Thursday, September 27, 12
67. Responsive design Thursday, September 27, 12
68. Responsive ain’t so easy! Thursday, September 27, 12
69. media queries belong to a module, so keep them within the same scope Thursday, September 27, 12
70. media queries belong to a module, so keep them within the same scope Thursday, September 27, 12
71. Happy ending “After having built a few hundreds of sites I would have discovered the “one true way” of doing it. I don’t think there is one true way” (Scalable and Modular Architecture for CSS - Jonathan Snook) Thursday, September 27, 12
72. Better Software 2012 firenze Thursday, September 27, 12
73. Better Software 2012 firenze www.cantierecreativo.net Thursday, September 27, 12