FUNC T IO NA L IM MU T A B LE C S S

by Alexey Topolyanskiy @devilcoders https://alexify.me

CS S J OKE

Two CSS properties walk into a bar. A barstool in a completely different bar falls over.

Thomas Fuchs @thomasfuchs

"

AGEND AWhat is CSS Methodology?

What is Functional CSS?

The Plan to Fix All of Our CSS Issues

G O OD O L D CS S• Easy to learn

• Easy to write

• Hard to refactor

CS S IS H AR D• Everything is global scope.

• Everything is mutable.

• Specificity

CS S ME T H ODO L OG Y

... is a formal, documented system for authoring CSS in a way that allows us to develop, maintain and scale the front-end as a set of small, isolated modules, rather than as one massive lump of indivisible code.

... is a peace of mind for developers.

R E AD Y T O US ESMACSS

Point North

ITCSS

OOCSS

Title CSS

idiomatic-css

Atomic Design

SUIT CSS

Kickoff CSS

MaintainableCSS

Y OU W IL L S T AR T W IT H

BEM

BEM is proudly made by Yandex

BU T Y OU W IL L US U A L L Y END UP W IT H

Atomic-!BEMITSC"

WH A T IS FUNC T IO NA L C S S ?

... is a set of classes, that represents simple functions that do

only one thing.

T H E Y L O OK L IK E T H IS

.f1 { font-size: 30px; }

.f2 { font-size: 24px; }

.f3 { font-size: 21px; }

.f4 { font-size: 18px; }

.f5 { font-size: 16px; }

.f6 { font-size: 14px; }

O R T H IS

.mv3 { margin-top: 1rem; margin-bottom: 1rem; }

O R E V EN T H IS

.bg-animate,

.bg-animate:hover,

.bg-animate:focus { transition: background-color .15s ease-in-out; }

C O R E C O NC EP T S1.Performance

2.Clarity

3.Reusability

4.Immutability

P R O J EC T A T L ASOur own plan for World Domainationfixing CSS issues

OU R IS S UES• Inconsistent styles

• Huge CSS codebase

• No Design System

• UI is not responsive

• Tons of CSS-related issues

T ES T M Y C S S• 341 - Complex Selectors

• 25 - Duplicated Properties

• 100 - Duplicated Selectors

• 220 - Importants!

• 643 - Multi Classes Selectors

• 27 - Old IE Fixes

• 119 - Old Property Prefixes

• 14 - Property Resets

• 567 - Qualified Selectors

• 75 - Redundant Body Selectors

• 30 - Redundant Child Nodes Selectors

• 94 - Universal Selectors

http://www.testmycss.com

CS S S T A T S• 2,743 - Rules

• 4,379 - Selectors

• 7,230 - Declarations

• 174 - Properties

• 40 - Unique Colors

• 35 - Unique Background Colors

• 51 - Unique Font Sizes

• 13 - 13 Media Queries

http://cssstats.com

T H IS IS B ADheader#admin-main-header.header--bar-right-part .dropdown-menu.help li a {

line-height: 35px;

}

WH Y ?• Everything just works somehow

• You can be more !important than others

• Too many ways to do same thing

• Refactoring is just too fucking scary

• Developers keep writing CSS!

T H E P L AN• Remove all our CSS

• Choose a framework

• Rewrite all HTML markup

• Make CSS Immutable

T H E S O LU T IO N• CSS Toolkit: Tachyons

• CSS Processor: PostCSS

• Assets Bundler: Webpack

• IPS*: Immutable-CSS + Stylelint

IPS stands for Issue Preventing System

Lightweight - 14kb

Documented - Website is used as Design System

Responsive - Every class has dedicated @media

Customizable - Easy to extend & modify

T AC H Y O NS

B E F O R E T AC H Y O NS

W IT H T AC H Y O NS

IT WO R KS W E L L F O R

P L AN AP P R O V ED !

Implememtation started on Dec 5th

This slide is here, so I will not forget to give a short summary before I will run to

get a beer!

T H ANK Y OU !Questions anyone?