Catching up with Modern CSS

A colleague of mine recently reached out to ask about new features in modern CSS. He started his career as a web developer in the 2000s but hadn’t touched CSS since. He was not looking to become an expert web developer but just to know enough to style some simple pages. He remembers getting frustrated by “relative” vs. “absolute” positioning among the other annoyances of CSS. He asked me to share things or resources to learn about modern CSS. This is what I recommended checking out.

CSS 3

CSS 3 was the last update to the CSS language since the late 2000s. It came with quite a bunch of new features like the ability to add background images easier, media queries, new layout methods, powerful selectors, CSS Fonts, named colors instead of hex codes, among other improvements. Read What’s new in CSS 3.

Also, read this to understand why there will never be a “CSS 4” in the same way we came to see CSS 3.

Media Queries

With the rise of smartphones, responsive design is necessary to render a web page correctly to the screen size and resolution of the device. CSS media queries allow you to apply CSS based on many parameters like min-width, max-width, aspect-ratio, resolution, and more.

This is an example media query for the iPhone X. It allows you to add additional styling for that device.

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
    /* styling goes here */
}

Flexbox and CSS Grids

Layout engines in the different browsers were inconsistent and tough to understand. I remember in the 2000s giving up and using tables as a layout mechanism against the intended use of that element. Luckily, we now have two excellent options for layout builtin to CSS in most major recent browsers. CSS Flexbox and CSS Grids.

Flexbox allows you to layout and space elements in one dimension (horizontal or vertical). It’s a great way to layout websites like blogs and news sites.

Grid allows you to layout and space elements across two axes (horizontal and vertical). It is a great way to layout your page if you’re looking for multiple columns and rows.

Both of these CSS features are well supported across major browsers so you can safely use them on any page. Can I use: Flexbox. Can I use: CSS Grid.

Some articles and courses:

• A Complete Guide to Flexbox
• The ultimate CSS battle: Grid vs Flexbox
• Don’t Overthink It (Flexbox) Grids
• Learn CSS Grid from the great fellow Canadian Wes Bos.
• What the Flexbox! also from Wes Bos.

Sass

Over the years, two supersets of CSS (LESS, SASS) were released and became popular ways to write CSS. Large amounts CSS can be a pain to manage, especially if you want to reuse CSS styling across multiple HTML pages. Recently, it seems that Sass has taken the lead over Less (I know that some of you will not agree, but Google says so). Sass introduces a few key features to CSS that I absolutely can not live without.

Sass being a superset of CSS will need to be compiled to CSS to be interpretable in a browser.

Variables

Sass introduces the ability for you to create variables by prepending the $ symbol. This language feature allows you to reuse values across all your CSS styling.

$theme-color: #333;
body {
  color: $theme-color;
}

Nesting

HTML has a clear and nested hierarchy of elements. You can now do the same with Sass.

nav {
  ul {
    list-style: none;
  }
  a {
    text-decoration: none;
  }
}

This feature will map the hierarchy to nav ul.

Partials, Modules, Mixins and Extend.

Partials allow you to modularize your CSS into separate files that you can import using the @use rule into modules.

Some things are annoying to rewrite over and over again; that is what @mixin are for - you can create mixins that can be added to any CSS style.

Similar to mixins, you can mark a set of CSS properties as a “placeholder” or a “template” that will only be used if it is called with an @extend. If it is not extended from, then it won’t be included in the compiled output.

CSS Frameworks

Three CSS frameworks came out in this time that increased web developer productivity: Bootstrap, Foundation, and Material Design.

Bootstrap is extremely popular among developers. So popular that many individuals started to complain that all websites look the same. Bootstrap v4 was built for a responsive, mobile-first world and had extensive styling and components included. It is also themeable, and there are wrappers for your favorite JavaScript libraries (React, Angular, Ember, etc). Bootstrap would be a great framework for any project that needs high initial developer velocity.

Foundation is a similar framework to Bootstrap with the same features. The differentiator is that it relies on the semantic meaning of HTML elements to keep your markup clean.

Material Design is a design language introduced by Google for Android that was also quickly adopted elsewhere. There quite a few competing JavaScript and CSS libraries implementing the language.

PostCSS

PostCSS and Autoprefixer were excellent tools to make it easier to support different browsers and optimize your CSS to work better across all browsers and versions. Just use them.

Hope that helps!

Great Resources

• CSS Almanac and anything else from Chris Coyier.
• All things from Wes Bos.
• And from Sara Soueidan
• And from Erik Meyer
• Any anything on A List Apart