CODEWITHSUNDEEP
htmlcss
user575363
user575363

Reputation:

how to avoid the ID name in css file

is there any efficient way to scan the id & class name in css file? there are many css file in my web app and now i have to add some more css file. I often get stuck to define the ID & Class name which is already defined in another css file and it causes problem during testing. I am really tired of keep changing the id & class name. can some one give me any tips to sort it out.

@Edit : suppose there are two css files in a web app old_1.css & old_2.css

old_1.css  #id_1 {width:100%;height:100%; ....  }
          #id_2 { width:50%; height:50%; .... }  

old_2.css   #id_3 {width:70%;height:70%; ....  }
          #id_4 { width:30%; height:30%; .... }

Now i am creating a new css file new_1.css and by mistake i wrote the simmilar id of old css file. this is where i get stuck and i want to avoid to rewrite the same ID. 

new_1.css  #id_1 {width:80%;height:80%; ....  } // this id is already declared in old css file

Upvotes: 1

Views: 118

Answers (2)

Gaurav Gupta
Gaurav Gupta

Reputation: 5416

If refactoring the old CSS files are beyond the current scope of your work, you can simply override the old styles by making your selectors more specific. A good tutorial on CSS specificity is given here

Upvotes: 1

Curtis
Curtis

Reputation: 103358

Rather than ensuring each CSS class name is unique, ensure that the CSS styles cannot clash by including parent elements in your CSS. This is better for structure:

HTML:

<div class="section1">
    <div class="inner_div">

    </div>
</div>
<div class="section2">
    <div class="inner_div">

    </div>
</div>

CSS:

.section1 {

}
    .section1 .inner_div {
         color:red;
    }

.section2 {

}
    .section2 .inner_div {
         color:blue;
    }

This will ensure that only div's with inner_div class will be given the style color:red where they are contained in a div with the class section1. Likewise, only div's with inner_div will be styled color:blue where they are contained in a div with the class section2.

Using this format should prevent you from ever having duplicate class names as you can define as far as you like, for example if I was applying a style to a span tag displaying the date for a news article I'd use:

.main_container .news .article .details span.date {}

This is a lot easier to read, and a lot less likely to be duplicated than:

.news_article_date {}

Otherwise, like @Ant has stated, use a good HTML editor software and do a Find on the classes and IDs used.

Upvotes: 1

Related Questions