Learn How to Create 5 Incredible CSS Animations

You’ve probably noticed that more and more CSS animation examples have been appearing on websites lately. Web designers are getting creative and using CSS animations to bring personality to their sites, capture complex ideas effortlessly, and subtly guide their...

Refactoring CSS: The Three I’s

In a recent interview, I was asked about simple and/or replicable steps to take when refactoring CSS. The topics of legacy, Technical Debt, and refactoring are, for one reason or another, at the front of my mind at the moment, so I thought I would write up a short...

CSS On Scroll Animation Library

The Problem With Other Libraries In my previous company we were using WOW.js (or other similar libraries) to animate elements on scroll. For simple projects it was quite nice, but on larger sites we wanted to have more control over what’s actually happening. In all of...

The Tragicomedy: CSS Color Names

The “Named Colors” section of the CSS Color Module Level 4—the latest specification for color values and properties within the Cascading Style Sheets language—are 141 standard colors. Each has its own name, so beyond the essentials of “black” and “white” are shades...

Using IDs with CSS

If we want to keep specificity low, which we do, we have one really quick-win, simple, easy-to-follow rule that we can employ to help us: avoid using IDs in CSS. Not only are IDs inherently non-reusable, they are also vastly more specific than any other selector, and...

Single Responsibility Principle for CSS

The single responsibility principle is a paradigm that, very loosely, states that all pieces of code (in our case, classes) should focus on doing one thing and one thing only. More formally: …the single responsibility principle states that every context (class,...