Need help with CSS – HTML & CSS – SitePoint Forums


Cheers :). This is a good point to remember as it’s just my preference but is based on 20 years of CSS. Others may see it differently.

Indeed, in the first 5 years of css, I avoided using classes as much as possible and could style entire pages based on html (or the zen garden approach). This approach quickly failed when I started working for clients and they changed a line of HTML code and everything broke.

I’m now trying to write code that still works if the html changes or if the client adds another paragraph of text or inserts an image somewhere I didn’t expect. You can’t plan everything, but you can plan anything.

No it’s three rules instead of one :slight_smile:

What’s wrong with just .text? (apart from his name)

Your code compiles to .userlist .title .text{}. This increases the specificity three times and means that the AU has to work three times harder to find and implement these rules. This is rarely a problem with a fast machine, but on a large application with a lot of these rules you might end up getting lag in some extreme cases.

This does not alleviate the problem. Your team could always create .userlist somewhere else and break the rules.

If you named the classes more appropriately, the problem is also reduced. I may not mind a level of nesting, but it pains me to do it :).

Unless it’s a gigantic application, I don’t like the module approach (unless it’s just a few well-chosen modules).

In most normal sites, your total CSS files should be less than 80k anyway. Why not get rid of a small image instead :slight_smile: this way your css is ready from anywhere as it is cached and available.

Most of the problems I see are developers loading library after library to do the simplest thing in CSS. Framework Libraries, Animation Libraries, etc. As a programmer you would be the first to say “why do you use jquery” when vanilla js can do most of that now. :slight_smile:

I worked in a large project for about 5 years where about 10 people worked on the application and used the module approach. It was written in Angular which I know nothing about but they wanted me to write the css for each module.

Since the scope was limited to each module, it resulted in so much code duplication that it seemed a bit unnecessary to me. If someone then decided to change the theme or design, you had to change all the modules! One or two main CSS files would have sufficed.

The problem is that when you let programmers take care of css, you don’t get css anymore 🙂

Sure, there’s a time and a place for everything, but when all you have is a hammer, everything feels like a nail. :slight_smile:

I’m not saying you can’t use the methods you mentioned, but I would say use them with caution. Read the article I mentioned above as it echoes many of my thoughts.


Comments are closed.