Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Frontend: (re)organize the chaos

Stefano Verna
September 26, 2014

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.

Stefano Verna

September 26, 2014
Tweet

More Decks by Stefano Verna

Other Decks in Programming

Transcript

  1. 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!
  2. 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 }
  3. Asset Pipeline $ cat package.json { "name": "my-project", "dependencies": {

    "grunt": "~1.11.1", "grunt-bemo": "~2.1.1", ... } } $ npm install
  4. 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" } } }); };
  5. Asset Pipeline JS/Coffee code linter JS/Coffee code style checker Live

    reload SVG/PNG/JPG optimizer Inline assets Unused CSS removal ...
  6. Asset Pipeline Recap Use Bower packages, not gems Rails Assets

    Replace Compass Bourbon/Autoprefixer Grunt/Gulp/Broccoli
  7. 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
  8. 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
  9. 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>
  10. 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
  11. Writing Sass Location indipendence Let the context choose your positioning

    Be fluid: always expand to take the full width of the container
  12. 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
  13. Writing Sass ID selectors Limit reuse within the same page

    Tag selectors Force a semantic Carpet bombing
  14. .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?
  15. Writing Sass .media display: table width: 100% ! .media .img,

    .media .body display: table-cell vertical-align: top ! .media__img padding-right: 10px
  16. Writing Sass .media display: table width: 100% ! .media__img, .media__body

    display: table-cell vertical-align: top ! .media__img padding-right: 10px
  17. 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
  18. 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>
  19. Writing Sass But it's verbose and ugly and...! CSS has

    limited character set. Deal with it.
  20. Writing Sass Remember the pros! No more name clashing !

    No more overrides ! Trivial to understand and maintain your codebase
  21. Writing Sass . "## application.css.sass "## _base.css.sass "## _font-faces.css.sass "##

    blocks % "## _button.css.sass % "## _media.css.sass % $## ... "## functions % $## ... "## mixins % $## ... $## variables $## ... Root file
  22. 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/**/*'
  23. 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"
  24. 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/**/*'
  25. . "## 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
  26. // 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
  27. 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
  28. // 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!
  29. Asset Pipeline Recap Rails per-controller modularity is not scalable OCCSS

    is a better solution BEM How to structure our Rails stylesheets directory