CSS Architecture

Transcript

1. CSS Architecture
2. Writing CSS is easy. Scaling CSS and keeping it maintainable is not.
3. Why? Evolving Design Growing Complexity Repetitive Design Technical Difficulties • Source order affects application order • Specificity is hard to deal with • CSS operate in global scope
4. CSS Methodologies
5. Goals and principles
6. CSS Methodologies BEM (2015) Block, Element, Modifier SMACSS (2012) Scalability and modular architecture of CSS OOCSS (2011) Object Oriented CSS. Separation of structure and design. Separation of container and content Atomic CSS (2017) Utility First, Functional CSS CSS-in-JS • CSS Modules • Styled-components • Emotion
7. BEM
9. “We’re not designing pages, we’re designing systems of components.” Stephen Hay
11. CSS at Scale Is all about picking a reasonable subset of the CSS language Deciding to not do a whole lot of things that CSS can do But we do this to make our app more maintainable
12. Proposed approach
13. Proposed approach Utility First + Modular CSS Use global scoped utility classes from CAD CSS framework via CDN or package Keep contextual CSS in local scoped in your app
14. Atomic CSS
15. Defining Atomic CSS Atomic CSS is the approach to CSS architecture, like inline styles, offers single-purpose units of style, but applied via classes on HTML.
16. Utility Classes Atomic CSS basically means that you have a ton of tiny, single purpose classes that are named based on their visual function. • Text sizes, colors, and weights • Shadows • Borders • Background colors • Flexbox utilities • Padding and margin helper • Width & Heights • Positions and alignments one class = one job .mt-0 { margin-top: 0; } .pr-1 { padding-right: var(--spacer-1); } .bg-dark { background-color: var(--bg-dark); } .text-red { color: var(--red); }
17. Approach • Transition from "semantic" approach to "functional CSS" (Atomic CSS) • Content-agnostic components + utility classes • Mobile first
18. Demo
19. Pros • Only define the classes once • Enforced UI consistency • CSS Reusability and Scalability • Composable • Developers don’t need write CSS code most of the time • Cross devices and browsers compatibility
20. Cons • Developers still need to learn CSS • Developers have to remember utilities and check the tech docs • HTML pollution • It doesn’t work well with micro interaction and animation
21. Frameworks • Tailwind CSS • Tachyons • Basscss • Beard • Turretcss • Bootstrap 4 & 5
22. Who is using it?
23. CAD v1.1 includes: + Root CSS variables + Grid system + Pre build components + Utility classes
24. Demo
25. Utility first approach with no CSS
28. UI code strategy 1. Write semantic HTML 2. Use utility Classes first 3. Write modular CSS
29. Let’s chat
30. Reference • https://2020.stateofcss.com/en-US/technologies/methodologies/ • https://github.com/stubbornella/oocss/wiki • https://css-tricks.com/methods-organize-css/ • https://medium.com/geekculture/css-approaches-for-2021-semantic-and-non- semantic-styling-for-the-current-state-of-web-development-1581916ca1c0 • https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility -classes/ • https://2020.stateofcss.com/en-US/