In Flow: The Mura Blog

CSS is Awesome

November 7, 2018

It's a fact - a lot of developers have a love/hate relationship with CSS. Awesome, right?

"CSS is awesome when it works, and not-so-awesome when it doesn't," Blueriver Senior Developer Evan Dunham explains:

"It's like a rollercoaster ride being a CSS developer, both uncomfortable and awesome at the same time, where you go through these ups and downs."

Writing CSS is both challenging and rewarding, but through practice and experience (with a constantly evolving development landscape), it can be an empowering skill set to possess.

And while Dunham now experiences more ups than downs when writing CSS, it hasn't always been that way. 

A moving target

Since the early days of HTML websites, there has always been a need for style. 

In the 90's, before CSS gained wide adoption, there weren't a lot of options for laying out content on a page, and HTML tables ruled the landscape . But once CSS entered the scene, there was a strong push to keep the HTML markup and content separate from the visual layout and styling.

... figuring out a solution to what seems like a simple problem can actually be one of the most rewarding highs of the CSS developer's journey.

Then, things got more complicated with the trend towards responsive or fluid layouts that can shift and change depending on the size of the viewer's screen. What's more the endless patchwork of browser compatibility for various CSS properties created a constant battle of ideas versus limitations. "We couldn't use rounded corners or box shadows. The border-radius property (for rounded corners) seems like something that's pretty simple, but we didn't have support for that with CSS alone until at least 2011," Dunham says.

However, figuring out a solution to what seems like a simple problem can actually be one of the most rewarding highs of the CSS developer's journey. "CSS encourages experimentation and getting clever to solve honestly simple problems, but it's challenging because of the technology we have to work with."

Getting ahead of the process

One of the most significant power-ups to the CSS developer's workflow was the advent of CSS frameworks such as Less and Sass, which allow for dynamic scripting with CSS-like code using variables and nested selectors. Rather than directly editing the style sheets which guide the browser's rendering of a page, a Sass or Less developer will use a "preprocessor" to compile the dynamic code into CSS style sheets automatically, saving endless hours and making global changes much less painful.

This same evolution is apparent in Mura itself. Earlier versions used straight css, then the default theme was rewritten using Less files and the dynamic "cfstatic" compiler which would compile and minify stylesheets directly on the server. The underlying Bootstrap framework was also based on Less, allowing for a variety of methods to easily override and modify the base Bootstrap styles for a given theme. This has now been deprecated (and in the latest Mura version, completely removed) with the advent of a plethora of even better local preprocessor options, as the evolution of best practices continues.

"Learning how to write for Less and Sass was very uncomfortable but once we understood it, we realized it's actually totally awesome," Dunham says. 

The key is to get everybody who is involved in the project to be calling a thing the same thing.

The latest default Mura theme is based on Bootstrap 4, which has moved from Less to Sass (also Dunham's CSS framework of choice). While similar, Sass provides even more flexibility and can be compiled in just the same way as Less, often using the same preprocessor tools.

Going forward, with <style>

"One way to get better at CSS is just understanding all the tools that you have in your tool shed," Dunham says. 

There is a vast wealth of information available for anyone looking to better their CSS skills, including some amazing examples of "extreme CSS", showing off the things that can be done with a few lines of CSS code. Lynn Fisher illustrates just how far CSS has come and how much more than shapes, fonts and colors it can do, in the CSS drawing experiment at A Single Div, where she has created some shockingly complex artwork using only a single HTML element and some CSS.

...there are always multiple solutions for any problem. The true power comes through creativity and continual learning.

There are a few key resources that any CSS developer should be familiar with, starting with the "inspector" panel built into every modern browser. Dunham also recommends getting familiar with the powerful one-dimensional layout method known as Flexbox, and using a standard, opinionated naming convention for your css selectors.  "I like to use a methodology called BEM," Dunham says.  

BEM stands for Block Element Modifier and it's a highly useful, powerful, and simple naming convention that makes your front-end code easier to read and understand, easier to work with, and easier to scale. "At first it was incredibly uncomfortable, I didn't get it, it's too verbose. But through understanding, I learned just how awesome it is."

When it comes to editing CSS as a team, Dunham says "The key is to get everybody who is involved in the project to be calling a thing the same thing." BEM helps with that as well. 

He also recommends getting creative with the ways you utilize the power of CSS, not only to show the content on the rendered page but to help you with your own development, such as creating "style finder" rules to temporarily highlight or emphasize specific elements in a complex page, or development-only "breakpoint indicators" for responsive sites, which are visible only at certain screen dimensions, to clearly show which predefined screen size breakpoint is being used in the current view. 

These examples are only a few of the many possibilities and ever-changing options. The point is, there are always multiple solutions for any problem. The true power comes through creativity and continual learning.

Like most technology, CSS has evolved over time and with that, developers have had to evolve too. Dunham suggests that the key to keeping up with this continuous evolution and minimizing the frustration is to continue to grow as a developer: "Always keep experimenting and you will be impressed with how awesome CSS can be."

More from Blueriver

Join Blueriver Senior Front End Developer Evan Dunham for an insightful and fast-paced celebration of CSS and a handful of what makes it Awesome. In this free on-demand presentation, Evan explores CSS history and browser evolution along with useful development tips, tricks and tools.