What CSS tip do you want to share with others?

The world of CSS is very wild. Let's help each other out by sharing things that give it some order!

I'll start!

You can ditch media queries for dynamically changing font-sizes by use of fluid typography. By using min, max, and viewport units, we can dynamically change the font-size and constrain so that they don't explode (or shrink).

Let's see an example. Let's say you want your header to be 2rem on mobile and 4rem on larger displays. Here's how you use fluid typography to accomplish that:

h1 {
    // font-size: min(max({MIN_SIZE}, 4vw), {MAX_SIZE});
    font-size: min(max(2rem, 4vw), 4rem);
}

On most cases, 1rem = 16px, so our minimum font-size is 32px. This means that when the viewport width is less than 800px (0.04 * 800px = 32px), we will always have 32px as our font-size. This is perfect for mobile. When the viewport width is greater than 800px, our font-size will dynamically change along with the viewport, but never exceed 4rem = 64px.

4vw was just used as an example. You can change it to any value that suits your needs.

To see this in action, try changing the viewport width of the pen below. I changed 4vw to 8vw to make the font-size increase faster (font-size acceleration?!):

And that's it! In just one line of code, you can make your font-size responsive!

I hope this simple trick helps you guys out.
Share other awesome tips down below! 🎉

Comments

[Dave Cranwell]

Regardless how you do CSS, I strongly recommend considering vertical and horizontal "rhythm" (the distance between stuff) as something to apply as utility classes directly to HTML.

All too often CSS starts to get unmaintainable as people try to teach a previously standalone component how to position itself relative to its surroundings in a growing range of situations.

[Jeferson Brito]

I like this one:

ul {
  counter-reset: counter;
}

li:before {
  counter-increment: counter;
  content: counters(counter, '.') ' ';
}

to increment each item you add to a ul list automatically and it also supports nested lists.

and this one

.breadcrumb a:first-child::before {
    content: " » ";
}
.breadcrumb a::after {
    content: " /";
}
.breadcrumb a:last-child::after {
    content: "";
}

to easily create breadcrumb navigation

[Giorgos Sarigiannidis]

I like

html {
  scroll-behavior: smooth;
}

beacause it can save you some lines of JS.

Also, some times I happen to need to center-align an absolute element with:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

CSS Counters and object-fit can be very handy under specific circumstances

The same goes for

&::before {
      content: attr(data-attribute);
}

(Here is a practical example). On that note, I love the potential uses of ::before and ::after pseudoelements in general.

pointer-events: none;

allows you to click through an element.

visibility:hidden;

combined with something like opacity: 0; allows you to hide an element avoiding display: none;, which allows you to apply CSS effects.

input[type="checkbox"]:checked + label {
  // Do something
}

allows you to style the label of an checkbox only when it is checked. Combine it with the ::before pseudoelement and you can have some nice, js-free effects.

[Roberto Tonino]

Hi @adrianmarkperea !

I think you should def check the clamp() function, so you don't need to use min(max({MIN_SIZE}, 4vw), {MAX_SIZE}) but just clamp({MIN_SIZE}, 4vw, {MAX_SIZE}) 😉

h1 {
    /* font-size: clamp(MIN_SIZE, 4vw, MAX_SIZE)}; */
    font-size: clamp(2rem, 4vw, 4rem);
}

h1 {
    /* font-size: min(max({MIN_SIZE}, 4vw), {MAX_SIZE}); */
    font-size: min(max(2rem, 4vw), 4rem);
}

It has the same browser support, too.
MDN Reference

[James Thomson]

I don't use it all the time, but this one comes in handy when you need something to go full width but you're confined by a container it's already in. For example, an article where you want full width images, but fixed width content.

.breakout {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
  }

[Adrian Perea]

First time I've seen this solution!

I usually see two variants:

1. Use a container multiple times to only constrain particular sections of your page:

<div class="container">...</div>
<img class="full-width" ... />
<div class="container">...</div>

1. Break out the container by adding negative margins to both sides:

.container {
    padding: 2rem 1rem;
}

.breakout {
    margin: 2rem -1rem;
}

[Cal]

This is a really cool tip! I’ve always struggled with font sizes and what they should roughly be on desktop and mobile but this would help with that as I won’t need to worry about changing them.

[Adrian Perea]

The adjacent paragraphs snippet is cleaner than the solution I currently use. I select the last paragraph child to set a different margin.

Also, in case using position: absolute destroys your layout, an alternative would be negative margins. I use this for micro-adjustments, too!

Thanks for sharing!

[Stephanie Eckles]

Hey, great discussion idea! 🏆

Center one or more items within a container horizontally and vertically:

display: grid;
place-content: center;

Details and more centering options >

My other favorite is responsive equal-width columns that break to row layout below a minimum width:

display: grid;
grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr));

See it in practice >
Read about how it works >

[Adrian Perea]

Hi, Stephanie! Thanks! First time I've heard about using grid to center items this way. I mostly use flexbox:

    display: flex;
    justify-content: center;
    align-items: center;

It's nice to always have options!

The responsive grid columns is awesome as well. I believe Chris Coyier called this "The Most Powerful Lines in Grid".

Thanks for sharing!

[Carlos Moreira]

My best friend,
margin: 0 auto;

[vladi160]

Your best friend is some width -> margin: 0 auto; ;)

[Adrian Perea]

Simple yet important. Thanks, Carlos!

[PenAndPapers]

This is gonna be helpful to me and other devs too who are tired of using media quiries to change font sizes. Thanks!

[Adrian Perea]

Glad to be of help!