Ryan Trimble
A desk displaying a laptop, notebook, sharpie pen, and pencil

My Favorite CSS Snippets

Front End Development

Photo Credit: Meg Boulden

I know it isn’t everyone’s cup of tea, but I love CSS. I think a well-made CSS framework is great in the right context, but sometimes it is a bit overkill to add to every project. That being said, there are a few CSS snippets that I regularly reach for when developing a new project from scratch.

Reset

There are a few CSS resets that I like to use, but a more modern one I have been using lately is the @acab/reset.css by Mayank.

I like that it is set up for use with cascade layers, so it’s easy to drop into projects like so:

@import '@acab/reset.css' layer(reset);

Mayank added some great features to this reset:

  • All rules are wrapped within a :where selector to keep low specificity.
  • Automatically works with dark mode.
  • Includes a baked-in .visually-hidden class.

Container

For a standard container class, I reach for Steph Eckles’ “smol intrinsic container” from her Modern CSS and SmolCSS projects:

.smol-container {
  width: min(100% - 3rem, var(--container-max, 60ch));
  margin-inline: auto;
}

This container is great for a few reasons:

  • It uses min() functionality to ensure the container is responsive.
  • The minimum width of the container is set to give almost full width but gives some space on either side.
  • The maximum width is variable, using the --container-max custom property, and gives you a default max-width to fall back on.
  • To center the container, it utilizes the margin-inline: auto logical property to automatically fill the inline-start and inline-end space around the container

Flow

In Every Layout by Andy Bell and Heydon Pickering, they describe a technique called “The Stack” that is used to create great vertical flow on a group of stacked elements.

Andy even explained on his blog that these are his 3 favorite lines of CSS, though he prefers to call it .flow, which I agree makes a bit more sense.

.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

Using the lobotomized owl selector in this way enables every child element, excluding the first child, inside the .flow parent to receive a margin-block-start of the value of --flow-space. This provides a nice standard rhythm to grouped elements and since it uses a custom property, can be easily adjusted.

Fluid Type Scale

A fluid type scale means that font sizes can automatically adjust based on the viewport, helping fonts scale for various screens.

The basic idea is to utilize the CSS clamp() function to provide a minimum and maximum, which will then scale the font size somewhere between. This can be sort of difficult to figure out, so luckily the fine folks over at Clearleft created an excellent tool called utopia.fyi to help calculate these fluid-type scales.

Using the calculator, you can enter in values for the minimum and maximum font sizes and what font type scale you want to achieve, and it will output a lovely set of custom properties you can apply to your styles:

/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.78rem, calc(0.77rem + 0.03vw), 0.80rem);
  --step--1: clamp(0.94rem, calc(0.92rem + 0.11vw), 1.00rem);
  --step-0: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
  --step-1: clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem);
  --step-2: clamp(1.62rem, calc(1.50rem + 0.58vw), 1.95rem);
  --step-3: clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem);
  --step-4: clamp(2.33rem, calc(2.08rem + 1.25vw), 3.05rem);
  --step-5: clamp(2.80rem, calc(2.45rem + 1.77vw), 3.82rem);
}

Let's work together!