CSS is simple. Over the life a project, however, that simple little file can become quite complex.
In an effort to help that, some smart folks came together and created a language on top of CSS that would get processed into normal CSS. They added a bunch of helpful functionality, and then gave us a way to translate it for today’s web browsers.
Learning this new way of working hasn’t been easy, but the benefits are already becoming very apparent to me.
The Good
- Variables
Variables are amazing. Define something once, then use it all over a site. So far my most common usage of this is to define brand colors as variables, then use that variable all over my CSS. The benefit is that if the color ever needs to change, I only need to update it in one spot. - Color functions
This is another thing that really got me excited. Combined with the above, I can tell my CSS to darken, lighten, or desaturate a color without ever needing to deal with hex codes, RGB, HSL or whatever. - The SCSS syntax
Nesting makes my code a lot more readable. It also forces me to think about things in a more modular way. - Compass
This is a library that includes a bunch of handy CSS3 shortcuts. It gives me a way to ensure that I’m writing the most standards-friendly, modern code, for every project I work on. - Inline media queries
I think my days of mobile specific stylesheets are coming to an end. The ability to define a new responsive style right below the standard styling is really great, and only further helps with organization.
The Bad
- Setup
This language requires the use of an external program to process the code. That means I have to define projects in both my code editor and my preprocessor, not a major issue, but definitely adds a layer of time and complexity to every single project. Quick changes require me to run my preprocessor, my code editor, and some web extensions just to preview my work. - Editors
While this technology isn’t exactly brand new, our code editors still need to catch up. My editor of choice only has partial support for the language, and I haven’t been satisfied with other editors that have a little bit more. Ideally we would be able to live preview things as they are written, then process as we deploy, but currently it requires a save, process, preview workflow, which is much slower than I’m used to.
Clearly the weight of my argument is on the benefits side, but sometimes it’s the daily things I need to do that can add up to happiness or frustration with any piece of technology.
Considering that this is the first major change to the way I’ve been writing CSS since I started many years ago, I think I’m off to a good start. Going forward, nearly all of my new projects are adopting this approach. I don’t think it’s worth refactoring existing sites just yet, but for now, this feels like the future, and I’m having fun exploring.