Я люблю каскад!
Многие разработчики, особенно те, кто изучал JavaScript в первую очередь, ненавидят каскад .
Каскадом , если вы с ним не знакомы, является C в CSS (каскадные таблицы стилей). В CSS стили по умолчанию устанавливаются на window и каскадно переходят к дочерним элементам.
/**
* Это будет применяться ко всем кнопкам во всем пользовательском интерфейсе
*/
button {
background-color: rebeccapurple;
color: white;
font-weight: bold;
}
Для разработчиков JavaScript, которые привыкли иметь возможность тесно связывать переменные, функции и т. Д. С компонентом, это похоже на ошибку.
Но на самом деле каскад это особенность.
Каскад позволяет мне сохранять свои таблицы стилей маленькими, компактными и производительными. Это означает, что мне не нужно переопределять стили для одного и того же элемента снова и снова для каждого компонента, в который я его включаю.
Представьте, что вам нужно переписать те же стили для кнопок, используемых для отправки вашей контактной формы, для подписки на новостную рассылку и для кнопок с призывом к действию.
/**
* Стили кнопок для контактной формы
*/
.contact button {
background-color: rebeccapurple;
color: white;
font-weight: bold;
}
/**
* Стили кнопок для формы рассылки
*/
.newsletter button {
background-color: rebeccapurple;
color: white;
font-weight: bold;
}
/**
* Стили кнопок для призывов к действию
*/
button.call-to-action {
background-color: rebeccapurple;
color: white;
font-weight: bold;
}
И да, вы могли бы объединить их так.
.contact button,
.newsletter button,
button.call-to-action {
background-color: rebeccapurple;
color: white;
font-weight: bold;
}
Но разве это не абсурд, когда вы можете просто стилизовать один раз кнопку и продолжить свою жизнь?
button {
background-color: rebeccapurple;
color: white;
font-weight: bold;
}
И все эти разговоры о том, как ломается CSS, но JavaScript имеет гораздо больше смысла, игнорируя гору хаков, которые существуют и в JavaScript.
JS также является глобальным по умолчанию. Мы используем IIFEs и функции-оболочки, чтобы добавить область видимл.
// Это глобальная переменная
var myName = 'Chris';
// Оборачиваем его в функцию
(function () {
var myName = 'Chris';
})();
И несмотря на все эти разговоры о том, что CSS является глобальным, вы можете создавать стили, когда вам это необходимо. Это более или менее так же, как вы делаете это в JavaScript.
Допустим, вы использовали глобальный стиль кнопок, но хотели переопределить определенные кнопки, чтобы иметь другой цвет фона. Возможно синий вместо фиолетового.
Ты можешь это сделать.
/**
* Это будет применяться ко всем кнопкам во всем пользовательском интерфейсе
*/
button {
background-color: rebeccapurple;
color: white;
font-weight: bold;
}
/**
* Это переопределяет стили кнопок по умолчанию для компонентов .callout
*/
.callout button {
background-color: blue;
}Вместо того, чтобы переписывать все стили для какого-либо конкретного компонента, вы настраиваете только те стили, которые вам нужны.
Каскад прекрасная вещь!
