The trouble with CSS...

The language

• No validation
• No variables
• No logic

DOWN...

Unlike C# or server lanugages, no validation unless you use online services

There's no contants or variables - use find change to replace

Static language, no way to manipulate the style on the fly

The trouble with CSS...

Cosmetic

• Vertical centering
• Equal height columns
• Limited positioning tools

DOWN...

min-height or hacks to achive equal height cols

mostly achieved through float - originally designed for images and text

The trouble with CSS...

Architectural

• The cascade is global
• Naming conflicts
• Sub-tree matching

Right

Architectural problems, The cascade is global, and every rule you write has the potential to affect entirely unrelated parts of the site.

CSS will not warn you if you use a class selector that already exists in your stylesheet. Limiting the scope of a selector to a particular DOM subtree does guarantee that it won’t affect elements outside of that subtree.

The problem is it doesn’t guarantee that it won’t unintentionally affect elements within the same subtree.

CSS Precomilers

• SASS (Syntactically Awesome Stylesheets Sass)
• LESS (Stylesheet Language)
• Both provide an extension language to compile down to CSS

Partials

SASS and LESS lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and operator functions.

Compiler is built upon Ruby.

Partials - split code into modules

Watches for file changes and compiles

Works with livereload

Variables

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

/* CSS */
body { font: 100% Helvetica, sans-serif; color: #333; }

Operators

Control Directives & Expressions

Nesting

nav {
    background-color: yellow;
    
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
}

/* CSS */
nav { background-color: yellow; }

nav ul { margin: 0; padding: 0; list-style: none; }

Extends/Inheritance

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
} 
      
/* CSS */
.success {border: 1px solid #ccc; padding: 10px; color: #333; border-color: green;}         
       

Mixins

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

/* CSS */
.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Functions

$col-count: 12;
 
@function col-pct($columns) {
    @return unquote((100/$col-count)*$columns+"%");
}
   
.col-6 { width: col-pct(6);}
   
/* CSS */
.col-6 { width: 50%; }       
    

(100 ÷ 12) = 8.333 × 6 = 50%

function returns a value.

Better tools, still problems

An example

<div class="restaurant-list">
    <h2>[Title]</h2>
    <ul>
        <li>[Restaurant item]</li>
    </ul>
</div>

/* SASS */
.restaurant-list {
    h2 { Styles.... }
    ul { More styles...}
        li { Even more styles... }
        li:nth-child(1) { Special styles... }
    }
}
 

The Cascade was the problem!

An example showing typical but simplified markup. Explain the syntax. Explain the good intentions of consistent default styling on html tags. Having to over ride them, and then introduce a new <ul> element into the mix...

Becoming a problem to maintain and understand...

Naming conventions

BEM syntax

• Block
• Element
• Modifier

.restaurant-list {} /* Block */
.restaurant-list__title {} /* Element */
.restuarant-list__title--blue {} /* Modifier */
        

BEM advantages

<div class="restaurant-list">
    <h2 class="restaurant-list__title">[Title]</h2>
    <ul>
        <li class="restaurant-item">[Restaurant item]</li>
    </ul>
</div>

/* SASS */
.restaurant-list {} /* Block */
.restaurant-list__title {} /* Element */
.restuarant-list__title--blue {} /* Modifier */
.restaurant-item {} /* Block */
        

• Mark-up independant
• Easy to read just from the html
• Standard convention
• Ease of update and removal

Layout

• Flexible Box Layout Module
• Grid Layout Module

W3C specs Exciting layout modules will solve many common headaches.

In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.

This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a flexible or fixed predefined layout grid.

Flex Box

Flex Box

            
                .flex-container {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    justify-content: space-between;
                    align-items: stretch;
                    min-height: 500px;
                }
                
                .flex-child {
                    flex-grow: 1;
                    flex-basis: 0;
                }
            
        

Justifiy content: This defines the alignment along the main axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

align-items: This defines the default behaviour for how flex items are laid out along the cross axis on the current line.

flex grow: This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

flex-basis: This defines the default size of an element before the remaining space is distributed. If set to 0, the extra space around content isn't factored in.

Grid layout

• A
• B
• C
• D

<ul id="grid">
    <li class="a">A</li>
    ...
</ul>

/* CSS */
#grid {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 50% 50%;
}
       
#grid .a {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
}

chrome://flags/

Enable experimental Web Platform features