1. Professional front-end development

  2. #bada55 CSS

  3. Inhoud

  4. Responsive

    Conventies, best practices, net als bij ‘normaal’ programmeren

  5. Kort: CSS selector best practices

  6. Specificity

    Selector Inline styles ID's Classes,
    attributes, pseudo-selectors
    Elements, pseudo-elements Specificity
    #wrapper p 0 1 0 1 0101
    .right_col p 0 0 1 1 0011
    input[type="text"] 0 0 1 1 0011
    .textinput 0 0 1 0 0010

    Oplossing: gebruik classes voor alles!

  7. OOP + CSS => OOCSS

    Bekende patronen uit OO talen toepassen op css.


    .Label {}
    .Tooltip {}
    .Nav {}
    .Icon {}
    .Modal {}
    
  8. BEM

    Block, Element, Modifier

    • (consistent) Classnames verzinnen moeilijk
    • BEM geeft relaties tussen classes binnen een object aan
    • Brug tussen design en development
    .Car {
      color: green;
      float: none;
    }
      
    .Car--Batmobile {
      color: black;
    }
    
    .Car__Wheel {
      color: black;
      border-color: black;
    }
    
    .Car__Wheel--WhiteWall {
      border-color: white;
    }
    
  9. BEM in real life

    <span class="Label">Recommended</span>
    
    <span class="Label Label--Alt">Upsell stuff!</span>
    
    <span class="Label">
      <i class="Icon Icon--Euro Label__Icon"></i>
      Buy Now
    </span>

    Recommended

    Upsell stuff!

    Buy now!
    .Label {
      display: inline-block;
      border: 1px solid;
      background: green;
      color: white;
    }
    
    .Label--Alt {
      background-color: blue;
    }
    
    .Label__Icon {
      vertical-align: -0.325em;
      font-size: 2em;
    }
  10. SASS

    Toolbox: data-types, imports, variables, loops, functions:

    @import 'math/functions', 'settings';
       
    @each $bp-name, $bp-width in $breakpoints {
      @include breakpoint( $bp-width ) {
        @for $col from $base-grid-columns {
          .#{$bp-name}-#{$col} {
            width: percentage( $col / $base-grid-columns );
          }
        }
      }
    }

    output:

    .init-12 { width: 91.6666%; }
    .init-1  { width: 8.3334%; }
    
    @media screen and (min-width: 33em) {
      .medium-12 { width: 91.6666%; }
      .medium-1  { width: 8.3334%; }
    }
    
    @media screen and (min-width: 55em) {
      .large-12 { width: 91.6666%; }
      .large-1  { width: 8.3334%; }
    }
  11. CSS Architectuur

    Gelaagde architectuur voor verschillende niveaus van abstractie.

    • Core: basisobjecten zoals grid, media, mixins, etc.
    • Skin: bevat de branding-specifieke zaken als kleuren, fonts, etc.
    • Theme: Specifieke objecten per portal (Drukwerkdeal.nl, careers.printdeal.com, Zendesk).
  12. Cool. En nu?

    Tools, Testing & Quality Control

  13. Wat willen we kunnen?

  14. Ok. Wat nog meer?

  15. Enter: Gulp

    Doet. Alles.

    gulp.task("css:sass", function () {
        var themeHookFiles = config.paths.css.themes.map(function (theme) {
            return theme.folder + theme.name + ".scss";
        });
    
        return gulp.src(themeHookFiles)
            .pipe($.rubySass(config.settings.rubySass))
            .pipe($.autoprefixer(config.settings.autoprefixer))
            .pipe($.header(config.file.banner, { pkg: pkg }))
            .pipe(gulp.dest(config.paths.css.test))
    
            .pipe($.minifyCss(config.settings.minifyCss))
            .pipe($.header(config.file.banner, { pkg: pkg }))
            .pipe($.rename({ suffix: ".min" }))
            .pipe(gulp.dest(config.paths.css.test));
    });

    $ gulp css:sass
  16. Style Guide

  17. Nieuwe objecten

    Verklein de effort: meer nieuw = meer testen, documenteren, etc.

  18. Let's talk about LEGO

  19. Inzicht:

  20. Code stats

  21. Specificity Graph

    See the Pen Specificity graph by Bart Veneman (@bartveneman) on CodePen.

  22. Resultaat: kwaliteit