CSS

en tiempos modernos

CSS is

Not

Broken

Developer Advocate & Trainer Manager
at
@SchibstedSpain


#Web #CSS #Javascript

#Animation #PostCSS

Joan León

CSS {

Guidelines

/* 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;

    ...

}

Declaration order | Idiomatic CSS

.selector {
    
    ...

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

.selector { }

Titling | CSS Guidelines

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

/**
 * Comment
 */

.another-selector { }

Linter

}

preProcessors {

  • Variables
  • Nesting
  • Imports
  • Mixins
  • Functions
  • Extend/Inheritance
  • Operators

RGB, HSL, Opacity, String, Number, List, Map...

Sass Functions

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

sass/
|
|– abstracts/
|   |– _variables.scss    # Sass Variables
|   |– _functions.scss    # Sass Functions
|   |– _mixins.scss       # Sass Mixins
|   |– _placeholders.scss # Sass Placeholders
|
|– base/
|   |– _reset.scss        # Reset/normalize
|   |– _typography.scss   # Typography rules
|   …                     # Etc.
|
|– components/
|   |– _buttons.scss      # Buttons
|   |– _carousel.scss     # Carousel
|   |– _cover.scss        # Cover
|   |– _dropdown.scss     # Dropdown
|   …                     # Etc.
|
|– layout/
|   |– _navigation.scss   # Navigation
|   |– _grid.scss         # Grid system
|   |– _header.scss       # Header
|   |– _footer.scss       # Footer
|   |– _sidebar.scss      # Sidebar
|   |– _forms.scss        # Forms
|   …                     # Etc.
|
|– pages/
|   |– _home.scss         # Home specific styles
|   |– _contact.scss      # Contact specific styles
|   …                     # Etc.
|
|– themes/
|   |– _theme.scss        # Default theme
|   |– _admin.scss        # Admin theme
|   …                     # Etc.
|
|– vendors/
|   |– _bootstrap.scss    # Bootstrap
|   |– _jquery-ui.scss    # jQuery UI
|   …                     # Etc.
|
`– main.scss              # Main Sass file

7-1 Pattern

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)

Plugins PostCSS

Use tomorrow’s CSS syntax, today.

Custom properties & var()

Custom selectors

Custom media queries

Media queries ranges

Nesting

Color() function
:not pseudo-class

font-variant property

::pseudo syntax

...

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

WTF

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
}

WTF

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

WTF

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

😂

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

🙈

We'll apply common sense

postcss.parts

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);
  }
}

}

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

CSS in JS

58

CSS in JS Benchmarks

JSS

import jss from 'jss'
import preset from 'jss-preset-default'
import color from 'color'

// One time setup with default plugins and settings.
jss.setup(preset())

const styles = {
  button: {
    fontSize: 12,
    '&:hover': {
      background: 'blue'
    }
  },
  ctaButton: {
    extend: 'button',
    '&:hover': {
      background: color('blue').darken(0.3).hex()
    }
  },
  '@media (min-width: 1024px)': {
    button: {
      width: 200
    }
  }
}

const {classes} = jss.createStyleSheet(styles).attach()

document.body.innerHTML = `
  <button class="${classes.button}">Button</button>
  <button class="${classes.ctaButton}">CTA Button</button>
`
<head>
  <style type="text/css">
    .button-123456 {
      font-size: 12px;
    }
    .button-123456:hover {
      background: blue;
    }
    .ctaButton-789012 {
      font-size: 12px;
    }
    .ctaButton-789012:hover {
      background: red;
    }
    @media (min-width: 1024px) {
      .button-123456 {
        min-width: 200px;
      }
    }
  </style>
</head>
<body>
  <button class="button-123456">Button</button>
  <button class="ctaButton-789012">CTA Button</button>
</body>

Styletron

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 Blocks

Inspired by CSS Modules, BEM and Atomic CSS, CSS Blocks is the next evolution of best practices

Coming soon!

}

CSS WTF {

Quark.js

universal.css

}

CSS Craftsmanship {

You already have all the tools for creative work

will-change

touch-action

:nth-child(1 of .foo)

@media (width > 900px)

@media (prefers-reduced-transparency: reduce)

@media (inverted-colors)

CSS Houdini

<script>
CSS.registerProperty({
  name: "--stop-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "rgba(0,0,0,0)"
});
</script>
.button {
  --stop-color: red;
  background: linear-gradient(var(--stop-color), black);
  transition: --stop-color 1s;
}

.button:hover {
  --stop-color: green;
}

I will am a developer

CSS is

Not

Broken }

Gracias {}

Developer Advocate & Trainer Manager
at
@SchibstedSpain


#Web #CSS #Javascript

#Animation #PostCSS

Joan León

slides.com/joanleon

CSS en tiempos modernos

By Joan León

CSS en tiempos modernos

Evolución del desarrollo CSS | Codemotion 2017

  • 4,416