Front-end h8#ff0000!!1

WebCamp Zagreb 2014

5 October 2014. Zagreb, Croatia

Who is this guy?
About me

  • PhD Candidate at the University of Ljubljana,
  • Research & Development at…
Celtra - Dashboard
Celtra - AdCreator
Celtra - AdCreator
Celtra - AdCreator
Celtra - AdCreator

… and this is what our clients made with it…

… see more awesomeness at

Now what?

Let's have some fun…

What… Why… How?

p { height: 20px; }
p:empty { height: 0; }

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?

Nope! It's normal

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

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 { }

Write better CSS


  • 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?


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.


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

More about our CSS formatting:

Measuring and optimising CSS for performance

Tools to measure performance


PageSpeed Insights

How high is your CSS standard?

Analyse it!

Lint it!

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.


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

Pros: Fewer HTTP requests
Cons: Harder to maintain, not really flexible

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


npm install -g imageoptim-cli


ImageAlpha, SVGMin, and others

Minify & Shrink
npm install grunt-contrib-cssmin
npm install cssshrink


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


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

“The technology is out there…
Now let's build some tools and
make them work for us.”


Robert Sedovšek