Advanced CSS

https://slides.com/herrherrmann/css/live

  • I'm Sebastian Herrmann.

  • Frontend developer @ JustWatch.com (Berlin)

Hello, AngularCamp

Overview

  • CSS Basics

  • Pre-Processors

  • Organizing Styles

  • Helpful Tools

  • Your Setups

CSS Basics

  • Cascading Style Sheets
    ​[kæsˌkeɪdɪŋˈstaɪlʃiːts];

  • HTML + CSS = Content + Presentation

CSf***ingS

„There will never be a CSS4.“

– Tab Atkins, CSS Working Group

Current Version

// example.css
body {
  color: #051e28;
  background-color: #fbc500;
}

.my-div {
  width: 100px;
  padding: 5px 3px 5px 3px;
  margin: 10px;
}

.my-div span.highlighted {
  color: red;
  border: 1px solid yellow;
}

Example

<!-- index.html -->
<html>
  <head>
    <link 
      rel="stylesheet" 
      type="text/css"
      href="example.css">
  </head>
  <body>
    <div class="my-div"
      style="color: green;">
      Some green text.
      <span class="highlighted text">
        Some red text!
      </span>
    </div>
  </body>
</html>

import

inline

Pre-processors

(       )

Pre-Processors

nesting

// styles.less
body {
  .header {
    background-color: #fff;

    .header-text {
      font-size: 18px;
    }
  }
}
// styles.css
body .header {
  background-color: #fff;
}
body .header .header-text {
  font-size: 18px;
}

Variables

@font-path: '../assets/fonts';
@default-radius: 5px;
@big-radius: @default-radius + 5px;
@jw-gold: #fbc500;
a {
  color: @jw-gold;

  &:hover {
    color: darken(@jw-gold, 10%);
  }
}

Mixins

// mixin definition
.add-border (@width, @color: #fcb500) {
  border: @width solid @color;
  -webkit-border-radius: @default-radius;
     -moz-border-radius: @default-radius;
          border-radius: @default-radius;
}
// mixin usage
.my-box {
  background-color: #000000;
  .add-border(1px);
}

imports

@import 'variables';
@import '../node_modules/bootstrap/less/bootstrap.less';

PostCSS Magic

e.g. module prefixing and
exposure via css-modules

and more!

Do we need all that?

Conclusion:

+

don't over-engineer

Organizing styles

BEM

​block__element--modifier
menu__menu-item--active

BEM

BEM Resources

Atomic Design

Atomic CSS

… not to be confused with:

<div class="Bgc(#0280ae.5) C(#fff) P(20px)">
    Lorem ipsum
</div>

Helpful Tools

Emmet

  • use CSS-like syntax to generate HTML:
// write:
.row>.col-xs-3+.col-xs-9
// ... and get:
<div class="row">
    <div class="col-xs-3"></div>
    <div class="col-xs-9"></div>
</div>
// write:
table.table-hover>thead>tr>th*2^^tbody>tr>td*2
// ... and get:
<table class="table-hover">
    <thead>
        <tr>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
  • available for basically all editors: Emmet.io

Standardize your project setup with:

Project Setup

extensions

Check out extensions for your editors, e.g.:

… and don't forget to write your own extensions!

Some Cool links

Thank you!

@herrherrmann

@herrherrmann

Advanced CSS

By Sebastian Herrmann

Made with Slides.com

Advanced CSS

Advanced CSS techniques for AngularCamp 2017 (Barcelona).

  • 2,464

More from Sebastian Herrmann