Visual consistency on web projects

@rafaelrinaldi

@rafaelrinaldi

http://netshoes.com.br

http://sp.femug.com

http://zofe.com.br

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