CSS in 2016 and Beyond - Christian Vuerings

by Christian Vuerings

Who's this guy?

Front-end Developer 🤓

4.5 years in 🇺🇸

Born in 🇧🇪

💛 to ⛵

@christianvuer 🐦

CSS Best Practices & Trends

Build Tools

Critical CSS

Lint Tools

SVG

CSS Modules

Build Tools /

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
  return gulp.src("app/scss/*.scss")
    .pipe(sass())
    .pipe(gulp.dest("app/css"))
    .pipe(browserSync.stream());
});

Gulpfile.js

Critical CSS

CSS blocks the rendering of your web page

Critical CSS inline
&
Other CSS async

Critical CSS

gulp.task('critical', ['build'], function(cb) {
  critical.generate({
    inline: true,
    minify: true,
    width: 320,
    height: 480
  });
});

Gulpfile.js

Lint Tools

	CSSLint	SCSS-lint	Sass Lint	stylelint
SASS Support
JS Only
Custom Rules
PostCSS

Lint Tools / stylelint

gulp.task('lint:css', function () {
  return gulp.src('src/**/*.css')
    .pipe(postcss([
      stylelint({/* your options */}),
      reporter({clearMessages: true}),
    ]))
});

Gulpfile.js

SVG

Icon Fonts

Rendering issues
Bad for Accessibility
Authoring is hard

SVG

Easy to animate
Multi-color icons

SVG / Icon Fonts performance issues

GitHub - Delivering Octicons with SVG

SVG / Animation

.svg-icon {
  height: 100px;
  overflow: visible;
  width: 100px;
}
.svg-icon  path {
  animation: animatePath 5s 1s forwards infinite;
  fill: none;
  stroke: rgba(255, 255, 255, .9);
  stroke-width: 0.45;
}

Login/Logout animation concept (adapted)

CSS Modules

Scoped locally
Explicit dependencies
Makes CSS modular & reusable

CSS Modules / Example

components/button.css

.normal { /* ... */ }
.disabled { /* ... */ }
.error { /* ... */ }

components/button.js

import styles from './submit-button.css';
buttonElem.outerHTML= `
  <button class=${styles.normal}>Submit</button>
`;

index.html

<button class="components_button__normal__abc5436">
  Submit
</button>

CSS Modules / Composes

components/button.css

.common { /* font-size, border-radius */ }
.normal { composes: common; /* blue color */ }
.error { composes: common; /* red color */ }

index.html

<button class="components_button__common__abc5436
		       components_button__normal__def6547">
  Submit
</button>

CSS Modules / Composes

components/button.js

import styles from './submit-button.css';

buttonElem.outerHTML= `
  <button class=${styles.normal}>Submit</button>
`;

CSS Modules / Share between files

shared/colors.css

.primary {
  color: #720;
}
.secondary {
  color: #777;
}

components/button.css

.common { /* ... */ }
.normal {
  composes: common;
  composes: primary from "../shared/colors.css";
}

CSS Layouts

Flexbox

Multi Column

Grid

Flexbox / Example

Wrapping Same-Line Titles (adapted)

Flexbox / Code

.flex-title {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  .title-main {
    flex-grow: 1;
  }
}

flex.scss

Flexbox / Support

Multi Column / Example

Envato Tuts - An Introduction To The CSS3 Multiple Column Layout Module (adapted)

Multi Column / Code

.main {
  column-count: 3;
  column-gap: 30px;
  column-rule: 1px dotted #999999;
}

multi-column.css

Multi Column / Support

Grid / Example

Grid by example (adapted)

Grid / Code

.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.wrapper {
  display: grid;
  grid-gap: 1em;
  grid-template-areas: "sidebar"
                       "content"
}

grid.css

Grid / Support

New CSS features

Use Them Today...

Custom Properties

Custom Media Queries

Custom Selectors

Color Function

4/8 Digit Hex Notation

Use these CSS features today!

includes

Autoprefixer

input.css

div {
  display: flex;
}

output.css

div {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

Custom Properties

input.css

:root {
  --fontSize: 1rem;
}
body {
  font-size: var(--fontSize);
}

output.css

body {
  font-size: 16px;
  font-size: 1rem;
}

Custom Media Queries

input.css

@custom-media --viewport-medium (
  width <= 50rem
);
@media (--viewport-medium) {
  body {
	font-size: 1.2em;
  }
}

output.css

@media (max-width: 50rem) {
  body {
    font-size: 1.2em;
  }
}

Custom Selectors

input.css

@custom-selector :--heading h1, h2, h3

:--heading { margin-top: 0 }

output.css

h1,
h2,
h3 { margin-top: 0 }

Color Function

input.css

body {
  background-color: color(#ffffff blackness(+5%));
}

output.css

body {
  background-color: rgb(243, 243, 243);
}

4/8 Digit Hex Notation

input.css

body {
  background: #9d9c;
  /* Same as #99dd99cc */
}

output.css

body {
  background: rgba(153, 221, 153, 0.8);
}

Resources

Thank you!

@christianvuer