The talk will be about solving CSS issues in big projects by adopting Functional CSS methodology. You will learn how to take best ideas from Functional Programming, and apply them to your CSS codebase. This means side-effects are limited or nonexistent, already created classes can't be overridden because they are immutable and they are trying to be as "pure" as it's possible to achieve in CSS.

1. FUNC T IONAL
IMMUT AB LE
CS S
by Alexey Topolyanskiy
@devilcoders
https://alexify.me

3. CS S JOKE
Two CSS properties walk into a bar.
A barstool in a completely different
bar falls over.
Thomas Fuchs @thomasfuchs
"

4. AGENDA
What is CSS Methodology?
What is Functional CSS?
The Plan to Fix All of Our CSS Issues

5. G OOD OL D CS S
• Easy to learn
• Easy to write
• Hard to refactor

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

7. CS S ME THODOLOGY
... 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.

8. R EADY TO US E
SMACSS
Point North
ITCSS
OOCSS
Title CSS
idiomatic-css
Atomic Design
SUIT CSS
Kickoff CSS
MaintainableCSS

9. Y OU W IL L S T AR T W ITH
BEM
BEM is proudly made by Yandex

10. BUT Y OU W IL L US UAL LY
END UP W ITH
Atomic- BEMITSC

11. WH AT IS FUNC T IONAL CS S?
... is a set of classes, that
represents simple functions that do
only one thing.

12. TH EY LOOK L IKE TH 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; }

13. OR TH IS
.mv3 {
margin-top: 1rem;
margin-bottom: 1rem;
}

14. OR EV EN TH IS
.bg-animate,
.bg-animate:hover,
.bg-animate:focus {
transition: background-color .15s ease-in-out;
}

15. COR E CONCEP TS
1.Performance
2.Clarity
3.Reusability
4.Immutability

16. P R OJ EC T ATL AS
Our own plan for World Domainationfixing CSS issues

17. OUR IS S UES
• Inconsistent styles
• Huge CSS codebase
• No Design System
• UI is not responsive
• Tons of CSS-related issues

18. T ES T MY CS 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

19. CS S S T ATS
• 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

20. TH IS IS BAD
header#admin-main-header.header--bar-right-part .dropdown-menu.help li a {
line-height: 35px;
}

21. WHY?
• 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!

22. TH E PL AN
• Remove all our CSS
• Choose a framework
• Rewrite all HTML markup
• Make CSS Immutable

23. TH E S OLUT ION
• CSS Toolkit: Tachyons
• CSS Processor: PostCSS
• Assets Bundler: Webpack
• IPS*: Immutable-CSS + Stylelint
IPS stands for Issue Preventing System

24. Lightweight - 14kb
Documented - Website is used as Design System
Responsive - Every class has dedicated @media
Customizable - Easy to extend & modify
T ACHY ONS

25. BEFOR E T ACHY ONS

26. W ITH T ACHY ONS

27. IT WORKS WEL L FOR

28. PL AN APP R OV ED!
Implememtation started on Dec 5th

29. This slide is here, so I will
not forget to give a short
summary before I will run to
get a beer!

30. TH ANK Y OU!
Questions anyone?