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.

If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.

Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!