… and this is what our clients made with it…

… see more awesomeness at http://www.celtra.com/gallery/

Now what?

Let's have some fun…

What… Why… How?

<style>

p { height: 20px; }

p:empty { height: 0; }

</style>

Q: What’s the paragraph's height?

Pt. 2: What… Why… How?

.modal-box {
    width            : 100px;
    height           : 200px;
    background-color : #ll3377;
    line-height      : 20px;
    overflow         : hidden;
    font             : 10px Arial;
    text-indent      : 5px;
    pointer-events   : none;
}

Q: What’s the line height?

We're all one happy font familiy…

font-family: Helvetica Neue;

font-family: monospace;

font-family: 'monospace';

font-family: Exo 2;

font-family: Exo \2;

font-family: €42;

More fun at https://mathiasbynens.be/notes/unquoted-font-family.

Calculations are hard…

.calculator {
    width            : 200px;
    height           : 20px;
    background-color : red;
}

.calculator:hover {
    border           : 1px solid white;
    background-color : blue;
}

Hovering over .calculator element requires style recalculation.

Is style recalculation needed?

.calculator {
    width            : 200px;
    height           : 20px;
    background-color : red;
}

.calculator:hover {
    background-color : blue;
}

How about now?

.calculator {
    width            : 200px;
    height           : 20px;
    background-color : red;
}

.calculator:hover { }

@sedovsek @addyosmani it's not needed on {} , but that's an optimization we haven't made yet.

— Paul Irish (@paul_irish) October 3, 2014

Write better CSS

Why?

• Easier to write and to maintain,
• Enables us to build things faster,
• Is good for performance.

CSS is easy to learn,
but hard to master

Visual Patterns

are possible to achieve in completely different ways…

• tabular design,
• floats,
• inline-blocks,
• flexbox…

Nice example of why things diverse

How would you name that class?

Nope! It's…

Naming in CSS is hard!

Big Red Title in 2013…

.big-red-title {
    font-size: 3em;
    color: red;
}

… might not be so big in 2014

.big-red-title {
    font-size: 10pt;
    color: #bada55;
}

Coding style, convention

Develop your own set of rules and stick to them.
Document them, if needed.

Define things like…

• NoCamelcase rule,
• put space after : in property declarations,
• four spaces before each declaration (no tabs),
• opening bracket on the same line as the rule set, preceded by one space {,
• closing bracket } appears on its own line after the final property,
• etc.

But there is much more to it…

• nesting,
• combining selectors,
• naming convention,
• file structure,
• file convention,
• etc.

Add a little flavour…

How do you sort CSS properties?

Source: http://css-tricks.com/poll-results-how-do-you-order-your-css-properties/

How we do it?

.selector {
    /* Positioning */
    position, z-index, top, right, left, bottom

    /* Disply and box properties */
    display, overflow, box-sizing, width, height, margin, padding, border

    /* Color */
    background-color, color

    /* Text Properties */
    font-family, font-size, line-height, text-align, text-decoration

    /* Other */
    cursor, pointer-events, etc.
}

Alignment

.modal-box {
    width            : 40%;
    height           : 200px;
    background-color : #ll3377;
    overflow         : hidden;
    box-shadox       : 10px 10px 5px #bada55;
}

More about our CSS formatting: http://galjot.si/formatting-css.

Measuring and optimising CSS for performance

Tools to measure performance

YSlow

PageSpeed Insights

How high is your CSS standard?

Analyse it!

• http://cssstats.com/
• https://github.com/t32k/stylestats
• https://github.com/macbre/analyze-css
• https://github.com/katiefenn/parker

Lint it!

• http://twitter.github.io/recess/
• https://github.com/causes/scss-lint

Metrics to measure

• file size,
• number of selectors,
• number of rules,
• most Identifier (selector depth),
• total unique colors,
• total unique font sizes,
• etc.

What & how to improve?

Preprocessors: Handle with care

Extends vs. Mixins.

Mixins would produce WET (Write everything twice)

Extends vs. Mixins.

Extends would produce DRY (Don’t repeat yourself)

Extends don’t accept parameters, mixins do.

Nesting

Preprocessors and (CSS) Nesting

Just don't nest

• Specificy,
• Performance issue - right to left parsers,
• Deeply nested selectors can only live inside of that scope and cannot be reused.

Using sprites

SVG images

• Small file sizes that compress well,
• Scales to any size without losing clarity (except very tiny),
• Looks great on retina displays,
• Design control like interactivity and filters,
• Colors!

SVG Browser Support:

• Internet Explorer 9+
• Firefox 4+
• Chrome 4+
• Safari 4+
• Opera 9.5+

Image Optimisation

imageOptim

npm install -g imageoptim-cli

JPEGmini

ImageAlpha, SVGMin, and others

Minify & Shrink

npm install grunt-contrib-cssmin

npm install cssshrink

UnCSS

Remove unused CSS across your project at build time

npm install -g uncss

npm install grunt-uncss --save-dev

npm install gulp-uncss --save-dev

Painting

Use continuous painting mode to track down elements and styles that add a lot of painting cost:

Profiling Long Paint Times with DevTools' Continuous Painting Mode

What about visual testing?

• New styles are added instead of reused
• No overview of how different styles interact
• Form factors, adaptiveness, responsiveness

Human eye vs. computer?

• Syntax check
• Style guides
• Linting

But what about visual 'correctness'?

You cannot automate design, because it is manual

You cannot let computer define what is correct

… but you can automatically test changes.

Here is how

To recap

• Create the design you want
  When you’re satisfied, “click”
• Ensure consistency and compatibility
  Mark diffs and store them to the system
• Trust WizEye to keep an eye on
  Run it on demand, on commits, on build, with tests…

WizEye creators