Grow your CSS skills. Land your dream job.

The Specificity Graph 

Harry Roberts, on charting CSS selector specificity across entire codebases:

A spiky graph is a bad graph.

I would think if you went 100% on a methodology that encouraged class names for everything, your chart would be damn near flat. I wonder if that's a worthy goal. Something to draw a line in the sand on, for the good of a project.

Sponsor: Wufoo 

I'm posting this just as a big ol' high five to Wufoo for being a long time sponsor of CSS-Tricks.

Wufoo is a web app for building web forms. Things like contact forms, conference registration forms, t-shirt selling forms, wedding RSVP's, you name it. You put the forms on your own site (if you like). They work on small screens. They don't get spammed. They save their data forever. They can be multi-page and use logic. Everything you need a form to do.

As many of you also know, I was a somewhat early employee of Wufoo back in the day. I'm still quite proud of the work we did at Wufoo and I'm happy with Wufoo today. I use the crap out of Wufoo. Every single day, it powers nearly every single form on all the sites I work on, and a bunch more that I built a long time ago and are just quietly still working great. It's reliable, feature-rich software that just does what it does very well.

Datalists for Different Input Types

I saw an HTML5 date input the other day, which had the dropdown arrow on the right, which I've grown accustom to clicking to reveal a calendar datepicker in which to choose a date.

Typically, that looks like this:…

Read Article →

How SVG Shape Morphing Works

While animating SVG with CSS is easy and comfortable, CSS can't animate all the SVG properties that are possible to animate. For instance, all the properties that define the actual shape of the elements aren't possible to change or animate in CSS. You can animate them through SMIL though. Sara Soueidan covers this in her guide to SMIL here on CSS-Tricks, but I thought I would shine a light on this particular ability.…

Read Article →

Sponsor: Hack Reactor’s Immersive Remote Beta Course 

Hack Reactor's Coding School is accepting applications for its next online immersive course, Remote Beta. Their team of exceptional instructors and staff work towards a two-fold mission of empowering people and transforming education through rapid-iteration teaching. Students build the skills and confidence they need to graduate as mid-to-senior level engineers and work for top tech companies in both backend and front end tasks.

Apply today for an upcoming onsite or online cohort and be on your way to becoming an engineer in 12 immersive weeks.

Two anecdotes from me:

  1. I just watched the documentary Ivory Tower and it's a pretty interesting look at the state of universities. One thing is for sure: education is changing.
  2. I now have two personal friends who have transformed their career through coding schools.

Lobotomized Owls 

I had a post in my drafts for CSS-Tricks recently I called "Removing the Space from the Bottom of Modules". It's all about that tricky situation where you want even padding all the way around some elements to visually separate them. But elements inside will also need bottom margins, and that might lead to extra space along the bottom where that margin hits the padding.

Apparently I'm getting old and losing my mind, because I've already written about it. But I didn't come to any stunning conclusion in that article. The best I came up with was a kinda gross compound selector that I don't even want to talk about.

Heydon Pickering does have a stunning conclusion for this issue:

* + * {
  margin-top: 1.5em;

I'd definitely try that in a new project. It does make me think that future CSS could help us here though. Perhaps specifying that a particular edge of padding was allowed to collapse into margin?

Probably Don’t Base64 SVG

Perhaps you've heard of data URIs. It's a really nice way of including a resource that would have otherwise been a separate HTTP request. The format that you use in a data URI can vary. Essentially you just tell it what content type it is (e.g. image/png), semicolon, then the data of that file.…

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".