Почему избегать CSS-каскада — это проблема?
Перевод статьи Why is not using the CSS cascade a problem? с сайта www.quirksmode.org для css-live.ru, автор — Питер Пол Кох
Когда я объявил, что собираюсь написать кое-что для JavaScript-разработчиков, не понимающих CSS, многие (включая Джереми) говорили, что крайне необходимой будет глава о каскаде и наследовании, поскольку слишком многие JS-разработчики, кажется, их не понимают.
Сначала я было согласился, но потом во мне завелись сомнения, из-за которых я и пишу эту заметку.
Насколько я могу видеть, проблема не в том, что JavaScript-разработчики не понимают каскада, а в том, что они не желают его использовать. Но проблема ли это?
Глобальная область видимости
В CSS есть только глобальная область видимости. Правило button.primary влияет на все кнопки с таким классом на целой странице. В этом сила каскада. В недавнем проекте мы с дизайнером потратили полчаса, определяя классы главных, второстепенных и третьестепенных кнопок/ссылок. И потратили не зря: с тех пор каждый из нас может просто вставить кнопку в код — и у нее сразу будет нужный стиль. Но JavaScript-разработчики приучены не доверять глобальной области и недолюбливать ее. Если в JavaScript это хорошо и правильно, как гласит теория, то в CSS смысла в этом гораздо меньше, ведь сила CSS — именно в глобальной области, порождаемой каскадом. Из-за этого джаваскриптеры не любят CSS: взять, например, статью «Плохие стороны CSS», которая начинается как раз с жалоб на глобальную область.
Но неужели джаваскриптеры не видят преимуществ CSS-каскада? Неужели они не замечают важной части того, что делает CSS столь мощным?
Локальная область видимости
Что ж, и да, и нет. Возвращаясь к моему примеру с кнопкой, он идеально уместен на относительно простом сайте, вроде того, что мы делали. Но уже не так уместен, когда надо добавить не одну кнопку, а целый компонент, который может включать в себя кнопку, но стили этой кнопки должны соответствовать стилям самого компонента. В таком случае вы захотите обеспечить, чтобы общие стили не влияли на кнопку этого компонента. То есть чтобы область видимости вашего CSS была локальной.
Ничего удивительного в этом нет, и не сомневаюсь, что мои читатели догадались об этом сами и пришли к замечательному решению использовать и глобальные, и локальные стили, с учетом специфики конкретного проекта. Как сказала Чарли Оуэн:
Я слыхала, как люди выдумывают, будто ограниченная видимость и каскад несовместимы. Но использовать каскад (для меня) значит пользоваться преимуществами глобальных сторон CSS. Задайте дефолтные отступы для блоков, типографику и т.п. на верхнем уровне. Затем каждый компонент может добавить что-то своё.
Пока всё в порядке. Это, насколько я вижу, и есть правильное решение проблемы.
Так в чем же проблема-то?
Ну а что же насчет жалоб, что джаваскриптеры, мол, не понимают каскада? Я думаю, они прекрасно его понимают, просто решили не использовать.
Так что я не знаю, проблема ли это на самом деле. Но всё же решил написать эту заметку и спросить, поскольку мог пропустить что-нибудь.
Итак, в чем же проблема с JavaScript-разработчиками и каскадом помимо того, что они не замечают некоторых полезных применений глобальным стилям, из-за чего в итоге пытаются делать всё локальным? Может, кто-нибудь объяснит?
Спасибо.
P.S. Это тоже может быть интересно: