My Articles

Welcome to the blog

A new site, and a brand spanking new blog to go along with it! I'm pretty excited about this!

What to expect

This blog is the natural progression of my existing newsletter, so if you're a subscriber already, it'll seem very familiar, just better! For those of you who weren't subscribers, I've been exploring a lot of lesser known and misunderstood CSS properties, as well as some general CSS tips and tricks. I've converted a handful of them, so there are some older posts you can go explore right now if you'd like!

The reason I wanted to turn this into a blog, instead of only a newsletter, is because I wanted to:

• keep an easily accessible archive of posts
• make it easier to interact with

One of the biggest issues with the newsletter was it was hard to show the results of what I was doing. I'd create a codepen, and then take screenshots of everything and then have to add the images in. Now I can just embed the damn codepen and you guys can see it in action and play with the code!

writing-mode

So, it turns out doing something like this is super easy:

The Markup

The markup for this is nice and basic, pretty much a parent, with the two children:

<div class="card">
  <div class="card__title">Title here</div>
  <div class="card__body">Lorem ipsum dolor sit amet...</div>
</div>

Dynamic text color with Sass

CSS is awesome and with the addition of Custom Properties and things like calc() it’s really, really powerful. Sass is still a major part of my workflow though. It saves allows me to work faster and be better organized, but this newsletter is about neat tips and tricks and fun little things, so in staying on topic, here is a fun way you can use Sass to dynamically set your font color to ensure high contrast with your background color!

:focus-within

The :focus pseudo selector is useful, but it only allows us to style something which has focus directly on it. What if we want to style the parent of the thing with focus?

The common example you’ll find is changing the background, or border, of a form when someone goes inside it:

form:focus-within {
  background: limegreen;
}

With the above code, as soon as someone either clicks or tabs into an input, the background of the entire form will change!

I'm always surprised more people don't know this about CSS backgrounds

Maybe it's because I like playing around with these things, but it always amazes me how few people know that you can set multiple backgrounds on something, and there are some good use cases for it as well!

Sass and BEM ftw

The parent selector in Sass is amazing. I love Sass for a lot of reasons, but this is a really big one (there are many other reasons I love Sass too, which is why I made a course on it).

In Sass, you can use nesting, which is when you nest a selector inside another selector. It's powerful, though it can lead to some messy code if you aren't careful. One really cool thing with nesting though, is if you combine it with the parent selector, it becomes really powerful.

To create a parent selector, you just have to use the ampersand character (&).