Мой ванильный CSS

Вадим Макеев

Мой ванильный CSS

Ваниль

История

Синтаксис

			@include mq($from:lap, $until:desk) {
				@include layout($layout:6) {
					&__logo {
						@include span(2 at 1);
						}
					&__menu {
						@include span(4 at 3);
		

Синтаксис

			.ui-Link
			  &-Content
			    @supports (background-position: 0 calc(50% + 0.75em))
			      ^[0][href] &
			        background-image: linear-gradient($Colors.Link…)
			      ^[0][href]:hover &
			        background-image: linear-gradient($Colors.Link…)
		
Ошибка

You Might Not Need
a CSS Preprocessor

Уже есть!

cssnext
PostCSS

PostCSS

			.icon {
				background: svg-load(
					'arrow-up.svg',
					fill: #000,
					stroke: #fff);
				}
		

Плагин postcss-inline-svg

Это не CSS

С умом

Переменные

			:root {
				--shower-ratio: 1.6;
				--shower-width: 1024px;
				--shower-height: calc(
					var(--shower-width) /
					var(--shower-ratio));
				}
		

Шлюзы

			@media (min-width: 320px) {
			    .page__body {
			        font-size: calc(
			            1rem + ((2 - 1) * 16)
			            * (100vw - 320px) / (848 - 320));
			        }
			    }
		

Модульность

			/* Modules */
			@import 'styles/fonts.css';
			@import 'styles/page.css';
			@import 'styles/title.css';
			@import 'styles/banner.css';
			@import 'styles/form.css';
			@import 'styles/footer.css';
		
Сжато

Улучшать

CSS

			return gulp.src('screen.css')
				.pipe(postcss([
					require('postcss-import')(),
					require('postcss-url')(),
					require('autoprefixer')(),
					require('postcss-csso')()
				]))
		

HTML

			return gulp.src('index.html')
				.pipe(posthtml([
					require('posthtml-collect-styles')(),
					require('posthtml-minifier')({
						collapseWhitespace: true
					})
				]))
		

Примеры

PWA Rocks
pitercss_conf

Ещё? Ещё!

sokr.me/vss

@pepelsbey

Логотип Шовера

Shower

Вопросы?