Need help with CSS – HTML & CSS – SitePoint Forums



cheers :). This is just my personal preference, but it’s based on 20 years of CSS, so it’s good to keep in mind. Others may see it differently.

In fact, for the first five years of css, I was able to avoid using classes as much as possible and style the entire page based on html (or the zen garden approach). When I started working for a client, that approach quickly failed, they changed his one line in the html and everything broke.

I’m trying to write code that works even if the HTML changes, or if the client adds another paragraph of text, or inserts an image in an unexpected place. You can’t plan everything, but you can plan something.

No, there are three rules instead of one :slight_smile:

What’s wrong with just .text? (name aside)

The code compiles to .userlist .title .text{}. This means that the specificity is 3x his, and the UA has to spend 3x as much effort as he does to find and implement those rules. This is rarely an issue on fast machines, but large applications with many of these rules can experience delays in extreme cases.

It doesn’t alleviate the problem. Your team may still create the .userlist elsewhere and break the rules.

A better name for the class would alleviate the problem. Also, I probably don’t mind one level of nesting, but it’s a pain to do :).

I don’t like the modular approach unless it’s a huge application (unless it’s a small number of well-chosen modules).

Anyway, for most normal sites the total css files should be less than 80k.Why not remove one small image instead :slight_smile: That way the css is cached and available so you can access it from anywhere.

Most of the problems I see are developers loading library after library to do the simplest things with css. Framework Libraries, Animation Libraries, etc. As a programmer you will be the first to say “why are you using jquery” when you can do most things with vanilla js. :slight_smile:

I have been working on large projects for about 5 years. There were about 10 people working on the application for this project and they used a modular approach. It was written in Angular, which I know nothing about, but they wanted me to write the css for each module.

The scope was limited to each module, which resulted in so much code duplication that it seemed a bit pointless to me. After that, if anyone decided to change the theme or design, they had to change every module! One or two main css files are enough.

The problem is that if you let the programmer take over the css, you won’t get the css anymore 🙂

Everything has its time and place, of course, but when you only have a hammer, everything looks like a nail :slight_smile:

I’m not saying you can’t use the method you mentioned, but use it with caution.


Source link

What do you think?

Leave a Reply

GIPHY App Key not set. Please check settings

    in app browsers

    Tool displays injected JavaScript code via an in-app browser


    Is it ideal to use the :nth-child() selector? – HTML and CSS – SitePoint Forum