Geek Answers Handbook

CSS Best Practices: classes for all elements or styles by parent class?

So, I was interested in the following: I have a main div div and a div in the sidebar, and the CSS looks like this:

.main{ width: 400px; height: 300px } .sidebar{ width: 100px; height: 300px; }

Now I will not include all floating properties, since I am only interested in the following: If I have an p element in both of them and I want them to have different styles, I have to give paragraphs of different classes or I have to define their style in the following way:

 .main p{ color: blue; text-align: right; font-family: ... }

And then for .barbar p I would define something else ... An alternative would be to define the class p.myclass and define the style there. I'm trying to figure out which is better. Obviously, I need less markup if I have 30 p elements in one of the elements with the first method, since I would have to give them the whole class. On the other hand, I am creating CSS that I can only use for this parent element, instead of having a common definition that I can apply elsewhere on the site ... I noticed that in many "big" websites almost every html element has its own class ... Any ideas?

+4
source share
4 answers

I would definitely go with a deterrent selector in case you give. Less false classes in the markup are easier to maintain, and the rule .main p clearly states what it does. Use your opinion on whether there are even more complicated cases.

Note that '.main p selects all paragraphs, not just direct children, which may or may not be what you want; Accidentally nested descendant matches are a potential source of errors (especially for cumulative properties such as relative font size). If you want to select only children, you will need ".main> p, which, unfortunately, does not work in IE6.

This is one of the reasons why many sites go crazy on behalf of the class: the more involved selectors that could otherwise be used to select elements without the class name, as a rule, do not work in IE.

+4
source

I will vote for .main p and .sidebar p because:

  • This most clearly expresses your intention, as you express it in English.
  • This reduces the number of explicit classes you need in your HTML
  • If you change your mind later and want an explicit paragraph class with this style, you can simply add it: .main p, p.foo
+3
source

In my opinion, using nested selectors [parent child relationships] will be harder to read and maintain.

Evdn, if a design changes frequently, CSS should be less affected by this. Thus, the style of an individual element will be easier in case of maintainability.

If the element will exist in a predictable place, you can style it based on the parent element.

+2
source

The main drawback of class styling for each individual element is bloat: if you have many of these elements, CSS attributes will become a noticeable percentage of bytes transferred. Especially for large documents, saving several kilobytes in the download can be counted. Especially since AJAX or IE requests where innerHTML parsing is extremely slow.

+1
source

More articles:


All Articles