Useful Modern CSS Techniques

CSS has evolved tremendously in recent years, introducing powerful new features that make styling more efficient and maintainable. Let’s explore some of the most impactful modern CSS techniques that every frontend developer should master.

Container Queries: A great addition to responsive design

Container queries allow elements to respond to the size of their container rather than the viewport size. This creates more modular and flexible components.

.card-container {
	container-type: inline-size;
}

@container (min-width: 400px) {
	.card {
		display: grid;
		grid-template-columns: 1fr 2fr;
	}
}

Cascade Layers: Better CSS Organization

Cascade layers give you explicit control over the cascade, making CSS more predictable and easier to maintain.

@layer reset, base, components, utilities;

@layer base {
	body {
		font-family: system-ui;
	}
}

@layer components {
	.button {
		padding: 0.5rem 1rem;
		border-radius: 0.25rem;
	}
}

Modern Layout with CSS Grid and Flexbox

Combine CSS Grid and Flexbox for powerful, responsive layouts without media queries.

.layout {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1rem;
}

.card {
	display: flex;
	flex-direction: column;
}

Logical Properties for International Design

Use logical properties to create designs that work seamlessly with different writing modes.

.element {
	margin-inline: 1rem; /* Instead of margin-left/right */
	padding-block: 0.5rem; /* Instead of padding-top/bottom */
	border-inline-start: 2px solid blue; /* Instead of border-left */
}

CSS Custom Properties (Variables) Advanced Usage

Modern CSS variables can be used for more than just colors - try them for responsive design and component state management.

.component {
	--size: clamp(1rem, 4vw, 2rem);
	--color: light-dark(#000, #fff);
	font-size: var(--size);
	color: var(--color);
}

Conclusion

These modern CSS techniques provide powerful tools for creating more maintainable, flexible, and responsive web designs. Start incorporating them into your projects to write better CSS and create superior user experiences.