Rute Cotrim
November 20, 2018
Writing CSS seems to be an easy job at first sight. But is it really easy to write good CSS which results not only on nice interface but also combines great code structure and logic?
It’s great to have a pleasant user interface to show to your client, nicely done animations or even the most revolutionary way of presenting boring lists and menus. But CSS is not only about the user interface, nor it is only about picking a boring wireframe and giving it real life. Being well accomplished, your style files can stop playing the ugly duckling of the project to become a pillar of the whole structure.
If you are not sure about how to start writing your files, I would suggest you to have some OOCSS (Object Oriented CSS — which concept was created by Nicole Sullivan) perspective reading. With this approach, we can easily separate our elements and give them specific skin. For this, we don’t call them by their HTML tags (generally, I find this a bad practice) but rather by an attributed class. We’ll end up having nice structured styles with specific properties being applied to the individual components.
All these years I learned a lot from my experience and also with some talented and dedicated colleagues. Below, I present you some ideas on how to write good styling code, based on all my experience and all this learning:
1. Start from a good project folder structure
It is very important to have a line in mind and start from there, not to have CSS files all over your folders with no reason why it should be there. You can choose whatever order or folders you and your collegues would like, but the most important thing is to have it well organized. Also, keep in mind that, for instance, it should be coherent to the framework you’re using. As a nice example, the Angular Folder Structure presents the stylesheets side by side with their correspondent html templates as well as their ts files. This makes sure that the CSS file we’re working on is related to that template. I’d suggest you to give them all the exact same name.
2.Capture the big picture and, then, separate your elements in individual components
This is, by far, one of my favourite ways to code. Give each one of them a good class name that will be the base for the rest of the stylesheet (you can also take a look at the BEM methodology, really useful in this case. I got to know more about this through a great colleague that helped me a lot on my knowledge and growth). By doing this, you’re able to make sure that each individual component will have its own styles. You can then apply it to different areas of your product, but it won’t ever break because the styles are applied to a specific class which gives the component the power of autonomy! Also, you’ll have great readability and facility on finding what you want, as the stylesheets will be way shorter than having a single file for all the styles. Though I have known about this methodology recently, I can’t now do css without following it.
3. If you like to have control over your code lines, set some rules!
Having style rules prevents you from starting to neglect your code. Instead of that, you will have your own code standards and will follow them every time you type something. It can be useful to have limited nesting levels (if we’re talking SASS or LESS), specific property order, nice indentation througout the files, and so on. Take a look at stylelint.
4. Give elements a simple name that anyone in the project is able to understand
Naming things is one of the most difficult tasks. Everyone says that and the struggle is real. It is really important to note this, as we always think that anyone can get what we’ve written. But most of the times we are obviously just thinking about what we’d understand and what we think it’s easy for us to understand. We need to know that we’re writing for us and for our collegues and, even if they are not supposed to touch our CSS files, they are supposed to understand what’s going on and how this or that property is about to have an effect on the elements. As an example, naming a class as “.focus-effect” that will be applied on a specific focus condition tells us nothing about what this does. We could either call it “.green-border”, as we will get that if the element is focused, it will get a green border.
5. Create some file utilities
By doing this you will be able to apply styles on specific contexts. Utilities can be used for spacings, alignments, colours, fonts and so on. For instance, you could have a basic box with a utility that gives it extra styling features if you compare it to other basic boxes on the website (you can have a basic box with a utility that gives it some extra box shadow). You have two options in hands: you can either use a class directly on your html (which kind of contradicts the second topic written here and I wouldn’t suggest you to do it, generally) or you can include the utility to the individual component. To accomplish that, you could include a CSS Mixin to the class (Mixins are well known when talking SASS or LESS, two CSS Preprocessors). A Mixin is basically a style declaration block which have a name and can be reused by simply calling it in other rulesets. This way, you can reuse a code block/declaration throughout your website or app without repeating it several times. Just keep the Mixins in a separate file and call the ones you need by its name, letting them do their work with your item.
Also, it is important to respect the identity of the product you’re working with. To keep us focused on that, I’d suggest you a last thing:
6.Having a Styleguide in mind
Did you ever think about creating a Styleguide side to side to the project your working on? Angular Material is a good and well known example where you can get some inspiration, though it’s more like a component library. You can use an external component library and still have your own styleguide, so that you can be sure of the brand’s identity. Creating a Styleguide, apart from being a guarantee that this identity will be respected, can also make things easier if we need to have some custom and ready-to-use components. Is it a great way of having the components base structure, with simple styles that can be adapted to every section of your website or app. Then, you can improve them more and more. Generally, the Styleguide presents components with no functionality added, only the basic structure, styles and useful animations.
Every language has its complexity and it can take a long time to get to a point that you can say your project has neat code and a great structure. The last one is really important to get things done way faster and easily, as it also helps everyone in the project to understand better what the others are doing and how can they help on something.
I think you are now ready to create incredible experiences, not only for the user, but also for your team!