How to get rid of !important tags?


Tags: html,css,css3,drupal,drupal-7

Problem :

This is crazy. I set default rules for example for

#page a {
  color: #000;
}

And then if I have a new link somewhere deep in the divs inside that #page (which is main wrapper for entire site) which needs different styling and color, it only works with !important. And just like that now almost every new styling rule goes with !important to make it work, colors, font-families, font size and etc.

I use one .css file, how do I get rid of !important tags? All my CSS file is in red from all those !importants. I am asking this because I read somewhere that !important is bad and should be avoided, so how do I do that?



Solution :

  1. remove the initial !important
  2. assign a class to like properties so that all h1, h2, ...p, em, a, etc have their individual color
  3. if you have two h1 or p or a that need separate styles, use a class or use targeting for example

    <p class="text1"> A text </p>  
    <div class="txtgroup">
       <p> Another text </p>
    </div>
    

you can style these as follows:

.text1 {color: #fff}
.txtgroup p{color:#cdcdcd}
  1. And finally, leave your main css framework untouched. Create a custom.css, add your style modification there and declare it directly under the css that is being overwritten

Good Luck


    CSS Howto..

    How do you add a footer with css display: table?

    How to change buttons to pictures in jquery dialog

    How to make text appear at the top left corner?

    how to invoke css file in jquery

    How do I make the whole area of a list item in my navigation bar, clickable as a link?

    How do I fix this alignment issue in jQuery & CSS?

    How to fill remaining height and width?

    How can I make a display:flex container expand horizontally with its wrapped contents?

    CSS Tooltip has different position in different browsers. How can I account for this?

    How to prevent anchor tag from following the link on click, but make it show the submenu?

    How to deselect using :not according to css property and value

    How to properly wait for browser reflow/repaint to finish

    How to apply CSS rotate transition around glyph's vertical middle or centerpoint

    how to trigger a css animation after certain pixels of scroll

    How to make a scroll customization for mobile application?

    how to position several div tags over each other

    How does Apple position its slideshow inside a fixed-position box?

    How to place an image between horizontal list items

    Displaying XML using CSS: How to handle  ?

    How to select other (sibling) elements CSS?

    How to turn off carousel when resized?

    How do I use pseudo-selectors to change a “Home” button to an icon using just CSS?

    How can i unify 2 images with drag and drop?

    How can I animate the drawing of text on a web page?

    Jquery canvas cloud plugin - How to style canvas elements with CSS

    How to include css in my JSP?

    How to create a code block on website

    How can I style a list of name-value pairs to appear like an HTML table?

    CSS media type: How to load CSS for mobile?

    How many screen sizes should be handled typically for a responsive website? [closed]