CSS has changed more in the last three years than in the previous ten. Features that developers begged for — container queries, nesting, cascade layers — are now shipping in every major browser. Yet most projects we audit still use workarounds that are no longer necessary.
Here are the features we use on every Kotito project and think you should too.
Container queries
Media queries respond to the viewport. Container queries respond to the parent element. This distinction matters enormously for component-based design systems.
A card component that stacks vertically in a narrow sidebar and spreads horizontally in a wide content area no longer needs JavaScript or complex class toggling. It just works, based on the space available to it.
We use container queries for every reusable component. They make components truly portable — drop them anywhere and they adapt.
Cascade layers
Cascade layers solve the specificity wars that have plagued CSS since its inception. By organizing styles into layers — reset, base, components, utilities — you control which styles win without resorting to specificity hacks.
The order of layers determines priority, not the specificity of selectors within them. This means a utility class with low specificity can reliably override a component style with high specificity, as long as the utility layer comes after the component layer.
Native nesting
CSS nesting reduces repetition and improves readability. Instead of writing the parent selector repeatedly, you nest child rules directly inside the parent block.
The syntax is similar to Sass nesting but without the preprocessor. For teams that used Sass primarily for nesting, this is one less build step to maintain.
Subgrid
Regular CSS grid lets you define a grid on a parent element and place children on that grid. Subgrid lets children inherit and participate in the parent grid, which means alignment across nested components happens automatically.
This is transformative for card layouts where the title, description, and action button need to align across cards of different content lengths.
Logical properties
Writing mode-aware properties like margin-inline-start and padding-block-end replace directional properties like margin-left and padding-bottom. If your site supports right-to-left languages or if you want your styles to be future-proof, logical properties are the correct default.
We switched all Kotito projects to logical properties in 2024. The mental model takes a week to internalize. After that, it feels natural and the RTL support is automatic.
The real takeaway
You probably do not need a CSS framework for layout anymore. Modern CSS handles responsive design, component isolation, and specificity management natively. The tools are there. The only barrier is awareness.
