CSS scope and coding/naming guidelines

Question

When you have a big website with lots of different pages, then lots of CSS, then big styles file (want single file to improve page load performace) one problem I see with CSS is that they don’t have scope and one style can interfere with others. One style defined in one place can affect all other styles defined after it. Let me explain my question with an example:

If I have in my CSS file

 p a {
      style-values-X
 }

 .whatever a {
     style-values-Y
 }

First style can inadvertently affect an Html like that

<p>
     ...        
     <div class="whatever">
     ...
          <a href="…"> /* this will end with style-values-X + style-values-Y */
     ...
     </div>
     ...
</p>

What is the way to code to avoid problems without having a CSS file for each Html page, long names for style classes…?

Is there any coding/naming guidelines document to organize/name your CSS classes?

JohnP · Accepted Answer · 2011-04-21 10:34:38Z

4

That's why you start out general and get more specific when working with CSS. The cascading part of it becomes easy to take advantage.

CSS specificity : http://www.htmldog.com/guides/cssadvanced/specificity/

Also this awesome link (If you're a star wars fan) : http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

answered Apr 21, 2011 at 10:34

JohnP

50k13 gold badges112 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ricardo stands with Ukraine Over a year ago

Oh, I did not know about specificity rules thanks. My question was more about a way to name the styles classes to avoid these conflicts. These can be hard to find in new pages and need to use Firebug or other tools.

JohnP Over a year ago

You could always use a class or an id to namespace it. The styles wouldn't apply for anything else

Collectives™ on Stack Overflow

CSS scope and coding/naming guidelines

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related