CSS best techniques


I’m absolutely new to all this but thought it about time I got to know a little bit more about web design. The question I have is regarding css and what is the best approach to heirachical naming. Most of the examples show simplistic views which don’t seem to be real world scenarios so looking for advice on best practice for this.

I have a web page, this has an id #open-reviews

#open-reviews contains a list of questions, these are contained in .question-container

.question-container contains a number of questions in .question

a .question has a container .rating-container

a .rating-container has imagebuttons (.net) which can be .up or .down

So, when referencing the above, I could do

#open-reviews .question-container .question .rating-container .up {}

or #open-review .up {}

But which should I do? The first style is very specific, but is probably overkill for the complexity of the page.

The second exmaple is the easiest but could mean more issues if the page became more complex.

Or is there a better third way?

Any advice would be apprecaited

Thanks for your quick reply.

Now I know I’m not doing something daft!

Hi, welcome to Sitepoint :slight_smile:

I think you answered your own question there :wink:

Obviously the second answer with the shorter path is the better approach as you want to keep your code easy to manage and more compact.

There is no need for the first approach unless you have a class of .up contained in other elements within the context of #open-reviews that you don’t want to be affected.

If you are using .up in multiple different places for different effects then common-sense would say that you should have used another class for the different situations and not make the code more confusing than it needs to be.

The main reason that path names start getting longer is when you need to over-ride a style of similar weight and tagging the parent’s id onto the path name ensures that the new style will win out. However it soon gets out of control and is best avoided so keep things simpler and more concise and for the sake of an extra unambiguous class you can save a lot of messing around.

On large sites there may also be speed issues relating to long and inefficient selectors but for normal sites this shouldn’t be an issue.

In the end it does depend on the structure of the site and what you are doing with the code but in most cases I would say keep it as short as possible but if it helps you to the odd selector in the list then it’s not really that big a crime.

I often say ul#nav when I could just say #nav but I like to know where my uls are and I couldn’t tell that from the stylesheet if I didn’t qualify it. However, I would never say div#something because that would be of no real use to me.

I would always aim to use the minimum amount of code that you need to do the job properly, but no less. The second one looks much neater, and you can always go back and add more specifics in later, if you find for example that you need to make a different declaration for #open-reviews .puzzle .up {…}. The more specific you make your declaration, the more declarations you are likely to have to make, because they won’t cascade down.

But … one thing to consider … do you need all those classes? If the only elements inside #open-reviews are all .question-container then you don’t need .question-container at all.