Grow your CSS skills. Land your dream job.

Advantages to Native CSS Variables 

I tend to think variables are best left to a preprocessing step, but there are some distinct things that having them directly in CSS can do:

  1. Daniel Imms:

    [they] can change at runtime, allowing the implementation of things like theming to be done more elegantly.

    i.e. change the value of a variable on a live, rendered web page and see the changes reflected everywhere that uses that variable.

  2. Peter Gasston:

    you can set the value through the setProperty() method on the style object

    Which makes #1 possible and opens up cool possibilities.

  3. They can be scoped to an element. So perhaps you could set variables representing color to theme a site, but override them at a component level to apply different themes in smaller places as needed.

Sponsored: Hack Reactor – The Original JavaScript Coding School 

Hack Reactor is a 3-month immersive coding school focused on computer science fundamentals and JavaScript. With a twofold mission, Hack Reactor works to empower people and transform education through rapid-iteration teaching. Hack Reactor grads work at companies like Google, Adobe, OpenTable, Amazon, and numerous startups with a average starting salary of $105K and a 99% graduate hiring rate.

I personally know someone who went to a coding school and changed careers and changed their life, so I'm a believer. Apply today and gain the skills and confidence to build amazing products.

Design For Community, 13 Years Later

I had heard several people say Design for Community by Derek Powazek is a great book and was published well "before it's time." As someone who works on several sites that I very much think of as community sites, I picked it up and gave it a read. Published in 2001, the book is just over 13 years old now. Ancient history for a typical tech book. It is a tech book in that it talks about specific websites and …

Read Article →

Sponsored: An RSS Reader for Developers 

rssheap is a web-based reader for software developers. You subscribe to tags of interest (CSS, JavaScript, PHP, Ruby, etc.), and we find great articles for you to read. Articles are sorted by how many votes they have to ensure you always read high-quality content.

I think this is a clever idea. It's easier than a typical RSS reader because there is content there the second you sign up and you find things socially. It's also better than a typical news aggregator site in that you mark things as read and customize to your liking.

Try it out, it's free!

CSS Guidelines 

> High-level advice and guidelines for writing sane, manageable, scalable CSS

Feels like a nice culmination of Harry Roberts work the last several years.

Starting CSS Animations Mid-Way

Say you have a @keyframe animation that animates an element all the way across the screen. From off the left edge to off the right edge. You apply it to multiple elements. But you don't want all the elements to start at the same exact position.

You can change the animation-delay so that they start at different times, but they will still all start at the same place.

Fortunately, there is a way.…

Read Article →

Favicons, Touch Icons, Tile Icons, etc. What All Do You Need?

The following is a guest post by Philippe Bernard. Philippe has done research on what it takes to make a favicon (and all the related graphics and markup) such that you are covered with the best quality output everywhere. Spoiler alert: it's a lot of different graphics and markup. Also full disclosure: Philippe has built a tool to help with it he showcases in the article.

Read Article →

#134: A Tour of a Site In-Progress Built with Jekyll, Grunt, Sass, an SVG System, and More

Warning: this is a meandering, intermediate level screencast in which we look at the code that powers a build process for a site. We don't write any code.


A "build process" is all the stuff that happens between the code you write and code that goes out to a live website. We've talked before about using Grunt for this. Sass is processed, assets are combined, minification and optimization happens, etc. There are endless things that a build process can …

Watch Video →

More Blog Posts →

*May or may not contain any actual "CSS" or "Tricks".