Атрибут стиля против идентификатора настройки и внешнего Css

Question

Я понимаю концепцию хранения всех элементов представления вне разметки и помещения их во внешний файл .css.

Я хочу понять, в каких ситуациях вы бы оправдывали использование атрибута style против идентификаторов настроек и внешних Css.

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

Answer 1

Я использую внешние таблицы стилей и причины приведены ниже:

1. Ремонтопригодность - намного проще, когда все мои материалы в одном файле.
2. Хранение кода СУХОЙ - да, это снова. Раньше я даже использовал атрибут style, чтобы установить отображение «block» или «none» взаимозаменяемо. Теперь я просто использую класс «hide» и использую этот класс, если что-то нужно скрыть, и удаляю его, если нужно что-то показать. В наши дни полноценных приложений Ajax я держу свой код свободным от повторения подобных вещей, и он намного более чистый.
3. Помогает, когда вы работаете в большом проекте - на моем последнем рабочем месте у нас был набор приложений, которые имели одинаковый внешний вид. Помещение всего этого во внешнюю таблицу стилей, включая стили, которые будут вызываться после определенного события, помогло команде применить согласованный дизайн пользовательского интерфейса к приложениям.

Я пытался придумать причины использования атрибутов стиля, но, честно говоря, могу сказать, что я использую его, только когда мне лень открывать таблицу стилей, чтобы что-то быстро изменить (не слишком горжусь этой частью, поэтому я стараюсь свести к минимуму она)

Answer 2

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

Хороший пример последнего - чередование зебр в jQuery до широкой поддержки CSS 3 селекторов :

$(document).ready = function() {
    $("table tr:nth-child(even)").addClass("striped");
});

Сегодня вы можете сделать это в статическом CSS, но когда-то лучше всего было использовать Javascript.

Answer 3

Одним из больших преимуществ переноса всех ваших стилей в таблицу стилей является удобство сопровождения. Поиск встроенных стилей может быть огромной болью для других людей, пытающихся поддерживать ваш код.

Только по этой причине стоит присвоить конкретному элементу идентификатор и определить его стили в таблице стилей.

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

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

Единственное реальное время, которое я считаю уместным использовать встроенные стили, - для очень переходных свойств, таких как анимация с использованием javascript или скрытие и отображение элемента (хотя это может быть сделано и с классами).