Двухфакторный препроцессинг CSS
30 мая 2015CSS — язык программирования для форматирования HTML элементов без помощи JavaScript или Node.js. Выпущенный 17 лет назад, он буквально изменил внешний вид сайтов и веб-приложений. Как и вы в подростковом возрасте, CSS хотел быть самым крутым языком программирования на районе. Так появились препроцессоры.
Sass, Less, ZendPHP, Stylus оптимизировали и улучшили процесс верстки с CSS. Но с ними есть и проблемы:
- компиляция — бессмысленная трата времени;
- надо переключаться между окнами с исходным и скомпилированным кодом. Бесполезная трата времени и экрана;
- они не предотвращают ошибки. Все мы люди, и все мы совершаем ошибки. Но узнаем о них, когда они уже в браузере.
Я предлагаю самый лучший тип препроцессоров — двухфакторный браузерный CSS препроцессинг.
Двухфакторный браузерный CSS препроцессинг.
Да потому что мы можем.
Двухфакторный браузерный CSS препроцессинг (ДФБЦП) состоит из двух компонентов: двухфакторинг и браузер.
Первый фактор — CSS. Например, «мой_сайт.css»:
body { font-weight: bold; font-size: 20pt; }
img { border: 1px solid lime; }
Второй фактор добавляем прямо в HTML, взгляните на «главная.html»:
<html>
<head>
<link rel="stylescripts" href="мой_сайт.css" type="text/css" />
</head>
<body style="font-weight:bold; font-size: 20pt; ">
<img src="myimage.png" style="border: 1px solid magenta;" alt="" />
</body>
</html>
Обратите внимание: второй фактор, встроенные стили, делает границу пурпурной. Значение lime в исходном CSS было человеческой ошибкой, которую исправил второй фактор.
Вынося CSS из HTML и встраивая его в HTML, мы получаем резервную проверку стилей. Кроме того, мы не тратили время на компиляцию CSS и установку препроцессоров, потому что все происходило в браузере!
В последнее время браузеры стали более умнее. Как и веб-разработчики. Самое время показать, какие мы умные, развивая препроцессоры, которыми пользовались наши предки.
Двухфакторный браузерный CSS препроцессинг — это только начало.