Comparing CSS code styles and deciding which is the best practice
CSS is in my opinion an extremely flexible language. There are a lot of ways of writing your CSS code. You will notice that some of them do not follow best practices but, thanks to its flexibility, there are plenty of “correct” ways to write it.
Before proceeding with an example, let me tell you in advance that in addition to this CSS code comparison, I’ll be giving 8 tips to keep your CSS organized!
Back to the main topic. Let’s say you want your page’s button to have a circular shape with a radius of 10px, a red background and a plus sign. In HTML this is easy, you could write:
That’s it! You’ll get the button with the plus sign (don’t you dare use an image as the plus sign, it wouldn’t make sense because an image would add some unnecessary extra bulk to your page). Now we want to style our button. Here comes the real challenge. Should I code:
Or is it better to have a single class?:
Also, you could consider writing it this way:
So, which one should you choose?
At first sight, you could argue that the second is the worst one because of its poor scalability and awkwardness, but most programmers use it since they have all their buttons already predefined so it’s way easier to reuse them.
The first one separates each behavior into different classes so you can generate new, different buttons just by adding or removing classes. This sounds good, but in my opinion, CSS classes should be related to their “component”, as they are in the third option. This is because you can have different circular components, like a button and an image, and although both of them have the border radius property, perhaps the image might have a circular border around it too.
Related post: 8 tips to keep CSS organized
You may be wondering what is a component? A component is a part of your page which does something in particular. The idea is to enable moving and reusing this component in your page, without changing your CSS. For example, you can easily do this with a button by defining a class which represents the default button and a bunch of classes that provide the button with additional properties to customize it for different situations.
The next option I would choose is the third one! At Wolox, we have a design team that handles the mockups. So, it’s easier to establish all the buttons, headlines, colors and particular components that you will find in the developed page before starting to code. This is the reason why we don’t use the first option; we prioritize scalability. In the future, we could add new and similar buttons and we want to keep our code DRY. The final CSS would look something like this:
I guess you’ve noticed the SASS color variables used in the code above. Using color variables is considered good practice, since your red color might not be the regular red (#FF0000) but a different shade of red you are using in your color palette. Another tip when writing CSS is to use SASS. I suggest you to create a file called “colors.css.scss” in your stylesheet directory and specify every color in your palette by using variable names that represent the color you want, for example:
Why is it that the variable name must represent the color you want? Because if you want your background to be red and you named your red variable “$thick-border”, it would be a bit confusing, and defining another variable with the red color wouldn’t be a smart move.
I hope you’ll find this post useful! Before you leave, I suggest you to read our 8 tips to keep CSS organized. It will provide you with a greater understanding of this topic!
Posted by Gabriel Zanzotti (gabriel.zanzotti@wolox.com.ar)
