CSS is a vast and complex beast. As with any complex system, some parts are unintuitive, and other parts tend to get overlooked. Here are just a few common CSS pitfalls and advice on how to avoid them.
Scrollable Regions
With CSS, you can make any element scrollable with the right application of properties. This can be a blessing and a curse. It’s very easy to end up with redundant scrollable areas. And if you use overflow: scroll, then some users will see more scrollbars than you probably intended.
It turns out that the scroll value means always show a scrollbar (for some platform-specific definition of “always”). These days scroll bars are usually hidden by default, but users can still opt to show them.
But even when the operating system preference is set to “show scrollbars,” you probably don’t want scrollbars showing up when content is not long enough to overflow. So most of the time what you actually want is overflow: auto. And it’s a good idea to limit it further to just the axis you intend to be scrollable, e.g., overflow-y: auto.
Text Overflow or Wrap
Web layout is inherently document-based. This means it is focused on text flow, but user interfaces tend to focus more on the viewport and specific positioning of elements.
Because of this, some bit of text that is longer than you expected can easily mess up your layout. You can handle this in advance by always considering how the text will behave if it gets too long.
By default, a long text will expand the size of its container. But it may make more sense to truncate long text. You can do this simply with overflow: hidden, but that will unceremoniously clip text that overflows. You can improve the appearance by ellipsizing, although this is a bit finicky to get working as desired.
The problem is that if you take away the text as a basis for the size of the surrounding box, it needs to get that information elsewhere. What I have found works well for single-line text is overflow: hidden; white-space: nowrap; text-overflow: ellipsis.
Flexbox
Flexbox is the sweet spot for almost any layout more complicated than basic text flow. And it’s rare to need anything stronger like CSS Grid. Flexbox is worth learning thoroughly, but that’s out of the scope of this post. It also has some pitfalls worth mentioning.
If you start applying fFexbox to every layout, you’ll quickly end up with many layers of divs flexing in the same direction (the flex-direction of the parent). This can be difficult to understand and debug.
Using width or height on an element within a flexbox layout is another recipe for confusion. It may work sometimes, but relative sizing is better controlled using the flex-basis property (or the “basis” part of the flex property short-hand). Relative sizing like width: 100% is especially confounding because it will overflow the container if the element has any margin.
Vertical Alignment of Non-Textual Elements
Vertical positioning on the web is another casualty of its document-centric origin. Although “just use Flexbox” is a valid answer for vertical positioning, it can be overkill in some cases.
Since text flow is the default layout strategy, elements can be affected by the current font size. If you’ve ever noticed some elements are misaligned because they’re getting some mysterious extra vertical spacing, line-height or font-size could be to blame. Setting one or both of these to 0 should remove the unwanted space without resorting to other padding or margin shenanigans.
Negative Margins
Speaking of margins, if you’re using negative margins, you’re almost certainly having a bad day (or you’re about to). They’re hard to understand and tend to expose browser quirks. Negative margins may have been necessary once, but, these days, better options are available.
Avoiding Common CSS Pitfalls
Debugging these issues can easily sap your entire day! But avoiding common CSS pitfalls can help you focus on more interesting problems.