CSS — язык программирования

CSS 🆚 JS

2009

CSS + HTML = ❤️

CSS + HTML = 💰

2019

«Я программист,
CSS пусть верстальщики пишут»
(c) Кто-то в Интернете

Критерии Тьюринг-полноты

• Фиксированное описание ✅
• Всегда достаточный объём доступной памяти ✅
• Неограниченность времени выполнения ✅
• Возможность функциональной композиции ✅
• Возможность каким-то образом подавать сигнал о результатах выполнения ✅
• Поддержка входных и выходных данных (I/O) ✅
• Наличие циклов while с прерыванием или эквивалентных им конструкций ❌

CSS — Тьюринг-полный ❌

Правило 1️⃣1️⃣0️⃣

Rule 110
in CSS/HTML/Human

input:not(:checked) + input:checked + input:checked
+ * + * + * + * + * + * + * + * + * + * + *
+ * + * + * + * + * + * + * + * + * + * + * {
    --cell-bg-color: hotpink;
    --cell-num-color: white;
    --cell-content: "X";
    --cell-cursor: pointer;
}

HTML + CSS —
Тьюринг-полный ✅

CSS — язык программирования ✅

Спасибо за внимание!

Что с этим делать?

Программирование
⬇️
CSS

Мы — программисты прямоугольников! 💪

border-style: SOLID

Плохо ❌

.promo {
    display: block;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #09f;
    color: #fff;
    text-shadow: 0 0 1px rgba(0,0,0,0.25);
    border-radius: 4px;
}

Хорошо ✅

.island {
    display: block;
    padding: 20px;
    margin-bottom: 20px;
}

.promo {
    background-color: #09f;
    color: #fff;
    text-shadow: 0 0 1px rgba(0,0,0,0.25);
    border-radius: 4px;
}

<figure class="app-column-item app-card">
    <h3 class="talkname">...</h3>
    <h4>Сергій Бабіч<br><small>Львів</small></h4>
    <img class="app-card-img" src="babich.jpg"Сергій Бабіч">
    <figcaption class="app-card-caption">
        <p class="description">...</p>
        <p>...</p>
    </figcaption>
</figure>

TDD

• Создание теста — макет дизайнера
• Написание кода под этот тест — вёрстка
• Рефакторинг кода — Pixel Perfect

Скорость разработки 😃

Технический долг 💩

Hermione

npm install -g hermione

// .hermione.conf.js
module.exports = {
    sets: {
        desktop: {
            files: 'tests/desktop'
        }
    },
    browsers: {
        chrome: {
            desiredCapabilities: {
                browserName: 'chrome'
            }
        }
    }
};

// tests/desktop/lvivcss.test.js
const assert = require('chai').assert;

describe('lvivcss', function() {
    it('should be ok', function() {
        return this.browser
            .url('https://lvivcss.org')
            .getText('h1.logo')
            .then(function(title) {
                assert.equal(title, `LvivCSS'19`)
            })
            .setWindowSize(1440, 540)
            .assertView('plain', 'body')
            .setWindowSize(1440, 520)
            .assertView('boom', 'body');
    });
});

1440x540

1440x520

@mixin block($w, $h, $d, $x, $y, $z, $color, $angle: '0, 0, 0, 0') {
    transform: translate3d($x, $y, $z) rotate3d(#{$angle});
    will-change: transform;

    .front { @include front($w, $h, $d, $color); }
    .back { @include back($w, $h, $d, $color); }
    .right { @include right($w, $h, $d, darken($color, 10%)); }
    .left { @include left($w, $h, $d, darken($color, 10%)); }
    .top { @include top($w, $h, $d, darken($color, 5%)); }
    .bottom { @include bottom($w, $h, $d, darken($color, 5%)); }
}

:root {
    --r: 255;
    --g: 20;
    --b: 147;
    --primary-color: rgb(var(--r), var(--g), var(--b));
}

.my-element {
    --e-width: 200px;
    --e-border-width: 20px;
    background-color: var(--primary-color);
    width: calc(var(--e-width) + var(--e-border-width));
}

<div class="one two">I have 40px margin</div>

:root {
    --root-offset: 20px;
}
.one {
    --offset: 40px;
}
.two {
    margin: var(--offset, var(--root-offset, 30px));
}

<div class="two">I have 20px margin</div>

:root {
    --root-offset: 20px;
}
.one {
    --offset: 40px;
}
.two {
    margin: var(--offset, var(--root-offset, 30px));
}

Логическое И

.animal {
    --has-mustache: 1;
    --has-paws: 1;
    --has-tail: 1;

    --has-documents: calc(
        var(--has-mustache, 0) *
        var(--has-paws, 0) *
        var(--has-tail, 0)
    );
}

Логическое НЕ

.language {
    --undefined-is-not-a-function: 1;

    --is-js: var(--undefined-is-not-a-function, 0);
    --is-css: calc(
        1 - var(--is-js)
    );
}

Логическое ИЛИ

.human {
    --can-frontend: 1;
    --can-backend: 0;

    --is-developer: calc(
        var(--can-frontend) * var(--can-backend) +
        var(--can-frontend) * (1 - var(--can-backend)) +
        (1 - var(--can-frontend)) * var(--can-backend)
    );
}

Метод Квайна

⬇️

Логическое ИЛИ

.human {
    --can-frontend: 1;
    --can-backend: 0;

    --is-developer: calc(
        var(--can-frontend) +
        (1 - var(--can-frontend)) * var(--can-backend)
    );
}

Логическое ИЛИ с хаком

.human {
    --can-frontend: 1;
    --can-backend: 0;

    --is-developer: clamp(
        0,
        calc(var(--can-frontend) + var(--can-backend)),
        1
    );
}

clamp()

width: clamp(10px, 4em, 80px);
width: max(10px, min(4em, 80px));

max()

Логическое ИЛИ через И и НЕ

.human {
    --can-frontend: 1;
    --can-backend: 0;

    /* not (A or B) = (not A) and (not B) */
    --is-developer: calc(1 -
        (1 - var(--can-frontend)) * (1 - var(--can-backend))
    );
}

Rule 110 for CSS+HTML

😎

Хороший алгоритм решения проблемы

1. воспроизвести проблему;
2. локализовать ошибку;
3. исправить ошибку;
4. протестировать;
5. избежать повторения в будущем;
6. отдать тестировщику.

Как хорошо вы знаете CSS? 👨🏼‍🏫

Даны следующие классы:

.red { color: red; }
.blue { color: blue; }

Какого цвета должны быть эти дивы?

<div class="red blue">
<div class="blue red">

CSS — не враг

Но его нужно изучать

<b style="background: #0B2429;
          color: #F3AC3C;
          zoom: 200;
          left: -5.59px;
          top: -8.3px;
          position: absolute">k

CSS на GPU ⚡️

A search engine in CSS
demo

#input[value='l'i] ~ #results #result55,
#input[value='la'i] ~ #results #result55,
#input[value='lau'i] ~ #results #result55,
#input[value='laur'i] ~ #results #result55,
#input[value='laura'i] ~ #results #result55 {
    display: block;
}

#option[id]:checked ~ #results #result12,
#option[id]:checked ~ #results #result55 {
    display: block;
}

body {
    font-family: sans-serif;
}
h1, p {
    font-family: "no-parens", sans-serif;
}

/* https://github.com/adobe-fonts/adobe-blank */
@font-face {
    font-family: no-parens;
    src: url("...");
    unicode-range: U+0028, U+0029; /* () */
}

Houdini 🔮

CSS.registerComputedValueHook({
    inputProperties: ["transform", "--slide-*"],
    outputProperties: ["transform"],
    computedValue: function(input, output) {
        const tx = input.get("--slide-x");
        const ty = input.get("--slide-y");
        const translate = new CSSTranslate(tx, ty);
        output.set("transform",
            new CSSTransformValue(
                translate,
                ...input.get('transform')
            )
        );
    }
});

CSS.registerFunction({
    "name": "--darken",
    "inputArguments": ["<color>", "<percentage>"],
}, (color, percent) => {
    const newColor = color.toHSL();
    newColor.lightness *= (1 - percent.value/100);
    return newColor;
});

.element {
    color: --darken(tomato, 12%);
}

CSS.registerFunction(
    {
        "name": "--random",
        "per": "element",
    },
    () => CSS.number(Math.random())
);

JS-in-CSS 👀

@keyframes changeOrder {
    from { z-index: 6; }
    to { z-index: 1; }
}

label {
    animation: changeOrder 3s infinite linear;
}

label:nth-of-type(1) { animation-delay: -0.0s; }
label:nth-of-type(2) { animation-delay: -0.5s; }
label:nth-of-type(3) { animation-delay: -1.0s; } 

CSS Properties and Values
API

:root {
    --sidebar-width: 400px;
}

.closed {
    --sidebar-width: 80px;
}

body {
    transition: --sidebar-width 1s;
}

// JavaScript
CSS.registerProperty({
    name: '--sidebar-width',
    syntax: '<length>',
    inherits: true,
    initialValue: '80px'
});

/* CSS */
@property --sidebar-width {
    syntax: "<length>";
    inherits: true;
    initialValue: 80px;
}

Möbius bars
with Houdini magic

Псевдоэлементы

• ::after (:after)
• ::before (:before)
• ::first-letter (:first-letter)
• ::first-line (:first-line)
• ::selection
• ::cue (:cue)
• ::slotted()

Псевдоэлементы 🧪

• ::placeholder
• ::marker
• ::backdrop
• ::part()
• ::grammar-error
• ::spelling-error

Cinema Seat Preview demo

CSS —
мощный инструмент

Лучше разобраться и заработать 💰,
чем ругать