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

Frontend: (re)organize the chaos

Avatar for Stefano Verna 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.

Avatar for Stefano Verna

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