CODEWITHSUNDEEP
htmlcsscoding-style
Ricardo stands with Ukraine
Ricardo stands with Ukraine

Reputation: 4822

CSS scope and coding/naming guidelines

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?

Upvotes: 1

Views: 2580

Answers (1)

JohnP
JohnP

Reputation: 50009

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

Upvotes: 4

Related Questions