Component development in CSS

Spoiler

• Industry challenges when developing CSS
• Today’s solution for components on the web
• Web Components and the future of CSS
• Style Guide Driven Development

CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. Wikipedia

First published in 1996

Big CSS

• massive sites
• big teams of developers
• heavy UI
• long running projects

Massive web sites

• Thousands of lines of code
• A lot of files
• Many pages

• A lot of websites with common codebase
• Common corporate style

Big teams

• Hundreds of developers
• Growing teams
• Changing the context

Long running projects

• Code lives for years
• Continious development

Is this good?

H1 { color: blue }
P EM { font-weight: bold }
A:link IMG { border: 2px solid blue }
A:visited IMG { border: 2px solid red }
A:active IMG { border: 2px solid lime }

What makes CSS hard?

• Vertical centering
• Equal height columns
• Browser inconsistencies
• Unobvious tricks

What really makes CSS hard?

• Scoping
• Specificity conflicts
• Non-deterministic matches
• Dependency management
• Removing unused code

CSS has no scoping

a { /* Affects all the links */
  color: red;
}
ul li a { /* Affects all the links in lists */
  color: green;
}

Specificity

Specificity is the means by which a browser decides which property values are the most relevant to an element and gets to be applied. Specificity is only based on the matching rules which are composed of selectors of different sorts.

The most specific matters

<div id="test">
  <span>Text</span>
</div>

div#test span { color: green }
span { color: red }
div span { color: blue }

How to overwrite?

<div class="sidebar">Left floated sidebar</div>

.sidebar { /* Does is redefine `div.sidebar`?! */
  float: right;
}

body .sidebar { /* Overwrites 'div.sidebar {}' */
  float: right;
}

Non-deterministic matches

#content div div {
  float: left;
}

Removing unused code

100 pages in projects

.person div a {
  color: pink;
}

Can I remove it? Will it break something? Maybe it is for a third-party HTML code?

BEM eco-system

• CSS Methodology
• JavaScript framework
• Template engine
• Building system
• Supplementary tools

BEM

• Block
• Element
• Modifier

Why not…?

<ul id="menu">
  <li>Tab 1</li>
  <li>Tab 2</li>
<ul>

#menu {
  /* styles for element */
}

No IDs

Someday you will need to repeat the block at the same page

CSS for an element

.block {
  /* styles for block */
}
  .block--element {
    /* styles for element */
  }

Why not…?

<ul class="menu">
  <li class="item">Tab 1</li>
  <li class="item">Tab 2</li>
<ul>

.menu .item {
  /* styles for element */
}

No cascade

<div class="panels">
  <div class="item">
      <ul class="goods">
        <li class="item">
          <!--
            Remember: non-deterministic matches
            -->
        </li>
      </ul>
  </div>
</div>

Modifier

<ul class="menu menu_footer">
  <li class="menu--item">...</li>
  ...
</ul>

.menu_footer {
  font-size: 0.8em;
}

CSS for a modifier

.block {
  /* styles for block */
}
  .block_modifier {
    /* styles for modifier */
  }
  .block--element {
    /* styles for element */
  }

Modified element

Element’s modifier

<ul class="menu">
  <li class="menu--item">Tab 1</li>
  <li class="menu--item menu--item_current">Tab 2</li>
  <li class="menu--item">Tab 3</li>
</ul>

CSS for an elements’ modifier

.block
  /* styles for block */
}
  .block--element {
    /* styles for element */
  }
    .block--element_modifier {
      /* styles for modified element
    }

Why not…?

<ul class="menu footer">...<ul>

.menu.footer { /* combined selector */
  font-size: 0.8em;
}

Why not…?

<ul class="menu">
  <li class="menu--item current">Tab 2</li>
<ul>

.menu--item.current { /* combined selector */
  background-color: red;
}

No overspecific selectors

You would suffer when redefining

.menu--item.current {
  background: white;
}
.menu_dark .menu--item {
  background: black; /* Still white, baby */
}

BEM & CSS preprocessors

.block {
  /* styles for block */
  &_modifier {
    /* styles for modifier */
  }
  &--element {
    /* styles for element */
  }
}

This is solved

• Scoping
• Specificity conflicts
• Non-deterministic matches
• Dependency management
• Removing unused code

Web Components

• Navite component
• Custom web component
• Templates
• HTML import

HTML import, library

<!-- Import element -->
<link rel="import" href="my-lib/google-map.html">

<!-- Use element -->
<google-map lat="37.790" long="-122.390"></google-map>

Make it work

<!-- Polyfill Web Components support for older browsers -->
<script src="webcomponents.min.js"></script>

<!-- Import element -->
<link rel="import" href="google-map.html">

<!-- Use element -->
<google-map lat="37.790" long="-122.390"></google-map>

Ready-made components

• Polymer
• Google Web Components

Usage examples

• Toolbar
• Google map

Living Styleguides

A living styleguide represents UI components of your website with exact the same styles which you use across the project.

Style Guide Driven Development

Styleguide Driven Development is the practise of using the styleguide as the focal point for all front-end UI development tasks.

Killer features

• CSS / SCSS / SASS / LESS
• Related variables
• Live editting
• Angular directives
• Easy to integrate

Development with SC5 Styleguide

• Living overview of UI
• Quick manual testing
• Quick built-out of new pages
• Unit tests for UI
• Easier designer/developer/client collaboration

Component development in CSS

• Big CSS
• BEM (SMACSS, OOCSS)
• Web Components
• SGDD

varya.me/component-development-css