PHP Developer

12 CSS functions every dev should know 🧮

(To write smarter CSS):

Modern CSS isn’t just about adding styles. It’s about writing smart, adaptable code.

These functions help you build responsive layouts, do math, apply logic, and reuse values... all with minimal effort.

1. clamp(min, preferred, max)

This stops you from writing 5 media queries for one font size. It sets a value that grows, but stays within your defined limits.

h1 {
font-size: clamp(1.5rem, 5vw, 3rem);
}

It will grow with the screen (5vw), but never go below 1.5rem or above 3rem.

2. calc()

The classic function for mixing units. Perfect for subtracting a fixed sidebar from a fluid layout.
content {
width: calc(100% - 250px);
}

3. min() and max()

min() picks the smaller value. max() picks the larger value.

Use min() to create a fluid container that caps at a certain width:
container {
width: min(90%, 700px);
}

It will be 90% wide on mobile, but stop growing at 700px.

4. minmax(min, max)

The powerhouse of CSS Grid. Use it to define flexible column sizes.
grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

This tells columns to be at least 200px wide, but all stretch to fill the available space.

5. repeat()

Stop writing 1fr 1fr 1fr 1fr. This function cleans up your grid definitions.
grid {
grid-template-columns: repeat(4, 1fr);
}

6. var()

The function that makes CSS variables work. The core of any modern design system.

:root {
--primary-color: ;
}
button {
background-color: var(--primary-color);
}

7. rgba()

The classic way to add transparency to a color. The a stands for alpha.
overlay {
background-color: rgba(0, 0, 0, 0.5);
}

This creates a black background with 50% opacity.

8. attr()

This function can pull a value directly from an HTML attribute. It's most commonly used with pseudo-elements.
tooltip::after {
content: attr(data-tooltip-text);
}

9. fit-content()

This makes an element shrink to fit its content, but sets a maximum size it's allowed to grow to.
box {
width: fit-content(300px);
}

The box will be as wide as its text, but will never grow larger than 300px.

10. round()

A new function that lets you round a value inside other functions, like calc(). This is great for avoiding pixel-rounding errors.
element {
padding: calc(1.125rem / round(1.5, 1));
}

11. sign()

This is an advanced one. It returns a -1, 0, or 1 based on whether a value is negative, zero, or positive. Great for complex calculations.
item {
margin-left: calc(var(--offset) * sign(var(--direction)));
}

12. aspect-ratio

Okay, not technically a function, but it's used like one and it's too good to leave out.
video-embed {
aspect-ratio: 16 / 9;
}

This maintains a perfect 16:9 ratio without any old padding-top hacks.

PS: If you want to master flexbox and grid to create any layout in minutes... I've created a detailed ebook for you.

Stop Hardcoding Hover Colors! 🎨

(Create them automatically with one line of CSS.)

Ever had to maintain a design system? You have your main brand color:

--theme-color: ;

But then you need a hover state.

So you go to a color picker, find a 10% lighter version, and hardcode it:
button:hover {
background-color: ; /* Ugh, a "magic number" */
}

This is a nightmare. If the theme color ever changes, you have to manually hunt down and update this hover color, too.

And that's for just one component. What if there are 10 (or more) components? You'll need to repeat it for each color.

The Solution: color-mix()

Now, you can create these tints dynamically, based on the original color.

Here’s all the code you need:
icon {
--theme-color: ;
color: var(--theme-color);
border: 2px solid var(--theme-color);
}
icon:hover {
background-color: color-mix(in srgb, var(--theme-color) 10%, transparent);
}

How this works:

color-mix() is a new CSS function that lets you mix two colors.

in srgb: This is the color space. Think of it as the "standard" one to use.

var(--theme-color) 10%: This tells it to take our main theme color, but only 10% of it.

transparent: We're mixing that 10% color with (implicitly) 90% transparent.

The result is a perfect 10% tint of our theme color.

Now, if you change --theme-color from green to blue, the hover state automatically updates to be a 10% tint of that new blue.