DevGang
Авторизоваться

Я люблю каскад! 

Многие разработчики, особенно те, кто изучал 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;
}

Вместо того, чтобы переписывать все стили для какого-либо конкретного компонента, вы настраиваете только те стили, которые вам нужны.

Каскад прекрасная вещь!

#CSS
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

Поделитесь своим опытом, расскажите о новом инструменте, библиотеке или фреймворке. Для этого не обязательно становится постоянным автором.

Попробовать

Оплатив хостинг 25$ в подарок вы получите 100$ на счет

Получить