Practical CSS One-Liners Worth Keeping Around

Front-end developers tend to collect small CSS snippets the way other people collect tools or recipes — not necessarily for daily use, but for when a situation calls for them. Alvaro Montoro recently shared his favorite ten one-liners for improving almost any project. They cover basics like constraining content width, boosting body text size, increasing line-height, limiting image and text widths, balancing heading wrapping, aligning form controls, improving table readability and spacing, and respecting users who prefer reduced motion.

Montoro's list is a solid foundation. A few additional one-liners complement it nicely, either as universal defaults or as handy guardrails for those edge cases that sneak into layouts.

Global Box-Sizing

Standardizing how the box model is calculated is often the first declaration in any stylesheet. Without it, padding and borders get added to an element's declared width, which can make layout math unnecessarily difficult. Setting this once on all elements prevents a whole category of sizing surprises.

*, *::before, *::after {
 box-sizing: border-box;
}

This belongs more in a reset than in project-specific styling, but it affects everything downstream and costs almost nothing to include.

System Font Stacks

The browser default of 16px Times New Roman leaves a lot to be desired. Montoro's list rightly suggests bumping text size up. Taking it further, defaulting to the operating system's native typeface instantly gives a page a more modern, integrated feel.

body {
  font-family: system-ui;
}

For a more opinionated fallback, one can explicitly choose a default serif or sans-serif stack.

body {
  font-family: system-ui, sans-serif;
}

More elaborate system font stacks exist, but this baseline works well as a starting point for nearly any site.

Defensive Overflow Control

Horizontal scrolling caused by content spilling past the viewport is rarely intentional and always annoying. When an element forces the <body>'s intrinsic width beyond the viewport edge, visitors end up scrolling sideways for no good reason. One line of CSS prevents that:

body {
  overflow-x: hidden;
}

This works as a defensive measure, but it should not be mistaken for a fix. Overflowing content can still cause data loss in some cases, and the root cause needs addressing properly. The snippet simply masks the symptom so visitors are not subjected to the broken layout while a real solution is implemented.

Viewport Breathing Room

Content that hugs the very edges of the viewport tends to feel cramped, especially on wide screens. A modest amount of horizontal padding on the <body> keeps content from touching the browser chrome while still allowing for responsive layouts.

body {
  padding-block: 15px;
}

Neither Alvaro's list nor these additions will fit every project perfectly. Different designs have different constraints. But holding a few reliable one-liners in reserve makes it easier to polish the common rough edges without pulling in a whole framework.