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

Вадим Макеев, HTML Академия

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

Ноги в шерстяных носках и кружка у камина
© Alex Master
Лого HTML Академии
Ведущие подкаста «Веб-стандарты»
Сайт pitercss_conf

История

Вергилий

Ruby и Sass

@mixin parent
  @if &
    &:hover
      color: red
  @else
    a
      color: red

class parent
  def set_foo(n)
    @foo = n
  end
  def set_bar(n)
    @bar = n
  end
Dev.Opera на десктопе Dev.Opera на планшете Dev.Opera на телефоне

Синтаксис

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

Синтаксис

			.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…)

CoffeeScript

			isEqual: (other) ->
			  if @scopes.length isnt other.scopes.length
			    return false
			  for scope, i in @scopes
			    if scope isnt other.scopes[i]
			      return false
			  true
Лого CoffeeScript
Ошибка

You might not need
a CSS preprocessor

(да)

Уже всё есть!

(нет)

Лого PostCSS
Лого cssnext

Мечталки

			a { 
			    --red: #d33;
			    &:hover {
			        color: color(var(--red) a(54%));
			        }
			    }

Черновик CSS Color L4 и салфетка CSS Nesting.

Упрощалки

			@svg-load nav url(img/nav.svg) {
			    fill: #cfc;
			    }
			.nav {
			    background: svg-inline(nav);
			    }

Плагин postcss-inline-svg.

Ленивки

			.foo {
			    position: absolute 10px 0;
			    }
			.foo {
			    position: absolute;
			    top: 10px; right: 0; bottom: 10px; left: 0;
			    }

Сладости

			a
			    color: blue
			.multiline,
			.selector
			    box-shadow:
			        1px 0 9px rgba(0, 0, 0, .4)
			        1px 0 3px rgba(0, 0, 0, .6)
Лого SugarSS
Лого SugarSS Лого SugarSS Лого SugarSS
Экран ошибки Windows
© Microsoft

Это не CSS

Это — FSS

Fantasy Style Sheets

С умом?

With?

			with (element.style) {
			    position = 'relative';
			    top = left = '5px';
			}
			// element.style.position
			// element.style.top

Пожалуйста, не надо.

Переменные

			: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));
			        }
			    }

Улучшать

Логотип Grunt Логотип Gulp Логотип Gulp
Ошибка
Разобранный велосипед
© Joshua
Собранный велосипед
© Joshua

index.html

			<!DOCTYPE html>
			<head>
			    <link href="/screen.css" rel="stylesheet">
			</head>
			<header block="header">
			    <h1 elem="logo" mod="index">
			        <span elem="type">Dev.Opera</span>

index.html

			<!DOCTYPE html>
			<head>
			    <link href="screen.css" rel="stylesheet">
			</head>
			<header class="header">
			    <h1 class="header__logo header__logo--index">
			        <span class="type">HTML Academy</span>

style.css

			@import 'styles/fonts.css';
			@import 'styles/page.css';
			@import 'styles/title.css';
			@import 'styles/banner.css';
			@import 'styles/content.css';
			@import 'styles/form.css';
			@import 'styles/footer.css';
Луддиты ломают станок
Несжатый код

HTML

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

И другие полезные плагины для PostHTML.

CSS

			return gulp.src('screen.css')
				.pipe(postcss([
					require('postcss-import')(),
					require('postcss-url')(), // Правит пути
					require('autoprefixer')(),
					require('postcss-csso')()
				]))
© The Walt Disney Company

Караван идёт

Караван верблюдов идёт по пустыне
Ти Джей Головайчук Ти Джей в 2010: Stylus Ти Джей в 2013: Rework Ти Джей в 2017: CSS

Ещё? Ещё!

sokr.me/vss

@pepelsbey

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

Shower

Вопросы?