Visual consistency on web projects

One of the hardest things when dealing with web UI is to keep visual consistency. CSS is really easy to change but way too hard to test.
How to make sure that that simple visual change will not break something completely unrelated in a very different context of your project?
This talk is a compilation of my experience around this subject. I've found some steps that can help us to avoid things breaking in the wild and ensure visual consistency.

Video:

Recording from 7masters at iMasters HQ
https://www.youtube.com/watch?v=yJrs4uhv_88

Links:

F.biz
http://www.fbiz.com.br

Netshoes
http://netshoes.com.br

FEMUG-SP (Front-End Meetup Group São Paulo)
http://sp.femug.com

ZOFE podcast (Zone of Front-Enders)
http://zofe.com.br

CSSLint
https://github.com/CSSLint/csslint

SCSSLint
https://github.com/causes/scss-lint

BEM
http://bem.info

SMACSS
https://smacss.com

OOCSS
http://oocss.org

Bower
http://bower.io

BackstopJS
http://backstopjs.org

Resemble.js
http://huddle.github.io/Resemble.js

CasperJS
http://casperjs.org

PhantomJS
http://phantomjs.org

Website Style Guide Resources
http://styleguides.io

Hardy
http://hardy.io

Selenium
http://www.seleniumhq.org

Cucumber
https://cukes.info

Saucelabs
https://saucelabs.com

Travis
https://travis-ci.com

Transcript

1. Visual consistency on web projects @rafaelrinaldi
2. @rafaelrinaldi
3. http://netshoes.com.br
4. http://sp.femug.com
5. http://zofe.com.br
6. We all ❤ CSS (don’t we?)
7. It’s really easy to change, but incredibly hard to test
8. Different implementations, multiple devices, screen sizes…
9. How to achieve consistency and sanity?
10. ›❯ Syntax check; ›❯ Code styleguide; ›❯ Code architecture; ›❯ Visual regression test.
11. Syntax check
12. Check for the code syntax in order to find errors
13. CSSLint
14. .imasters { /* Invalid color value */ color: #red; /* Invalid property and attribute */ lorem: 'ipsum'; }
15. λ csslint style.css csslint: There are 2 problems in style.css. style.css 1: error at line 3, col 10 Expected a hex color but found '#red' at line 3, col 10. color: #red; style.css 2: warning at line 6, col 3 Unknown property 'lorem'. lorem: 'ipsum';
16. Code styleguide
17. Ensure code consistency by following a set of predefined rules
19. SCSSLint
20. # config.yaml linters: # IDs, classes and placeholders should be all lowercase. CapitalizationInSelector: enabled: true # Prefer hexadecimal color codes over color keywords. ColorKeyword: enabled: true # Reports when you define the same property twice. DuplicateProperty: enabled: true
21. λ scss-lint -c config.yaml style.css style.css:1 Selector `iMasters` should be written in lowercase style.css:2 Color literals like `fuchsia` should be variables style.css:2 Color `fuchsia` should be written in hexadecimal form style.css:3 Property `color` already defined on line 2 style.css:3 Color `fuchsia` should be written in hexadecimal form style.css:3 Color literals like `fuchsia` should be variables
22. Code architecture
23. A well structured code base make things flexible and easier to change
24. BEM, SMACSS, OOCSS, Your Own Cool Technique… (pick your poison)
25. . ├── assets │ └── stylesheets │ ├── application.scss │ ├── base │ │ ├── _grid.scss │ │ ├── _typography.scss │ │ └── _variables.scss │ ├── components │ │ ├── _dropdown.scss │ ├── helpers │ │ └── _mixins.scss │ └── layout │ ├── core │ │ ├── _footer.scss │ │ ├── _header.scss │ └── sections │ └── _dashboard.scss ├── bower.json └── vendor ├── assets ├── normalize-css └── susy
26. Use your common sense and build your projects with a solid foundation from the ground up
27. Visual regression test
28. The classic way of testing UI is achieved by eyeballing
29. Style changes can break stuff you don’t even know about
30. That’s what’s called a regression (we all have been there)
31. If you rely on humans to test stuff you’re screwed
32. Image diff
33. Uses image analysis and comparison to make sure things didn’t break
35. BackstopJS (uses Resemble.js, CasperJS and PhantomJS)
36. { "viewports": [ { "name": "phone", "width": 320, "height": 480 }, { "name": "tablet", "width": 568, "height": 1024 } ] }
37. { "scenarios": [ { "label": "My Website", "url": "../../index.html", "selectors": [ "nav", ".jumbotron", "body .col-md-4:nth-of-type(1)", "body .col-md-4:nth-of-type(2)", "body .col-md-4:nth-of-type(3)", "footer" ] } ] }
39. If you have a visual styleguide, image diff regression test can be your best friend
41. Testing UI is more than just making assertions against HTML markup
42. Computed style
43. Consists in testing UI by matching computed style values
44. Hardy (uses Selenium)
45. Feature: iMasters UI Test As a user I want visual consistency on the http://imasters.com.br Scenario: Header layout Given I visit 'http://imasters.com.br' Then 'header > logo > a' should have 'color' of 'rgb(255, 165, 0)'
46. λ hardy selenium start λ hardy . Hardy v0.0.11 CSS Utils Steps Loaded CSS Steps Loaded Generic Steps Loaded Loading browser firefox …Shutting down browser 1 scenario (1 passed) 3 steps (3 passed) firefox success
47. TL;DR
48. Invest in code consistency and modularity
49. Automate UI testing
50. Integrate everything into your build pipeline
51. CSS: Just Try and Do a Good Job Chris Coyier “ ”
52. Thanks @rafaelrinaldi