Почему CSS Frameworks использует! Важные теги без необходимости?

Question

Это больше спор, чем вопрос, но я чувствую, что в Интернете не так много всего, что освещает эту тему.

Например, Foundation содержит сотни важных тегов для вещей, которые на мой взгляд не нужны:

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

Существует множество css, которые схожи с этим, что, на мой взгляд, является плохой практикой, и я хотел бы ответить на вопрос, почему фреймворки css вообще их используют? Bootstrap и Foundation являются двумя основными CSS-фреймворками, которые оба используют их.

Мне всегда говорили, что использование важных тегов в css - очень плохая практика и должно использоваться только для IE.

Answer 1

Если вы пишете свой собственный CSS, у вас есть свобода добавлять более конкретные правила, когда это необходимо:

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

Тем не менее, CSS-фреймворк не может предсказать, как вы расположите ваш HTML. Так проще сделать !important вместо создания тысяч комбинаций более конкретных правил. Пример:

.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; }

Answer 2

Это потому, что вы можете иметь в своем коде ст. как это:

<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/

В этом случае без отступления текст будет выровнен вправо. Что важно, второй абзац будет по центру.

Класс имеет низкий приоритет по отношению к идентификатору и т. Д.

Answer 3

С помощью !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 верно, если только он не обернут другим классом, который может переопределить .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; } класс, упомянутый в вопросе, является здесь не чем иным, как полезностью

Узнайте больше о! Важном приоритете здесь.