Geek Answers Handbook

Why CSS Frames Use! Important tags unnecessarily?

This is more of a discussion than a question, but I feel that little is devoted to this topic on the Internet.

For example, the foundation includes hundreds of important tags for things that they don’t need in my eyes:

.text-center { text-align: center !important; }

There are a lot of css that are simulated for this, which in my opinion is bad practice, and the question I would like to answer is why css frameworks use them at all? Bootstrap and Foundation are the two main CSS frameworks that use them.

I've always been told that using important tags in css is a very bad practice and should be used only for IE.

+4
source share
3 answers

If you write your own CSS, you have the freedom to add more specific rules as needed:

.center        { text-align: center; }
.foobar        { text-align: left; }
.foobar.center { text-align: center; }

However, the CSS structure cannot predict how you will arrange your HTML. So it's easier to do, !importantinstead of generating thousands of combinations of more specific rules. Example:

.center               { text-align: center; }
.foobar               { text-align: left; }
.barbaz               { text-align: right; }
 /*
  * assuming .center must be centered regardless of other rules and
  * !important must be avoided at the same time, we need to do this
  */
.foobar.center        { text-align: center; }
.barbaz.center        { text-align: center; }
.foobar.barbaz.center { text-align: center; }
+3
source

This is because you can have st in your code. eg:

<style>
#aside p {text-align: right;}
.text-center {text-align: center} /* without important text will be aligned to right */
</style>

<div id="aside">
    <p>right-aligned text</p>
    <p class="text-center">centered text</p>
</div>

http://jsfiddle.net/v1v4jaas/

In this case, the text without alignment is aligned to the right. With important, the second paragraph will be focused.

The class has only low priority against id, etc.

+1
source

!important CSS , , , .

!important . , , .

!important .

. , , .

 .btn {
       margin-bottom: 0;  
       text-align: center;
       vertical-align: middle;
       touch-action: manipulation;
       cursor: pointer;  
       border: 1px solid transparent;
       padding: 6px 12px;
       font-size: 11px;
       border-radius: 4px;  
    }

.btn true, - , .btn, , , . , , .

<p class="format-paragraph">
   <button type="submit" name="save" class="btn"> Submit</button> 
</p>

, .btn , , .btn :

.btn {
           margin-bottom: 0              !important;  
           text-align: center            !important;
           vertical-align: middle        !important;
           touch-action: manipulation    !important;
           cursor: pointer               !important;  
           border: 1px solid transparent !important;
           padding: 6px 12px             !important;
           font-size: 11px               !important;
           border-radius: 4px            !important;  
        }

, .

.text-center { text-align: center !important; }, , - , .

0
source

More articles:


All Articles