Get started with WFL

Just pick something below to explore my work, services and more.

Latest Articles
Latest Art
Latest Photo
Latest Music

CSS, SCSS, and naming conventions: Why?

July 11, 2019Will Leffert

I've spent a long time writing CSS. With somewhere around 15+ years writing CSS alone, you get into habits. Some of them are hard to break, and some of them are less than ideal.

As an example, my current homepage has a single css file, hand-written, that is just over 500 lines of pure, unadulterated CSS. I followed my own naming conventions, used no override files, nothing.

It can, as you might imagine, get a little difficult to manage.

I've used SCSS before; at my previous employer, I had to build a new homepage & top level headers for a university based on supplied artwork from another agency, and utilize coding standards of the agency that managed their site. That meant using SCSS.

I like SCSS. I don't typically use it for myself, however, because frequently I'm just writing straight CSS anyway for WordPress with Oxygen.

As I work on building in React, I have the perfect opportunity to utilize SCSS in every React project I create. With Webpack, its stupid simple once configured, so why not? I'm already utilizing separate files for my React components, so having @import in SCSS (not to mention the variables, my absolute favorite part of SCSS) is a simple step that helps me keep things organized.

I've also started making use of Normalize.css in those projects, which is also a nice time saver.

What about naming conventions, though?

I don't really have a particular favorite, but I've been using BEM recently since I started really getting into React. It lends itself well to a component structure, and helps keep me sane when troubleshooting oddities with more complex renderings.

The biggest reason to use any of the above, though?

Collaboration and code sharing.

Now that I've started sharing my work, and have some projects coming down the pipe that'll be open-source, it is about time I started following standards. For the past 20 years, I've almost always served as the sole designer/developer on projects, both large and small. This is fine for me, but if I decide to refactor something further down the road, share it on my GitHub, or, gasp.. Work with a TEAM of developers, I need to make sure it is readable in a way that makes sense besides liberally sprinkling code comments.

So, keep this in mind, fellow CSS coders; standardize for your own, as well as our sanity. If I can do it, so can you!