Post on 16-Jul-2015
Visual consistency on web projects
@rafaelrinaldi
@rafaelrinaldi
We all ❤ CSS (don’t we?)
It’s really easy to change, but incredibly hard to test
Different implementations, multiple devices, screen sizes…
How to achieve consistency and sanity?
›❯ Syntax check; ›❯ Code styleguide; ›❯ Code architecture; ›❯ Visual regression test.
Syntax check
Check for the code syntax in order to find errors
CSSLint
.imasters { /* Invalid color value */ color: #red; /* Invalid property and attribute */ lorem: 'ipsum'; }
λ 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';
Code styleguide
Ensure code consistency by following a set
of predefined rules
SCSSLint
# 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
λ 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
Code architecture
A well structured code base make things flexible
and easier to change
BEM, SMACSS, OOCSS, Your Own Cool Technique… (pick your poison)
. ├── 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
Use your common sense and build your projects
with a solid foundation from the ground up
Visual regression test
The classic way of testing UI is achieved by eyeballing
Style changes can break stuff you don’t even know about
That’s what’s called a regression (we all have been there)
If you rely on humans to test stuff you’re screwed
Image diff
Uses image analysis and comparison
to make sure things didn’t break
BackstopJS (uses Resemble.js, CasperJS and PhantomJS)
{ "viewports": [ { "name": "phone", "width": 320, "height": 480 }, { "name": "tablet", "width": 568, "height": 1024 } ] }
{ "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" ] } ] }
If you have a visual styleguide,
image diff regression test can be your best friend
Testing UI is more than just making assertions
against HTML markup
Computed style
Consists in testing UI by matching computed style values
Hardy (uses Selenium)
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)'
λ 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
TL;DR
Invest in code consistency and modularity
Automate UI testing
Integrate everything into your build pipeline
CSS: Just Try and Do a Good JobChris Coyier
“ ”
Thanks
@rafaelrinaldi