CSS {

Guidelines

• Idiomatic CSS (Nicolas Gallagher)
• CSS Guidelines (Harry Roberts)
• Code Guide (Mark Otto)
• Primer (GitHub)

/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}

/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

Syntax | Code Guide

.selector {
    /* Positioning */
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    /* Display & Box Model */
    display: inline-block;
    overflow: hidden;
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 10px solid #333;
    margin: 10px;

    /* Other */
    background: #000;
    color: #fff;
    font-family: sans-serif;
    font-size: 16px;
    text-align: right;
}

Declaration order | Idiomatic CSS

/*------------------------------------*\
  #A-SECTION
\*------------------------------------*/

.selector { }





/*------------------------------------*\
  #ANOTHER-SECTION
\*------------------------------------*/

/**
 * Comment
 */

.another-selector { }

Titling | CSS Guidelines

Linter

csslint.net

}

preProcessors {

CSS Programming

/// Find the last simple selector in a selector
@function _last-simple-selector($selector) {
    $parsed: selector-parse($selector);

    @if length($parsed) > 1 {
        @if $bem-throw-errors {
            @error '`#{$selector}` contains #{length($parsed)} selectors and the `_last-simple-selector()`function accepts only 1.';
        }
        @return false;
    }

    $last-simple-selector: nth(nth($parsed, 1), -1);

    @return $last-simple-selector;
}

Function in Sass

Architecture CSS

CSS naming conventions

}

PostCSS {

A tool for transforming CSS with JavaScript

PostCSS is a Node.js module that analyzes

your CSS and transforms it into

an Abstract Syntax Tree(AST)

*Abstract Syntax Tree

Plugins PostCSS

Use tomorrow’s CSS syntax, today.

postcss-bem

@utility utilityName {
    color: green;
}
 
@utility utilityName small {
    color: blue;
}
 
@component ComponentName {
    color: cyan;
 
    @modifier modifierName {
        color: yellow;
    }
 
    @descendent descendentName {
        color: navy;
    }
 
    @when stateName {
        color: crimson;
    }
}
 
@component-namespace nmsp {
    @component ComponentName {
        color: red;
    }
}

.u-utilityName {
    color: green;
}
 
.u-sm-utilityName {
    color: blue;
}
 
.ComponentName {
    color: cyan;
}
 
.ComponentName--modifierName {
    color: yellow;
}
 
.ComponentName-descendentName {
    color: navy;
}
 
.ComponentName.is-stateName {
    color: crimson;
}
 
.nmsp-ComponentName {
    color: red;
}

npmjs.com/package/postcss-bem

postcss-bem | with shortcut

@b nav { /* b is for block */
    @e item { /* e is for element */
        display: inline-block;
    }
    @m placement_header {
        background-color: red;
    }
}

.nav {}
.nav__item {
    display: inline-block
}
.nav_placement_header {
    background-color: red
}

npmjs.com/package/postcss-bem

postcss-alias

@alias {
  fs: font-size;
  fw: font-weight;
  bg: background;
}
.foo {
  fs: 16px;
  fw: 400;
  transition: bg 200ms ease;
}

.foo {
  font-size: 16px;
  font-weight: 400;
  transition: background 200ms ease;
}

github.com/seaneking/postcss-alias

PostCSS Andalusian Stylesheets

.foo {
    reondeao: 3mijillah;
    detrah: #fff;
    ansho: 300mijillah;
    largo: 200mijillah;
    agarrao: isquierdah;
    en-to-lo-arto: 2peasoh;
    por-lo-bahini: 20mijillah;
    isquierdah: 100mijillah;
    deresha: 100mijillah;
    huecoh: -1mijillah;
    fleshita: manito !arfavó;
    lah-letrah: en-grande;
    separao: 100mijillah 50mijillah;
    jorgorio: musho 5s;
}

.foo {
    border-radius: 3px;
    background: #fff;
    width: 300px;
    height: 200px;
    float: left;
    top: 2rem;
    bottom: 20px;
    left: 100px;
    right: 100px;
    letter-spacing: -1px;
    cursor: pointer !important;
    text-transform: uppercase;
    margin: 100px 50px;
    animation: musho 5s;
}

bameda/postcss-andalusian-stylesheets

PostCSS chinese Stylesheets

.foo {
    定位: 相对;
    背景颜色: 三文鱼;
    背景图片: 无;
    字体家族: Helvetica, Arial;
    颜色: 白;
    行高: 1.68;
    字母间距: 2px;
    浮动: 左;
    显示: 无;
    层级: 1000 !重要;
}

.foo {
    position: relative;
    background-color: salmon;
    background-image: none;
    font-family: Helvetica, Arial;
    color: white;
    line-height: 1.68;
    letter-spacing: 2px;
    float: left;
    display: none;
    z-index: 1000 !important;
}

zhouwenbin/postcss-chinese-stylesheets

We'll apply common sense

postcss.parts

• Analysis
• Debug
• Fallbacks
• Images
• Optimizations
• Packs
• Shortcuts

PostCSS Magic Animations

.animation {
  animation-name: magic;
}

.animation {
  animation-name: magic;
}

@keyframes magic {
  0% {
    opacity: 1;
    transform-origin: 100% 200%;
    transform: scale(1, 1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform-origin: 200% 500%;
    transform: scale(0, 0) rotate(270deg);
  }
}

github.com/nucliweb/postcss-magic-animations

}

CSS Modules {

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default

CSS Modules

.title {
  background-color: red;
}

import styles from "./styles.css";

element.innerHTML = 
  `<h1 class="${styles.title}">
     An example heading
   </h1>`;

<h1 class="_styles__title_309571057">
  An example heading
</h1>

._styles__title_309571057 {
  background-color: red;
}

CSS

JS

CSS

HTML

}

CSS in JS {

Problems solved

• Global Namespaces
• Dependencies
• Dead Code Elimination
• Minification
• Sharing Constants
• Non-Deterministic Resolution
• Isolation

babel-plugin-css-in-js

<Button className={styles.button} />

var styles = cssInJS({
  button: {
    padding: 5,
    backgroundColor: "blue"
  }
});

<Button className={styles.button} />

var styles = {
  button: "example_js_styles_button"
};

.example_js_styles_button {
  padding: 5px;
  background-color: blue;
}

IN

OUT / CSS

OUT / JS

Aphrodite: Inline Styles that work

const coolFont = {
    fontFamily: "CoolFont",
    fontStyle: "normal",
    fontWeight: "normal",
    src: "url('coolfont.woff2') format('woff2')"
};

const styles = StyleSheet.create({
    headingText: {
        fontFamily: coolFont,
        fontSize: 20
    },
    bodyText: {
        fontFamily: [coolFont, "sans-serif"]
        fontSize: 12
    }
});

}

CSS Craftsmanship {

You already have all the tools for creative work

creativesomething.net/.../you-already-have-all-the-tools-for-creative-work

will-change

developer.mozilla.org/.../CSS/will-change

https://www.w3.org/Style/CSS/

}