Test-proof CSS

An overview on nodejs tools I use @ ideato to test my CSS generated by LESS or SASS.

Transcript

1. Test-proof CSS
   vittorio vittori
   @vttrx
   #css-testing
   

   View Slide

2. As a front-end developer
   I write CSS, HTML and JavaScript
   for different size projects
   

   View Slide

3. sometimes we start
   SMALL PROJECTS
   some HTML templates
   mobile ready
   LESS, SASS or CSS
   

   View Slide

4. sometimes we start
   BIG PROJECTS
   many templates
   PHP/JS template engines
   all responsive
   retina support
   a lot of LESS or SASS
   

   View Slide

5. sometimes we work on
   PROJECTS THAT NEEDS HELP
   huge project
   no template engines
   no coding standard
   half working
   CSS only
   

   View Slide

6. and
   we make
   MISTAKES.
   

   View Slide

7. we make mistakes
   It’s normal
   It's the main way to
   grow and learn
   me
   excluded!
   

   View Slide

8. but sometimes
   a small mistake
   can lead to a big problem
   

   View Slide

9. checkout
   t-shirt 8.00 $
   Sport bag 22.50 $
   Golf club 95.00 $
   total 125.50 $
   suppose a 25.000 $/day seller site
   

   View Slide

10. checkout
    t-shirt 8.00 $
    Sport bag 22.50 $
    Golf club 95.00 $
    total 125.50 $
    Chrome render
    60% of users
    IE8 render
    40% of users
    suppose a 25.000 $/day seller site
    

    View Slide

11. .buy-bg {
    /* background-color: #ECECEC; */
    background-color: rgba(0,0,0,0.15);
    }
    this is a missing fallback color
    

    View Slide

12. rgbwhat??
    your client can say goodbye to
    10.000$ per day
    until you fix
    the missing fallback color
    

    View Slide

13. how can I avoid these problems
    without being crazy?
    

    View Slide

14. CSSLINT
    a tool to test CSS problems
    

    View Slide

15. • Possible Errors
    • Disallow duplicate properties
    • Disallow empty rules
    • Require use of known properties, etc…
    • Compatibility
    • Require compatible vendor prefixes
    • Require all gradient definitions
    • Require fallback colors, etc…
    • Performance
    • Disallow units for zero values, etc…
    • Maintainability & Duplication
    • Disallow IDs in selectors, etc…
    • Accessibility
    • OOCSS
    Rule types github.com/CSSLint/csslint
    

    View Slide

16. how it works?
    CSSLINT
    style.css
    report
    .csslintrc
    

    View Slide

17. CSSLINT / syntax checking
    also on some text editors
    jetbrains.com/phpstorm sublimetext.com
    gruntjs.com
    nodejs.org gulpjs.com
    

    View Slide

18. RESEMBLEJS
    a tool to test regression mistakes
    

    View Slide

19. how a regression test works?
    image
    created
    

    View Slide

20. how a regression test works?
    image
    created
    image
    changed
    

    View Slide

21. THE DIFFERENCE
    the result
    if the image is changed
    you’ll see it
    

    View Slide

22. suppose a BIG WEBSITE
    with tons of different widgets
    needed to be reused in different places
    

    View Slide

23. how RESEMBLEJS works?
    RESEMBLEJS
    page-01.html
    page-02.html
    test PASSED
    page-…html
    fingerprints
    casper
    }
    

    View Slide

24. fingerprints
    how RESEMBLEJS works?
    RESEMBLEJS
    …01.html
    …02.html
    test FAIL
    …html
    new images
    casper
    

    View Slide

25. v
    Sometimes
    they need specific state
    relative to the view for design needs
    this helps you to keep
    changes isolated on the page
    

    View Slide

26. v
    regression tests should be on
    static HTML templates to:
    • avoid fails by fixtures changes
    • get faster tests performance
    • get less test writing costs
    

    View Slide

27. RESEMBLEJS / regression tests
    gruntjs.com
    nodejs.org
    can be used with
    phantomjs.org casperjs.org
    BackstopJS gulpjs only
    github.com/garris/BackstopJS
    PhantomCSS
    github.com/Huddle/PhantomCSS
    gulpjs.com
    

    View Slide

28. UNCSS
    a tool to remove unused selectors
    

    View Slide

29. how it works?
    UNCSS
    page-01.html
    page-02.html
    style.uncssed.css
    page-…html
    style.css
    

    View Slide

30. CSS
    .logo {
    background-image: url(…);
    }
    .js-selector {
    position: fixed;
    }
    div header {
    background-color: pink;
    }
    nav {
    padding: 20px;
    }
    

    View Slide

31. HTML
    
    
    
    
    Hello
    
    
    
    

    View Slide

32. CSS
    .logo {
    background-image: url(…);
    }
    .js-selector {
    position: fixed;
    }
    div header {
    background-color: pink;
    }
    nav {
    padding: 20px;
    }
    WHITE LIST
    KEPT
    DELETED
    KEPT
    

    View Slide

33. UNCSS / unused styles remover
    nodejs.org
    can be used with
    gulpjs.com
    gruntjs.com
    

    View Slide

34. STYLESTATS
    a tool to see how you wrote your styles
    

    View Slide

35. how it works?
    STYESTATS
    style.css
    report
    

    View Slide

36. Published Wed Feb 25 2015…
    Paths github.css
    Stylesheets 1
    Size 231.0KB
    Data Uri Size 0
    Rules 2957
    Selectors 3289
    Simplicity 89.91%
    Most Identifiers 4
    Most Identifiers Selector .is-uploading .avatar…
    Lowest Cohesion 24
    Lowest Cohesion Selector .add-line-comment
    Total Unique Font Sizes 36
    Unique Font Size 0.9em
    …
    Total Unique Colors 66
    Unique Color #000
    …
    and so on…
    

    View Slide

37. STYLESTATS / unused styles remover
    gruntjs.com
    nodejs.org
    can be used with
    gulpjs.com
    

    View Slide

38. how I choose which tests to use?
    OBJECTIVES - dev priority

    Client needs, which browsers, UX needed

    COMPLEXITY

    Team size, tasks diversity, to-do list

    BUDGET - client priority

    Setup time, writing and testing time
    

    View Slide

39. Is that all with tests/tools?
    no, there are tons of nodesjs and gruntjs plug-ins
    WHAT TYPE
    csslint syntax test
    ResembleJS layout regression test
    uncss unused selectors tool
    StyleStats css stats tool
    checkout http:/
    /csste.st to see more
    

    View Slide

40. SMALL
    WHAT USE
    csslint Y
    ResembleJS N
    uncss O
    StyleStats O
    less budget margins
    BIG
    WHAT USE
    csslint Y
    ResembleJS Y
    uncss Y
    StyleStats Y
    more budget,
    handle complexity,
    front-end under control
    Y
    N
    O
    YES
    NOT RECOMMENDED
    OPTIONAL, easy to setup
    VS
    

    View Slide

41. THANK YOU
    vittorio vittori
    @vttrx
    #css-testing
    

    View Slide