What other CSS best practices should I keep in mind (besides removing unused selectors)?

Question

What other CSS best practices should I keep in mind (besides removing unused selectors)?

Answer

Besides keeping your CSS free from unused selectors and declarations keep in mind some other best practices like:

  • making your CSS easy to read, this can be implemented by
    • using comments to describe logical groups of styling, for example a comment that describes a group of footer styling:
/* footer content */
footer {...}
  • keeping whitespace/indentation consistent by placing each selector and declaration on a new line, and indenting each declaration with 2 or 4 spaces:
h1,
h3 {
  color: yellow;
  text-transform: uppercase;
}
  • keeping your CSS DRY (Don’t Repeat Yourself) for more concise code, for example:

    • using class selectors to apply styles to multiple elements at once
    • using shorthand notation when possible (for properties like padding and margin)
  • using the separation of concerns principle to keep your CSS and HTML separate by:

    • avoiding the use of inline styles in HTML
    • avoiding the use of an internal stylesheet (the <style> element)
1 Like

I also order by CSS declaration alphabetically which makes my code easier to read, and makes it easier to find specific declarations

1 Like

@samyadel while everyone has what works for them, I strongly doubt alphabetical ordering makes it easier to read and find specific declarations because if you have a class “ant” and another class “zebra” you’d have to scroll from the top of your CSS to the bottom. Now Imagine having to perform this scrolling “dance” when working on a large project!

I personally prefer a separation of concern/top-to-bottom approach, for example:
all css styles for the header are lumped together, then the styles for the footer are all together.
It’s just easier with so much less scrolling around, plus it makes debugging easier, if your code is not behaving as it should you know what’s causing the problem is in the section dedicated for styling that element.
Just my 2 cents :slightly_smiling_face:

5 Likes

No, that’s not what I meant. You understood that I am ordering my CSS rules alphabetically. However, I order my declarations (E.g. color: blue;) alphabetically. I group my related CSS rules together. So all the rule sets styling my footer would be together

4 Likes

@samyadel oh my bad! it’s nice you do that though even the guys at codecademy couldn’t manage that, extreme cleanliness! :joy:
although even when writing properties, I kind of like writing related properties close, for instance position and offset values like top so it’s easier to eyeball but your style is nice too. :+1:

3 Likes

Yes, keeping all your related declarations close is a good way to keep your code clean. I am wondering which method to use, I know many people who prefer keeping their related declarations close (and it only makes sense) :grinning:

I always order my declarations alphabetically after I write my CSS. This is a form of refactoring and I wouldn’t like to waste my time doing it at the start without even knowing if it’ll work.

2 Likes

@samyadel That’s some work but still very nice practice you have there. I really thought it was the CSS selectors you arrange alphabetically, I was like : I have to intervene before he breaks the mouse wheel while scrolling on a big project! :laughing: :slightly_smiling_face:

2 Likes

How do i know what’s unused? how do i figure that out? do i go through each of them? or there an easier way to solve for that

You can do it by reading the index.html. Checking classes, etc.