5 Tips to write a better CSS

If you work daily with CSS or if you are starting to layout your first web design, certainly more than once you have wondered if there would be any more accurate or efficient way to write selectors, or if the order of the properties affects something or what is the difference between writing 0px o 0rem when a value is 0. I am sure that you have ever considered these issues.

So assuming that the correct way to write CSS is the one that is 100% understandable by browsers, we will review good practices to optimize our stylesheets and make a point more effective and orderly at work!

What CSS editor should I use? Which one is the best?

It is the eternal doubt and question. For me, above all, it is the user and then the tool. I mean, it is useless to use a plane if what you are going to do is to run on a road at 60km per hour. A lot of power is useful in such circumstances.

choose-editor-write-css

As with code editors, some provide many features, plugins and extra features that make them very powerful (and complex) tools. But, are you really going to use all that to write a few lines of CSS? Probably not.

My advice: use the tool that best suits your needs. If you write only CSS and want to do it quickly and fluidly, do not get into development environments with project management and others. Are you going to use preprocessors? Then look for one that is ready to work with Sass. Are you on a project with a large team? Integrate your CSS in a larger environment.

Some interesting options if you are starting are: Notepad++: with this editor I started playing my first few lines of CSS. It is free, light and without any complications. Sublime Text: perhaps somewhat more advanced, it is one of the most used. You can install packages, which are as accessories that add all kinds of functionality. Other interesting options are Brackets: where you can extract design data that you have to layout from Photoshop (PSD) and Atom: which is highly configurable with many themes. But there are many more!

If, for example you are using WordPress and just want to add a few lines of CSS to your template, you may not need a publisher, as some plugins integrate a basic interface where you can add CSS correctly and quickly.

As you see, it depends on the project, but especially on you. You have to choose what makes you feel more comfortable, more efficient, and the interface that motivates you to work. That is important. And of course, I recommend you to occasionally try a new editor typing a few lines, such as design… As maybe you will discover something better.

Always use a reset at the beginning of your CSS

For me it is fundamental. If you do not do it, nothing happens, but then you run the danger of not defining any element, being the browser responsible to style it. So, surely it will cause a mismatch in the expected design.

use-reset-writer-css

There are many resets that are very good. Some may abuse a bit and instead of resetting the styles browser directly, start giving their own styles. I prefer something simpler and lighter that let us freedom to work styles in subsequent lines.

Some good examples are HTML5 Doctor, Normalize.css and also Sanitize.css.

Organise your stylesheet by blocks or parts

This is a good practice that should be almost mandatory, either for the health of your colleagues or your own.

I honestly do not think there is anything more frustrating than inheriting a project of a partner and having to spend hours searching the font sizes of the titles, where the colours of the backgrounds are, or where the footer styles are defined…

organice-editor-css

Well, in fact, there is something more frustrating: this project is yours! It is been a long time without touching the project and now you do not remember where things were.

Therefore, and in order that all flow faster when modify and edit items, we design blocks or containers of elements in the stylesheet so that everything is neater!

Some people prefer to perform it according to the elements of the design. For example, one photographs block where we define the font-size, colours, types, interlineations … another block for links, one for buttons, one for icons…

While there are web designers who feel more comfortable organizing the CSS in connection with the parties or blocks having the design. For example:

  • Header: we define all styles related to the header, such as the logo, menu, colours…
  • Body: everything related to the body text, widths, images, videos …
  • Sidebar: the sidebar styles
  • Footer: all about the footer

Choose the more comfortable option for you. Personally I prefer the first one: defining elements no matter where they are displayed and the order in which they appear. Some say that the second option may be more efficient as it follows the order of rendering of HTML, so you can improve somewhat the loading speed of the web. They may be only a few thousandths, so here I leave the information.

Comment your CSS so you can understand it

It was one of the first advice I received and certainly the best one until today. You do not know how much time you can save if you comment your own code. Often we write very fast and think that everything that we define makes sense in our heads. And it may be true, but our mind has a poor ability to remember small irrelevant details, so what make sense now in our head can fall into oblivion in a matter of hours.

After a year, if you open that stylesheet without comment to edit a single line, you will start to dive between selectors and properties without remembering very well why they are there and what function did. And then you will get to the line you want to edit, but surely you will do it wishing that this edition will not break anything or change anything of the other elements.

comment-css-editor

For this not to happen, it is always a good practice to comment your CSS code. It is really good to comment any code that may be susceptible to modifications, either by the author or by a colleague.

Comment in CSS is very easy, just include / * before the comment and close the comment with * /. Everything that is inside will be ignored by the browser, so it will be useful only for designers.

Use intelligent names for selectors

The last tip of this article is for the way we name the selectors in CSS and HTML, either classes, id or attribute values. Correctly naming these elements we avoid problems with older browsers while we decrease the likelihood of mistakes to remember that class or id.

The main element that causes this debate is the underscore ‘_.’ Although in other programming languages is valid, in CSS we will try to avoid it because some older browsers have problems with it. We speak about earlier versions of Internet Explorer 7 and the first of Opera, but to avoid problems, use the hyphen ‘-.’

name-class-editor-css

It is different when it comes from capital or small letters. CSS is sensitive to them, so the class .alert-box is different from .alert-Box. To avoid duplication and human error at this point, it is good practice to use only lower case letters in the name of classes and id.

As for the semantics, my advice is that the title of classes or id identifies the function performed and not the properties assigned to it. For example, if we have a block with red border that will serve as an alert box to warn the user about important news, it is better to name it .alert-box than .red-border-box, because if we decide to change the design in the future and the picture does not have any borders and it is displayed with an orange box, what is the logic then if we continue to name it .red-border-box.? Instead, if it is still an alert box, .alert-box. would be valid.

As you can see there are many details that can differentiate a good CSS of a large CSS: order, consistency, semantic… Regarding the level of performance and UX, the user is not affected by these small changes, but in our day to day, it helps us to be more organized, more efficient and faster in our work.

Soon we will bring a new list of interesting good practices to improve our workflow in CSS where we will address in depth the topic as we did with the CSS pseudo elements (In Spanish). Until then, I hope these tips have helped you and you use them in your everyday life! 😉

Leave a Reply

Your email address will not be published. Required fields are marked *