WARNING! This speech is a bit old. Pls, take (also) a look to the new one http://www.slideshare.net/spleenteo/frontend-reorganize-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.

1. Modular
CSS / HTML5
Organize the chaos
Thursday, September 27, 12

2. Module
Thursday, September 27, 12

3. module definition
is something
predetermined,
standard, intended to be
repeated several times.
Thursday, September 27, 12

4. programming
A module is a stand-
alone software
component, well
identified and easily
reusable
Thursday, September 27, 12

5. stereotype(!)
too complex
woody
too extended
twisted
Thursday, September 27, 12

6. stereotype(!) good points
too complex essentials
woody mantianence
too extended readable
twisted 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. remind
A web page is a
collection of modules
Thursday, September 27, 12

11. remind
A web page is a
collection of modules
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. an eye opener in 2007
Rails MVC
model, view, controller
separating db, logic & presentation
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. SASS features
•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
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. Structure
•base
•layout
•modules
•sections
•themes
Thursday, September 27, 12

53. Structure
•base
•layout
•modules
•sections
•themes
Thursday, September 27, 12

54. Structure
•base
•layout
•modules
•sections
•themes
Thursday, September 27, 12

55. Structure
•base
•layout
•modules
•sections
•themes
Thursday, September 27, 12

56. Structure
•base
•layout
•modules
•sections
•themes
Thursday, September 27, 12

57. Structure
•base
•layout
•modules
•sections
•themes
Thursday, September 27, 12

58. Structure
•base
•layout
•modules
•sections
•themes
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