Плохо использовать! Важно для свойства css

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

i использовал форму с некоторым эффектом световой коробки 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;
}

i зафиксировал высоту на height:380px !important;

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

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

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

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

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

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

Ответ 3

По-моему, это ОПРЕДЕЛЕННО плохая практика.

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

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

Ответ 4

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

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

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

Ответ 5

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