functional immutable css
TRANSCRIPT
CS S J OKE
Two CSS properties walk into a bar. A barstool in a completely different bar falls over.
Thomas Fuchs @thomasfuchs
"
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
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 E V EN T H IS
.bg-animate,
.bg-animate:hover,
.bg-animate:focus { transition: background-color .15s ease-in-out; }
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