Write Cleaner CSS with Modern Properties

Writing less CSS has never been easier.

Modern properties are doing some serious heavy lifting.

Here is a list of 5 CSS improvements

Instead of:

div {
	transform: scale(2);
}

Just write:

div {
	scale: 2;
}

Instead of:

div {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

Just write:

div {
	inset: 0;
}

And there’s more:

• :is() simplifies selectors.
• min() or max() combines constraints.
• margin-inline or margin-block makes layouts more flexible.

All of these tweaks add up to cleaner CSS.

These modern properties shine with progressive enhancement. You can keep existing transform and positional fallbacks, then layer scale, inset, and logical properties on top for cleaner code.

Also prefer logical properties like margin-inline and padding-block early in a project. They make layouts friendlier to RTL languages and reduce refactoring when internationalizing later.

Modern properties like inset, scale, and logical spacing can clean up large codebases quickly. The gain is bigger when teams adopt them consistently, instead of mixing legacy and modern syntax at random.

Modern properties pay off when applied consistently across a codebase, not only in isolated examples. Establish clear usage conventions so teams avoid mixing old and new syntax unpredictably.

This pattern has the best payoff when documented with one clear usage rule. Consistent adoption turns small CSS features into reliable system behavior.

To roll this out safely, start by applying :is() in a single UI surface where the benefit is obvious. That rollout sequence preserves clarity and reduces regressions during future refactors.

Want to build modern interfaces with less JavaScript?

I wrote a guide about building modern UI with HTML and CSS first. It covers practical patterns you can use before reaching for JavaScript.

Learn more