Modern CSS: Four Things Every Developer and Designer Should Know About CSS

Posted on 19 Mar, 2018

Contrary to popular belief, CSS is an absolute delight.

Many developers I talk to think the phrase “Modern CSS” is an oxymoron. If you haven’t been watching the growth and maturity of CSS in the past 5 years, you’re doing yourself a disservice.

In this article, I’ll outline the four things that excite me every day about the state of CSS in 2018.

Layout is no longer hard with CSS Grid and Flexbox

Welcome to the new world order. Gone are the days of float-based layouts. Gone are the headaches of width calculations and hacks.

Unlike floats, the Flex and Grid specifications were written specifically for complex and fluid designs.

Flexbox

The Flexible Box Module is a CSS Specification intended for fluid user interfaces. Take for example, the beginning of the Abstract from the specification:

The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.

Flex makes layout of boxes in one direction uncomplicated. Beyond that, it codifies many of the design patterns we had used floats for.

Want your three promotional spaces to always be the same height? The default value for align-items is stretch and makes this happen in zero lines of code.

CSS Grid

In 2017, our industry saw one of the fastest and most streamlined implementations of a new browser feature. CSS Grid went from zero support to 100% modern browser support in under a year. This is huge.

CSS Grid is a layout specification meant work together with Flexbox.

Where Flexbox works from the content out, Grid works from the layout in.

For the first time ever, we can specify a layout mode on the page and have our content reliably enter across TWO dimensions.

It’s little secret that I love CSS Grid. The majority of the posts I make on this site are about it.

If you’ve ever wanted to stretch content across multiple rows without additional markup, this is your time.

If you’ve ever wanted to place content in specific areas without the drawbacks of absolute positioning, this is your time.

If you’ve ever wanted to create refreshing, unique layouts, this is absolutely the time to be doing web design.

Guard against the cascade, but don’t forsake it

There are many thought pieces written about CSS. Many of them center around the global nature of the cascade (the “C” in “CSS).

There’s a growing faction of developers who feel that the cascade has become a liability. It’s too easy for styles to bleed between components. I won’t argue that it IS easy for styles to leak in a global way, but the cascade is your friend.

It’s sometimes your friend that gets you into trouble, but that can make the most memories.

I won’t add to the thought piece clutter, except to say this:

Using the cascade for sensible global styles is at the forefront of a maintainable website. Encapsulated styles for components that don’t depend on global styles is also extremely important.

Finding the appropriate mix of global and scoped is the key. It’s also the key in many programming languages.

I use a mix of strong, sensible global styles and BEM in my CSS. Other’s mileage may vary. Just remember, “Cascade” is not a dirty word.

I'm still convinced that taking inspiration from punk rock design of the 70s and 80s is going to be a trend. If you want to start small, introduce some angles to your design. This is a simple trick to angle a stripe of content without adding awkward white space.