Это плохо использовать! Важный в CSS свойство

Question

Не знаю много о css и просто о Java/J2EE разработчике, но кое-как получил удар в какой-то css головоломке, которую я не могу решить

Я использовал форму с некоторым эффектом светового короба Jquery, которая имеет div с id и class

<div id="contact-container"
     class="myclass"
     style="z-index: 1002; height: 386px; width: 450px; position: fixed; left: 406.5px; top: 15%; ">

в моем файле css я увидел следующую запись

#contact-container {
    font: 16px/22px 'Trebuchet MS', Verdana, Arial;
    text-align:left;
    width:450px;
}

но когда эта форма отображалась во всплывающем окне jquery, она правильно отображалась в Mozilla, но в Google Chrome и IE окно отображалось неправильно, как только его часть, и оставалось в виде полосы прокрутки.

когда я увидел его через firebug (используется впервые :)), он показал мне что-то вроде

<div id="contact-container"
     class="myclass" 
     style="position: fixed; z-index: 1002; height: 67px; width: 450px; left: 406.5px; top: 15%;">

и для тех же настроек он не работал должным образом для IE и Mozilla, поэтому после многих Goggling я сделал следующие изменения в css

#contact-container {
    font: 16px/22px 'Trebuchet MS', Verdana, Arial;
    text-align:left;
    width:450px;
    height:380px !important;
}

я установил высоту на height:380px !important;

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

Пожалуйста, предложите, если я принял неправильный подход

Answer 1

!important - полезный инструмент, но недостатком является то, что это инструмент последней инстанции. Таким образом, вы не хотите чрезмерно использовать его, так как в конечном итоге вы будете страдать от головной боли у тех, кто поддерживает сайт.

Тем не менее, ваш пример является типичным использованием. Происходит то, что JS внедряет атрибуты встроенного стиля на лету. Таким образом, это перекрывает каскад в вашем CSS. !important позволяет переопределить это.

Answer 2

!important является допустимым синтаксисом CSS , и в его использовании нет ничего плохого - при условии, что вы понимаете, что он делает, и почему он решает вашу проблему, чтобы вы использовали его правильно.

CSS означает Каскадные Таблицы стилей.Вы можете загрузить несколько стилей, которые накладываются друг на друга для одних и тех же селекторов, как с одним файлом CSS, так и между несколькими файлами CSS.Более поздние правила в файле CSS имеют приоритет над более ранними, а правила в более позднем файле CSS имеют приоритет над правилами в более ранних файлах.Это каскад.

Вы можете думать о !important как о перемещении определенного правила в специальный слой, который расположен над остальными - все еще зависит от каскада, но оно будет переопределено только последующими правилами, которыетакже отмечен !important.Это позволяет вам размещать правила, которые вы хотите иметь приоритет ранее в каскаде, где это логично.Самый очевидный пример - убедиться, что правило в жестко запрограммированной таблице стилей по-прежнему будет иметь приоритет над правилом, которое динамически вставляется JavaScript при загрузке ... и это именно то, что вы здесь делаете.Надлежащее использование.

Конечно, может быть и другой способ решения вашей проблемы, например, использование более специфического селектора для целевого атрибута.Однако существуют случаи, когда изменение доступных селекторов недостаточно конкретно для этого, а изменение HTML-кода, генерируемого для добавления дополнительных селекторов, может быть чрезмерным (например, это разметка, динамически генерируемая системой управления контентом, которая не позволяетлегкая настройка этой части HTML).В таких случаях использование !important может быть гораздо более целесообразным, прагматичным, и в этом случае будет намного проще поддерживать , чем альтернатива.

Answer 3

На мой взгляд, это ОПРЕДЕЛЕННО плохая практика.

Поддержка сайта, на котором разбросано !important, - это кошмар. Если вы чувствуете, что вам нужно использовать !important, это говорит мне о том, что вам нужно освежить свою специфику CSS .

Они называются каскадными по причине:)

Answer 4

Используйте! Важно для разработки, чтобы быстро выявить проблему в каскаде, но затем устранить проблему. Лучше всего использовать наименьшее количество специфичность в правилах CSS, чтобы заставить что-то работать. Во что бы то ни стало, удалите! Важные проблемы правил перед началом производства.

Answer 5

Если вы используете! Важный, он имеет наивысший приоритет для элемента. Но будьте осторожны, если вы дважды используете одну и ту же функцию (например, background-color или color) для одного и того же элемента, тогда последняя будет самой высокой. Будьте внимательны, чтобы использовать дважды! Важный (значит, не делайте этого):

 <div id="contact-container" class="myclass" style="z-index: 1002; height: 386px; width: 450px; position: fixed; left: 406.5px; top: 15%; ">


#contact-container {width:450px !important;}
.myclass {width:500px !important;}

---

В этом случае ваше решение идеально и абсолютно достаточно.