Need help on CSS – HTML & CSS – SitePoint

Thallius:

thanks for your point of view.

Cheers :). That’s a good point to remember as this is only 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 whole pages based on the html (or the zen garden approach). That approach soon failed when I started working for clients and they’d change one line of html and the whole thing broke.

I now try to write code that still works should the html change or if the client adds another paragraph of text or inserts an image somewhere I didn’t expect. You can’t plan for everything but you can plan for something.

Thallius:

Don’t you agree?

No that’s three rules instead of one

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

Your code compiles to .userlist .title .text{}. That raises the specificity three times and means the UA has to work three times as hard to find and implement those rules. It’s seldom an issue with a fast machine but on a large application with lots of those rules you could end up getting a lag in some extreme cases.

Thallius:

This is a nice idea but it also takes the big risk to have double styles for different things if you work in a big team.

That doesn’t alleviate the problem. Your team could still create .userlist somewhere else and break the rules.

If you named the classes more aptly then the issue is reduced also I don’t mind perhaps one level of nesting but it does pain me to do it :).

Thallius:

Lets say I load a module which is for user management. here I get a div which contains the user list and if I click on a user in the list I get a div in which I can edit the users details.

Unless it’s a mammoth 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 under 80k anyway. Why not get rid of one small image instead in that way your css is ready to go from anywhere as it’s cached and available.

Most of the problems I see is that developers are loading library after library to do the most simple thing in css. Framework libraries, animation libraries and so on. As a programmer you’d be the first one to say “why are you using jquery” when vanilla js can do most of it now.

I have worked in a large project for about 5 years where there were about 10 people working on the application and they were using the module approach. It was written in angular of which I know nothing but they wanted me to write the css for each module.

As the scope was limited to each module it ended up with so much duplication of code that it seemed slightly pointless 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 trouble is that when you let programmers take over the css you no longer get css:)

Of course there is a time and place for everything but when you only have a hammer then everything looks like a nail

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