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

Posted on 19 Mar, 2018
Posted in development, design, CSS

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.

Resources

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.

Resources

Graphical Manipulation is possible with filters and blend modes

Colors and effects used to be the purview of Photoshop or JavaScript. Now they’re a first-class citizen of CSS with filters and blend modes.

With CSS Blend Modes, web developers now have an opportunity to use image manipulation blend modes such as multiply and screen.

There are a lot of practical applications to this. There are also a lot of applications that will make designers very, very happy.

While writing this post, I got sidetracked and made this fun little example:


CSS Filters give developers a load of image manipulation options. Some of my favorites are contrast and hue-rotate.

From a practical perspective, there are quite a few hover state or overlay applications.

I was tempted and made a fun hover state for an image in a few lines of code:


Resources

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.

Resources

CSS Selectors are more powerful than you know

I was chatting with a developer friend of mine a few months back. He was working through an issue in his CSS. Someone who is a great developer and quite good at CSS.

He wanted the ability in SASS to specify that an element didn’t meet a certain criteria.

“You know if this element is a .X but NOT .Y,” he said.

I looked at him a little confused. “What do you mean?”

He explained again. 

“Well, I don’t know about SASS on this, but have you tried a CSS :not selector?”

All this to say CSS is a HUGE area of expertise and even talented developers miss functionality.

In 2018, CSS selectors are more than element selectors, ID selectors and class selectors.

The :not selector is a great exclusionary selector. When you want all list items that are NOT active

li:not(.active) {
    color: red;
}

Sibling selectors are also quite powerful. There are adjacent siblings (siblings next to each other in the source) and general siblings (may be seperated by other siblings).

I use sibling selectors in this example of a CSS-only mobile navigation. Adjacent siblings are the basis for the “lobotomized owl” reset pattern * + *

If you’re only using classes to select you’re missing out on some fun.

Resources

CSS is Wonderful

CSS in 2018 is fun. It’s wonderful. If you’re not enjoying CSS right now, you’re not having enough fun in your work.

What are your favorite pieces of Modern CSS?

You May Also Enjoy

How To: Use CSS Grid to Mix and Match Design Patterns

In a previous tutorial, I described how to create a simple fluid card grid with CSS Grid. In this tutorial, we'll take it a step farther and create promotional spaces that morph in interesting ways.

How To: Use CSS :after pseudo-elements to create simple overlays

Use :after elements to create the simplest HTML possible to render useful and fun overlays on top of background images. Then extend them with blend-modes!

3 Strategies for Getting Started with CSS Grid

If you're wondering how to start working with CSS Grid, here are three strategies for adopting it into your workflow.