Frontend: (re)organize the chaos

Una delle maggiori difficoltà da affrontare per lo sviluppo di un buon front-end, in un progetto web, è l'organizzazione dello stile, tanto apparentemente banale quanto complesso da tenere pulito, riusabile e comprensibile nel tempo." Questo era l'incipit del talk sui css modulari che realizzai a BetterSoftware nel 2012. Il tema è sempre maledettamente attuale e, con un po' più di esperienza, con una nuova organizzazione degli assets rails e la nascita di gemme e convenzioni tipo Sass, Slim, Guard, Grunt ecc, si sono aperte nuove interessanti possibilità che permettono agli sviluppatori di organizzare bene i layout, il markup, codice per unit test, moduli css, utilizzo di mixin e stili comprensibili e mantenibili nel tempo.

Transcript

1. FRONTEND (re)organize the chaos
2. FRONTEND (re)organize the chaos Matteo Papadopoulos @spleenteo @steffoz Stefano Verna
4. Asset Pipeline a.k.a. Sprockets
5. “The new pipeline makes assets a first class citizen in the Rails stack.” Asset Pipeline
6. Asset Pipeline gem 'jquery-rails' ! //= require 'jquery'
7. Asset Pipeline 2011 Rails 3.1
8. Asset Pipeline 2012
9. Asset Pipeline Bower Frontend package manager
10. Asset Pipeline +17.000 packages
11. Asset Pipeline $ npm install -g bower $ bower init
12. Asset Pipeline { "name": "my-project", "dependencies": { "jquery-ui": "~1.11.1", "jquery": "~2.1.1" } } $ cat bower.json
13. Asset Pipeline $ tree bower_components -L 1 ./bower_components "## jquery $## jquery-ui
14. Asset Pipeline So we need two package managers?
15. Asset Pipeline Rails Assets Frictionless proxy between Bundler and Bower
16. Asset Pipeline source 'https://rubygems.org' source 'https://rails-assets.org' ! gem 'rails-assets-jquery-ui'
17. Asset Pipeline Bundler Rails Assets Bower do you have rails-assets-jquery-ui? do you have jquery-ui? sure thing, take it! here's the gem!
18. Asset Pipeline win-win that was easy.
19. Compass “A SASS Framework” Asset Pipeline
20. Compass vendor prefixes typography vertical rhythm grid reset helper functions image-related features Asset Pipeline
21. Compass Asset Pipeline monolithic approach
22. Compass soooo slow Asset Pipeline
23. Compass php syndrome Asset Pipeline
24. Compass Asset Pipeline box-shadow: 10px 10px 5px red;
25. Compass Asset Pipeline +box-shadow(red 10px 10px 5px) box-shadow: 10px 10px 5px red;
26. Compass vendor prefixes typography vertical rhythm grid reset helper functions image-related features Asset Pipeline
27. Compass vendor prefixes image-related features Asset Pipeline
28. Compass unix-like approach Asset Pipeline
29. Asset Pipeline vendor prefixes
30. Asset Pipeline 100% Sass mixin library
31. Asset Pipeline CSS post-processor Autoprefixer gem 'autoprefixer-rails'
32. Asset Pipeline a { display: flex; } > 1% last 2 versions Firefox ESR Opera 12.1 a { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex }
33. Compass vendor prefixes image-related features Asset Pipeline
34. Asset Pipeline image-related features sprites webfont high DPI images support lossless image compression …
35. Asset Pipeline task management tools
36. Asset Pipeline GRUNT GULP BROCCOLI
37. Asset Pipeline +3400 tasks mostly frontend-related
38. Asset Pipeline $ npm install -g grunt-cli
39. Asset Pipeline $ cat package.json { "name": "my-project", "dependencies": { "grunt": "~1.11.1", "grunt-bemo": "~2.1.1", ... } } $ npm install
40. Asset Pipeline # Gruntfile.js ! module.exports = function(grunt) { grunt.loadNpmTasks('grunt-bemo'); ! grunt.initConfig({ bemo: { webfonts: { src: "app/assets/fonts/svg", fontDest: "app/assets/fonts", sassDest: "app/assets/stylesheets/_icon-glyphs.css.scss" }, sprites: { src: "app/assets/images/sprites", imageDest: "app/assets/images/sprites-{{density}}.png", sassDest: "app/assets/stylesheets/_sprites.css.scss" } } }); };
41. Asset Pipeline $ grunt bemo ! Running "bemo-sprites" task ... ! Running "bemo-webfonts" task ...
42. Asset Pipeline JS/Coffee code linter JS/Coffee code style checker Live reload SVG/PNG/JPG optimizer Inline assets Unused CSS removal ...
43. Asset Pipeline Recap Use Bower packages, not gems Rails Assets Replace Compass Bourbon/Autoprefixer Grunt/Gulp/Broccoli
44. Writing Sass
45. Writing Sass $ rails generate controller books create app/controllers/books_controller.rb invoke erb create app/views/books invoke helper create app/helpers/books_helper.rb invoke assets invoke coffee create app/assets/javascripts/books.js.coffee invoke scss create app/assets/stylesheets/books.css.scss Rails conventions
46. OOCSS Object-oriented CSS Writing Sass Organize the chaos v1 2012 - http://goo.gl/6ZRJm4
47. OOCSS A CSS “object” is a repeating visual pattern, that can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript. That object can then be reused throughout a site. Writing Sass
51. Writing Sass
53. Writing Sass media object
54. Writing Sass .media display: table width: 100% ! .media .img, .media .body display: table-cell vertical-align: top ! .media .img padding-right: 10px <div class="media"> ! <div class="img"> <img src="..." /> </div> ! <div class="body"> ... </div> ! </div>
55. Writing Sass No margins, no positioning, 100% width .media display: table width: 100% ! .media .img, .media .body display: table-cell vertical-align: top ! .media .img padding-right: 10px
56. Writing Sass Location indipendence Let the context choose your positioning Be fluid: always expand to take the full width of the container
57. Writing Sass Just class selectors? .media display: table width: 100% ! .media .img, .media .body display: table-cell vertical-align: top ! .media .img padding-right: 10px
58. Writing Sass ID selectors Limit reuse within the same page Tag selectors Force a semantic Carpet bombing
59. .media display: table width: 100% ! .media .img, .media .body display: table-cell vertical-align: top ! .media .img padding-right: 10px Writing Sass Wait, what about descendent selectors?
60. Writing Sass Descendent selectors Carpet bombing (again) Potential name clashing
61. Writing Sass Descendent selectors Do not use them.
62. Writing Sass .media display: table width: 100% ! .media .img, .media .body display: table-cell vertical-align: top ! .media__img padding-right: 10px
63. Writing Sass .media display: table width: 100% ! .media__img, .media__body display: table-cell vertical-align: top ! .media__img padding-right: 10px
64. BEM Writing Sass Block • Element • Modifier
65. Writing Sass .media display: table width: 100% ! .media__img, .media__body display: table-cell vertical-align: top ! .media__img padding-right: 10px Block (CSS object) Block element
66. Writing Sass Block (CSS object) .nav-bar .nav-bar__logo Block element
67. Writing Sass Block (CSS object) .nav-bar .nav-bar__logo Block element .nav-bar--primary Modifier
68. Writing Sass .media // .... ! .media--rev direction: rtl text-align: left ! .media__img padding-right: 0px padding-left: 10px <div class="media media--rev"> ! <div class="media__img"> <img src="..." /> </div> ! <div class="media__body"> ... </div> ! </div>
69. Writing Sass .nav-bar--primary__logo--dark
70. Writing Sass But it's verbose and ugly and...! CSS has limited character set. Deal with it.
71. Writing Sass Remember the pros! No more name clashing ! No more overrides ! Trivial to understand and maintain your codebase
73. Structure Writing Sass
74. Writing Sass . "## application.css.sass "## _base.css.sass "## _font-faces.css.sass "## blocks % "## _button.css.sass % "## _media.css.sass % $## ... "## functions % $## ... "## mixins % $## ... $## variables $## ... Root file
75. Writing Sass . "## application.css.sass "## _base.css.sass "## _font-faces.css.sass "## blocks % "## _button.css.sass % "## _media.css.sass % $## ... "## functions % $## ... "## mixins % $## ... $## variables $## ... // Silent code @import 'functions/**/*' @import 'variables/**/*' @import 'bourbon' @import 'mixins/**/*' ! // Font faces @import 'font-faces' ! // Base @import 'normalize-scss' @import 'base' ! // Blocks @import 'blocks/**/*'
76. Writing Sass // Silent code @import 'functions/**/*' @import 'variables/**/*' @import 'bourbon' @import 'mixins/**/*' ! // Font faces @import 'font-faces' ! // Base @import 'normalize-scss' @import 'base' ! // Blocks @import 'blocks/**/*' gem "sass-globbing"
77. Writing Sass . "## application.css.sass "## _base.css.sass "## _font-faces.css.sass "## blocks % "## _button.css.sass % "## _media.css.sass % $## ... "## functions % $## ... "## mixins % $## ... $## variables $## ... // Silent code @import 'functions/**/*' @import 'variables/**/*' @import 'bourbon' @import 'mixins/**/*' ! // Font faces @import 'font-faces' ! // Base @import 'normalize-scss' @import 'base' ! // Blocks @import 'blocks/**/*'
78. . "## application.css.sass "## _base.css.sass "## _font-faces.css.sass "## blocks % "## _button.css.sass % "## _media.css.sass % $## ... "## functions % $## ... "## mixins % $## ... $## variables $## ... // Silent code @import 'functions/**/*' @import 'variables/**/*' @import 'bourbon' @import 'mixins/**/*' ! // Font faces @import 'font-faces' ! // Base @import 'normalize-scss' @import 'base' ! // Formats @import 'formats/**/*' ! // Blocks @import 'blocks/**/*' Writing Sass Configuration functions mixins
79. // Silent code @import 'functions/**/*' @import 'variables/**/*' @import 'bourbon' @import 'mixins/**/*' ! // Font faces @import 'font-faces' ! // Base @import 'normalize-scss' @import 'base' ! // Formats @import 'formats/**/*' ! // Blocks @import 'blocks/**/*' Writing Sass . "## application.css.sass "## _base.css.sass "## _font-faces.css.sass "## blocks % "## _button.css.sass % "## _media.css.sass % $## ... "## functions % $## ... "## mixins % $## ... $## variables $## ... Default styling, Basefile
80. Writing Sass html, body ! a ! ul, ol, blockquote ! li ! h1, h2, h3, h4, h5, h6, hgroup, ul, ol, dd, p, figure, pre, table, fieldset, hr, form ! input, textarea ! input[type="submit"], button
81. // Silent code @import 'functions/**/*' @import 'variables/**/*' @import 'bourbon' @import 'mixins/**/*' ! // Font faces @import 'font-faces' ! // Base @import 'normalize-scss' @import 'base' ! // Blocks @import 'blocks/**/*' Writing Sass . "## application.css.sass "## _base.css.sass "## _font-faces.css.sass "## blocks % "## _button.css.sass % "## _media.css.sass % $## ... "## functions % $## ... "## mixins % $## ... $## variables $## ... 99% of the code is here!
82. Writing Sass one block per file group blocks into subdirectories
83. Asset Pipeline Recap Rails per-controller modularity is not scalable OCCSS is a better solution BEM How to structure our Rails stylesheets directory
84. BEMO Writing Sass
85. Asset Pipeline Bemo http://github.com/stefanoverna/bemo Project starter/Scaffolder Common BEM blocks library Grunt tasks for retina-ready sprites and web fonts
86. THANKS! question time Matteo Papadopoulos @spleenteo @steffoz Stefano Verna