Functional Immutable CSS
3 likes638 views
The document discusses functional CSS and the challenges of traditional CSS methodologies, emphasizing the need for a structured approach to maintainable and scalable front-end development. It outlines the issues with current CSS usage, such as inconsistent styles and a large codebase, and proposes a transition to a functional CSS framework using tools like Tachyons and PostCSS. The goal is to create a more efficient and organized CSS system to enhance performance, clarity, and reusability.
Functional Immutable 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?