Os três pilares da arquitetura CSS

Nessa apresentação junto quais problemas do CSS algumas arquiteturas se propuseram a resolver e quais características delas resolvem esse determinado problema. No CSS complexidade e encontrabilidade geralmente é resolvido através da categorização dos seletores CSS, por essa mesma razão eu categorizo os problemas e soluções em 3 pilares - Definição: um conjunto de regras a serem seguidas, Manutenção: semântica e localização de código e Armazenamento: reuso e abstração. A forma que definimos, mantemos e guardamos afeta diretamente a forma que o CSS escala em aplicações grandes e pequenas.

Referências na ordem de apresentação:

CSS causa problemas de performance - FACSST - Harry Roberts
https://www.youtube.com/watch?v=2Rn8an74khk&ab_channel=FrontendUnited

"Seu javascript sequer roda antes do parsing do DOM e do CSSOM" - Understanding the critical path - Web.Dev
https://web.dev/learn/performance/understanding-the-critical-path?hl=pt-br

"Em 2006 a galera do Yandex trabalhava dois projetos grandes ..." - BEMCSS - History
https://en.bem.info/methodology/history/

"Em 2009 na apresentação What is Object Oriented CSS da Nicole Sullivan..." - What is Object Oriented CSS - Nicole Sullivan
Slideshow: https://pt.slideshare.net/slideshow/object-oriented-css/990405
Video: https://www.youtube.com/watch?v=BjAdHyA9nIY&t=248s&ab_channel=Percona

"Em 2011 Jonathan Snook do Yahoo comentava sobre os desafios..." - SMACSS - Jonathan Snook
https://smacss.com/

"Em 2014 Harry Roberts apresentou a palestra Managing ..." - Managing CSS Projects with ITCSS - Harry Roberts
Slideshow: https://speakerdeck.com/dafed/managing-css-projects-with-itcss?slide=1
Video: https://www.youtube.com/watch?v=1OKZOV-iLj4&ab_channel=DaFED

Outras refs:
About HTML semantics and front-end architecture - Nicholas Gallagher (Criou o SUITCSS)
https://nicolasgallagher.com/about-html-semantics-front-end-architecture/
https://suitcss.github.io/

CSS Architecture for Modern Web Applications by Mike Riethmuller
https://www.youtube.com/watch?v=ZWPMzJfJHnc&ab_channel=JSConf
O blog dele também é fantástico
https://www.madebymike.com.au/writing/

Dave Rupert - Modern alternatives to BEM
https://daverupert.com/2022/08/modern-alternatives-to-bem/

CUBECSS - Andy Bell
https://cube.fyi/

A look at the CUBE CSS methodology in action - Kevin Powell
https://www.youtube.com/watch?v=NanhQvnvbR8&ab_channel=KevinPowell

Assets usados:
Fonte - Syne

Imagens de letras no estilo colagem
https://indieground.net/product/free-punk-letters/

Assets do Figma community
Fun stickers - Visual Assets
Vector hand drawn shapes
Flex UI library for Tailwind CSS
Bootstrap 5 UI kit
Shadcn UI Design System

Transcript

1. Os três pilares da arquitetura CSS p 728x692 Color #333333 Font 115px ”Syne”, arial, helvetica, sans... Margin 0px ACCESSIBILITY Contrast Aa 12.63 Name Role paragraph Keyboard-focusable p 728x692 Color #333333 Font 115px ”Syne”, arial, helvetica, sans... Margin 0px ACCESSIBILITY Contrast Aa 12.63 Name Role paragraph Keyboard-focusable Criar, armazenar e manter
2. Frontend sênior na OLX Completamente obcecado por CSS Apelido fofo no falecido Twitter Escrevo sobre CSS, Web Performance, Acessibilidade e Design Meu linkedin
3. Frontend sênior na OLX Completamente obcecado por CSS Apelido fofo no falecido Twitter Escrevo sobre CSS, Web Performance, Acessibilidade e Design Meu linkedin
4. CSS É DIFÍCIL Se tu acha que tá resolvido na sua aplicação, é porque você não mede
5. CAUSA PROBLEMAS DE PERFORMANCE 1.0 0.9 0.8 0.7 0.6 0.5 0.4 0.3 0.2 0.1 0 Highest Correlation to Render Time CSS & Sync JS CSS Xfer Size CSS Reqs Sync JS Max Reqs on 1 Domain 0.25 0.24 0.23 0.21 0.19
6. Seu javascript sequer roda antes do parsing do CSS pro CSSOM e do HTML pro DOM
9. O CSS EVOLUIU COM O TEMPO, E TAMBÉM A PERCEPÇÃO DOS SEUS PROBLEMAS
10. Em 2006 a galera do Yandex trabalhava dois projetos grandes, o YandexMusic e o Ya.Ru Em 2006 a galera do Yandex trabalhava dois projetos grandes, o YandexMusic e o Ya.Ru Em 2006 a galera do Yandex trabalhava dois projetos grandes, o YandexMusic e o Ya.Ru Q E se tornou open source em 2012
11. E os problemas principais que eles sofreram no desenvolvimento do projeto foram Qualquer mudança no CSS de uma página alterava nas outras páginas Era difícil escolher o nome das classes
12. Em 2009 na apresentação What is Object Oriented CSS da Nicole Sullivan trazia os principais problemas sobre CSS do seu tempo Em 2009 na apresentação What is Object Oriented CSS da Nicole Sullivan trazia os principais problemas sobre CSS do seu tempo Em 2009 na apresentação What is Object Oriented CSS da Nicole Sullivan trazia os principais problemas sobre CSS do seu tempo
13. Era necessária muita habilidade pra começar aescrever CSS O tamanho dos arquivos só crescia Reutilização de código inexistente O código era muito frágil Relação de 1:1 entre código e módulos
14. Em 2011 Jonathan Snook do Y ahoo comentava sobre os desafios de criar CSS em grande escala
15. Como decidir entre estilizar através de elementos, classes ou ids? Como você decide que elementos vão receber cada estilo? Como você torna fácil de entender como os estilos do seu site estão organizados
16. Em 2014 Harry Roberts apresentou a palestra Managing CSS Projects with ITCSS na DaFED (Sérvia), e elencou os problemas do CSS de duas formas: O que é culpa do CSS e das pessoas desenvolvedoras
17. Problema Cascata e herança Não tem stricit mode Muitos detalhes de implementação Especificidade é difícil de gerenciar Extremamente dependente na ordem do código fonte Pouco expressivo, relação opaca com os componentes do
18. dos Problema Falta de docs Falta de estrutura e qualidade Não saber ou procurar código já existente Adicionar novos estilos no fim da stylesheet Mistura de habilidades ou falta de conhecimento (de CSS ou do projeto) Diferentes estilos e formas de trabalhar
19. Enfim Como você torna fácil de entender como os estilos do seu site estão organizados Falta de documentação Mistura de níveis de habilidade Qualquer mudança no CSS de uma página alterava nas outras páginas Desenvolvedores vão criar diversos módulos e eles terão uma relação de 1:1 com o CSS Era difícil escolher o nome das classes Código é muito frágil Diferentes estilos, preferências e formas de trabalhar Problemas com especificidade Reutilização de código é quase não existente Adicionar novos estilos no final da folha de estilos Cascata e a herança confusas Tamanho de arquivo só cresce Cascata e a herança confusas Alto desacoplamento Requere muita habilidade só pra começar Alto desacoplamento Dependente da ordem de origem Adicionar novos estilos no final da folha de estilos Dependente da ordem de origem Falta de estrutura e processos de qualidade Como decidir entre estilizar através de elementos, classes ou ids? Pouco expressivo Não olhar / estar ciente daquilo que já existe Como você decide que elementos vão receber cada estilo? Falta de estrutura e processos de qualidade Muitos detalhes de implementação Falta de conhecimento de CSS e do pro
20. Vamos falar de como eles foram
21. Qualquer mudança no CSS de uma página alterava nas outras páginas Era difícil escolher o nome das classes Especificidade é difícil de gerenciar Pouco expressivo, relação opaca com os componentes Difícil localização dos estilos Alta carga cognitiva Como criar um CSS modular e desacoplado e com definições semânticas de classe?
22. Одного single Как хотел я single e CowBoys single Туман single New tracks, albums, and compilations Show all New releases 1 8 + Виктор Пелевин. «Круть» 6 069 Леонид Николаевич Андреев. «Гостинец» 1 111 1 8 + Уолтер Айзексон. «Илон Маск» 15 407 TED Лучшее: Мотивация и вдохновение выступления спикеров TED Избранные вдохновляющие 11 480 Listen to more than just music Show all Podcasts and Books Home All N ew rel eases Charts Mixes N euromusic Em 2006 Yandex operava com MPA (um HTML por página), havia apenas um arquivo .js e um arquivo .css pra todas as páginas do projeto * infelizmente não consegui snapshot do Yandex de 2006 about.html index.html ... project.css project.js i/ yandex.png
23. Trending tracks on Yandex Music Show all Chart 2:50 Асфальт Jakone,Kiliana 1 2:58 Адская колыбельная Пошлая Молли 2 2:54 Привыкаю MACAN,A.V.G 6 2:08 GODZILLA bearwolf 7 96 209 Weekly update of the most played tracks of the weekend. Superlaunch 36 816 Tracks to rock and sweep you off your feet Vibe 158 274 Cover: Dima Bilan Russian Covers and Remakes 47 787 Cover: ALTUNIN Fiery beats for fiery parties Hot Tracks of the Month: Dance Music selected for you by our editorial team Show all Popular playlists Одного single Как хотел я single e CowBoys single Туман single New tracks, albums, and compilations Show all Como as diferentes páginas compartilhavam diferentes variantes dos mesmos componentes, mover código de lugar ou modificá-lo em uma página poderia causar regressões em outros lugares
24. /* Content card (begin) */ /* ... */ 
 /* ... */ 
 /* Content card (end) */ .card .card-round { } { }
 96 209 Weekly update of the most played Superlaunch 987 азываем о событиях, ые изменили мир EV LIVE Sem uma padronização era difícil escrever variantes do mesmo componente sem duplicar código ou sobrescrever variantes já existentes
25. 96 209 Weekly update of the most played Superlaunch 96 209 Weekly update of the most played Superlaunch /* Content card (begin) */ /* ... */ 
 /* ... */ 
 /* ... */ 
 #card #card .card-image.round #card .card-likes .like-counter { } { } { } Não havia padrão no uso de IDs e os seletores geralmente tinham muita especificidade
26. 96 209 Weekly update of the most played Superlaunch O BEM (Block, Element, Modifier) foi criado por eles pra que existisse um padrão semântico na criação de seletores que permitisse modularidade e expressasse a relação direta deles com seus descendentes Se referir aos elementos diretamente pela classe diminuiu o tamanho da cascata e a especificidade das declarações .card {} .card__title {} .card__description {} .icon--outlined {} .card__counter {} 96 209 Weekly update of the most played Superlaunch
27. .card__description {} description card pertence à .card {} card é independente .icon--outlined {} outlined icon é uma variação de Estabelecer essa relações através de um padrão de nomenclatura de classes resolveu os problemas citados préviamente Qualquer mudança no CSS de uma página alterava nas outras páginas Transparência nas relações entre componentes, seus descendentes e variantes Era difícil escolher o nome das classes Padrão de nomenclatura relacional 0.1.0 0.1.0 0.1.0
28. .card__description {} description card pertence à .card {} card é independente .icon--outlined {} outlined icon é uma variação de .footer > .footer > .footer > 0.2.0 0.2.0 0.2.0 Um bloco ser independente significa que ele não mantém relação contextual com outro bloco (como descendência direta), diminuindo especificidade e aumentando o desacomplamento
29. Convenção de nomenclatura Seletores sem descendentes Seletores representam componentes Co-localização Armazenamento Reuso e abstração D e fin iç ã o R egras a serem seguidas G O O D M anutenção Sem ântica e localização O K BAD Especificidade é difícil de gerenciar Pouco expressivo, relação opaca com os componentes Difícil localização dos estilos Alta carga cognitiva
30. É necessário de muita habilidade pra começar a trabalhar com CSS O código é muito frágil à mudanças O tamanho dos arquivos só cresce Desenvolvedores vão criar diversos módulos e eles terão uma relação de 1:1 com o CSS Reutilização de código inexistente Como criar um CSS resiliente e que possibilite maior reutilização de código Organização de código confusa Reutilização de código inexistente Alta carga cognitiva O tamanho dos arquivos só cresce O código é muito frágil à mudanças SASS / LESS Responsive Web Design Ethan Marcotte Nicole Sullivan
31. Continue Login with Email Subtle Cancel 4 botões gerariam 4 variações que seriam declaradas pelo menos 4 vezes no decorrer do código, provavelmente sobrescrevendo o CSS anterior O tamanho dos arquivos só cresce Reutilização de código inexistente
32. OOCSS parte da percepção que se a aparência de um componente e seu layout forem objetos separados, eles podem ser estendidos e herdados Text
33. Text Button Title public class extends ButtonBaseLayout PrimaryTheme
34. Button Title Text public class extends ButtonBaseLayout DangerTheme
35. Button Title Text public class implements ButtonBaseLayout InfoThemeOutlineVariantInterface
36. Button Title public class extends ProgressBase InfoTheme
37. Product Features Pricing Resources Log In Sign Up Get early access Enter your work email A small business is only 
 as good as its tools. We’re different. Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels. Start your free 14-day trial today, no credit card required. HEADER Join 4,000+ companies already growing
38. Product Features Pricing Resources Log In Sign Up Get early access Enter your work email A small business is only 
 as good as its tools. We’re different. Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels. Start your free 14-day trial today, no credit card required. HEADER Join 4,000+ companies already growing Get early access Sign Up button.cta-button 220x80 Color #FFFFFF Font 16px ”Popins”, arial, helvetica, sans-s... Margin 0px AC C E S S I B I L I T Y Contrast Aa 12.63 Name Role paragraph Keyboard-focusable button.cta-button 220x80 Color #FFFFFF Font 16px ”Popins”, arial, helvetica, sans-s... Margin 0px AC C E S S I B I L I T Y Contrast Aa 12.63 Name Role paragraph Keyboard-focusable button.header-button 120x80 Color #FFFFFF Font 16px ”Popins”, arial, helvetica, sans-s... Margin 0px AC C E S S I B I L I T Y Contrast Aa 12.63 Name Role paragraph Keyboard-focusable button.header-button 120x80 Color #FFFFFF Font 16px ”Popins”, arial, helvetica, sans-s... Margin 0px AC C E S S I B I L I T Y Contrast Aa 12.63 Name Role paragraph Keyboard-focusable
39. Get early access Sign Up button.cta-button 220x80 Color #FFFFFF Font 16px ”Popins”, arial, helvetica, sans-s... Margin 0px ACCESSIBILITY Contrast Aa 12.63 Name Role paragraph Keyboard-focusable button.cta-button 220x80 Color #FFFFFF Font 16px ”Popins”, arial, helvetica, sans-s... Margin 0px ACCESSIBILITY Contrast Aa 12.63 Name Role paragraph Keyboard-focusable button.header-button 120x80 Color #FFFFFF Font 16px ”Popins”, arial, helvetica, sans-s... Margin 0px ACCESSIBILITY Contrast Aa 12.63 Name Role paragraph Keyboard-focusable button.header-button 120x80 Color #FFFFFF Font 16px ”Popins”, arial, helvetica, sans-s... Margin 0px ACCESSIBILITY Contrast Aa 12.63 Name Role paragraph Keyboard-focusable .header-button .cta-button .button.button-primary.button-large
40. Get early access button.button-primary.button... 220x80 Color #FFFFFF Font 16px ”Popins”, arial, helvetica, sans-s... Margin 0px ACCESSIBILITY Contrast Aa 12.63 Name Role paragraph Keyboard-focusable button.button-primary.button... 220x80 Color #FFFFFF Font 16px ”Popins”, arial, helvetica, sans-s... Margin 0px ACCESSIBILITY Contrast Aa 12.63 Name Role paragraph Keyboard-focusable button.button-primary.button... 120x80 Color #FFFFFF Font 16px ”Popins”, arial, helvetica, sans-s... Margin 0px ACCESSIBILITY Contrast Aa 12.63 Name Role paragraph Keyboard-focusable button.button-primary.button... 120x80 Color #FFFFFF Font 16px ”Popins”, arial, helvetica, sans-s... Margin 0px ACCESSIBILITY Contrast Aa 12.63 Name Role paragraph Keyboard-focusable .header-button .cta-button .button.button-primary.button-outline .button.button-primary.button-soft Sign Up
41. O tamanho dos arquivos só cresce Reutilização de código inexistente O código é muito frágil à mudanças Desenvolvedores vão criar diversos módulos e eles terão uma relação de 1:1 com o CSS Reaproveitamento de aparência e layout e desacoplamento de estilo e container É necessário de muita habilidade pra começar a trabalhar com CSS Uma categorização simples que dá clareza na separação e introdução de classes no CSS
42. Armazenamento Reuso e abstração D e fin iç ã o R egras a serem seguidas G O O D M anutenção Semântica e localização O K GOOD Componentes são representados por abstrações Layout como entidade Co-localização O tamanho dos arquivos só cresce Organização de código confusa Reutilização de código inexistente Alta carga cognitiva O código é muito frágil à mudanças
43. Como decidir entre estilizar através de elementos, classes ou ids? Como você torna fácil de entender como os estilos do seu site estão organizados Como você decide que elementos vão receber cada estilo? Como criar, onde aplicar e como manter estilos CSS Jonathan Snook Atomic CSS Atomic CSS Atomic Web Design Brad Frost Difícil nomenclatura Organização de código confusa Necessidade de documentação Especificidade é difícil de gerenciar Pouco expressivo, relação opaca com os componentes
44. Gain more insight into how people use your HOW IT WORKS With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform. Measure your performance 1 Stay connected with your team and make quick decisions wherever you are. Build your website 4 A tool that lets you build a dream website even if you know nothing about web design or programming. Custom analytics 2 Get a complete sales dashboard in the cloud. See activity, revenue and social metrics all in one place. Connect multiple apps 5 The first business platform to bring together all of your products from one place. Team Management 3 Our calendar lets you know what is happening with customer and projects 
 so you Easy setup 6 End to End Business Platform, Sales Management, Marketing Automation, Help Desk As categorias são ase, ayout, odule, tate e heme O core do SMACSS é a categorização
45. ase se refere à , e defaults resets normalizers Gain more insight into how people use your HOW IT WORKS With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform. Measure your performance 1 Stay connected with your team and make quick decisions wherever you are. Build your website 4 A tool that lets you build a dream website even if you know nothing about web design or programming. Custom analytics 2 Get a complete sales dashboard in the cloud. See activity, revenue and social metrics all in one place. Connect multiple apps 5 The first business platform to bring together all of your products from one place. Team Management 3 Our calendar lets you know what is happening with customer and projects 
 so you Easy setup 6 End to End Business Platform, Sales Management, Marketing Automation, Help Desk
46. ayout divide as em páginas seções Gain more insight into how people use your HOW IT WORKS With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform. Measure your performance 1 Stay connected with your team and make quick decisions wherever you are. Build your website 4 A tool that lets you build a dream website even if you know nothing about web design or programming. Custom analytics 2 Get a complete sales dashboard in the cloud. See activity, revenue and social metrics all in one place. Connect multiple apps 5 The first business platform to bring together all of your products from one place. Team Management 3 Our calendar lets you know what is happening with customer and projects 
 so you Easy setup 6 End to End Business Platform, Sales Management, Marketing Automation, Help Desk .l-banner #how-it-works .l-grid
47. Gain more insight into how people use your HOW IT WORKS With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform. Measure your performance 1 Stay connected with your team and make quick decisions wherever you are. Build your website 4 A tool that lets you build a dream website even if you know nothing about web design or programming. Custom analytics 2 Get a complete sales dashboard in the cloud. See activity, revenue and social metrics all in one place. Connect multiple apps 5 The first business platform to bring together all of your products from one place. Team Management 3 Our calendar lets you know what is happening with customer and projects 
 so you Easy setup 6 End to End Business Platform, Sales Management, Marketing Automation, Help Desk Measure your performance 1 Stay connected with your team and make quick decisions wherever you are. Gain more insight into how people use your HOW IT WORKS With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform. .list-item .list-numeral .title .body .heading .tag .subtitle odules representam os componentes reutilizáveis .media
48. .is-hovered Gain more insight into how people use your HOW IT WORKS With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform. Measure your performance 1 Stay connected with your team and make quick decisions wherever you are. Build your website 4 A tool that lets you build a dream website even if you know nothing about web design or programming. Custom analytics 2 Get a complete sales dashboard in the cloud. See activity, revenue and social metrics all in one place. Connect multiple apps 5 The first business platform to bring together all of your products from one place. Team Management 3 Our calendar lets you know what is happening with customer and projects 
 so you Easy setup 6 End to End Business Platform, Sales Management, Marketing Automation, Help Desk .is-hovered Gain more insight into how people use your HOW IT WORKS With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform. Measure your performance 1 Stay connected with your team and make quick decisions wherever you are. Build your website 4 A tool that lets you build a dream website even if you know nothing about web design or programming. Custom analytics 2 Get a complete sales dashboard in the cloud. See activity, revenue and social metrics all in one place. Connect multiple apps 5 The first business platform to bring together all of your products from one place. Team Management 3 Our calendar lets you know what is happening with customer and projects 
 so you Easy setup 6 End to End Business Platform, Sales Management, Marketing Automation, Help Desk hemes são overrides de classes existentes em outra posição da cascata theme.dark.css theme.main.css
49. html {} base - baixa especificidade, escopo global 0.0.1 #header {} layout - macro layout, especificidade alta e sem reutilização 1.0.0 l-grid {} layout - micro layout, especificidade baixa e alta reutilização 0.1.0 .button {} module - componentes e seus descendentes 0.1.0 .is-error {} state - estado ou variante de um módulo, indica interação 0.1.0 Especificidade Escopo .base .module .layout (micro) .is-error .layout (macro) .theme
50. Criar uma categorização de classes faz com que além de a relação e localização delas serem representadas, há uma lógica de especificidade e cascata Como decidir entre estilizar através de elementos, classes ou ids? Escopo, e categoria dos elementos são diretamente relacionadas ao tipo de seletor Como você torna fácil de entender como os estilos do seu site estão organizados É possível organizar o código por escopo, categoria e cascata (theme) Como você decide que elementos vão receber cada estilo? SMACSS fornece um styleguide semântico fortemente inspirado no OOCSS
51. Armazenamento Reuso e abstração D e fin iç ã o R egras a serem seguidas G O O D M anutenção Semântica e localização O K GOOD Seletores apenas com descendentes diretos Seletores representam categorias Convenção de nomenclatura Layout como entidade Difícil nomenclatura Organização de código confusa Necessidade de documentação Especificidade é difícil de gerenciar Pouco expressivo, relação opaca com os componentes
52. CSS é extremamente dependente na ordem do código fonte Falta de estrutura e processos qualidade Cascata e herança são difíceis de controlar Alta carga cognitiva Diferentes estilos e formas de trabalhar Não saber ou procurar código já existente Especificidade é difícil de gerenciar Pouco expressivo, relação opaca com os componentes O CSS é muito permissivo SUITCSS Nicholas Gallager Atomic CSS (lib) Thierry Koblenz CSS é difícil de escalar e horrível de se escrever em times grandes Harry Roberts Cascata e herança Não tem stricit mode Muitos detalhes de implementação Especificidade é difícil de gerenciar Extremamente dependente na ordem do código fonte Pouco expressivo, relação opaca com os componentes Falta de docs Falta de estrutura e qualidade Não saber ou procurar código já existente Adicionar novos estilos no fim da stylesheet Mistura de habilidades ou falta de conhecimento (de CSS ou do projeto) Diferentes estilos e formas de trabalhar
53. Inverted Triangle CSS Harry Roberts criou o ITCSS com base no seu trabalho em grandes empresas, apesar de ter convenções de namespacing, seu foco é na gestão da codebase de CSS mais do que nos padrões adotados, tanto que é compatível com outras metodologias com características de styleguide. Settings Tools Generic Base Objects Components Utilities
54. Settings :root { } --color-primary: #EAEABD; Tools @function getOpacity($color) { } @return alpha($color); Generic * { } margin: 0; padding: 0; box-sizing: border-box; Base h1 { } font: 800 2.25rem Inter; line-height: 1.5; Objects .o-stack { } display: grid; gap: var(--stack-gap, 0.5rem); Components .c-stepper { } position: relative; display: flex; gap: 1rem; padding-bottom: 1.75rem; Utilities .u-ml-1 { } . margin-inline-start: 0.25rem; Seletores como componentes, categorias e escopo de especificidade
55. Settings project.css project.css Tools project.css project.css Generic project.css project.css Base project.css project.css Objects project.css project.css Components project.css project.css Utilities project.css project.css Especificidade Localização
56. Especificidade Localização Settings project.css project.css Tools project.css project.css Generic project.css project.css Base project.css project.css Objects project.css project.css Components project.css project.css Utilities project.css project.css
57. Settings project.css project.css Tools project.css project.css Generic project.css project.css Base project.css project.css Objects project.css project.css Components project.css project.css Utilities project.css project.css .cart > .card-item.active #cart-item !important --- --- 0,0,1 0,0,1 0,1,0 1,0,0,0 0,1,0 Especificidade Localização
58. Como o seletor é escrito e em que arquivo ele mora define sua categoria, semântica e especificidade Extremamente dependente na ordem do código fonte Cascata e herança Adicionar novos estilos no fim da stylesheet Especificidade é difícil de gerenciar Pouco expressivo, relação opaca com os componentes Falta de estrutura e qualidade Mistura de habilidades ou falta de conhecimento (de CSS ou do projeto) Diferentes estilos e formas de trabalhar Não saber ou procurar código já existente Falta de docs
59. Armazenamento Reuso e abstração D e fin iç ã o R egras a serem seguidas G O O D M anutenção Semântica e localização GO O D GOOD Seletores representam escopo de especificidade Seletores representam categorias Convenção de nomenclatura Localização semântica CSS é extremamente dependente na ordem do código fonte Falta de estrutura e processos qualidade Cascata e herança são difíceis de controlar Alta carga cognitiva Diferentes estilos e f Não saber ou procurar código Especificidade é difícil de Pouco expressivo, relação opaca com os componentes O CSS é muito permissivo
60. Então ITCSS é a melhor arquitetura CSS?
61. Só se você encarar Força uma convenção de pastas Alta carga cognitiva Difícil refatorar diretamente pra ele Demanda muitas mudanças culturais Então ITCSS é a melhor arquitetura CSS?
62. Então qual é a melhor?
63. Não adianta olhar pra uma receita sem levar em consideração os ingredientes disponíveis, preferências e restrições alimentares
64. Definição Regras a serem seguidas Manutenção Semântica e localização Armazenamento Reuso e abstração
65. Convenção de nomenclatura Localização semântica Co-localização Seletores representam escopo de especificidade Componentes são representados por abstrações Seletores representam componentes Seletores sem descendentes Seletores apenas com descendentes diretos Seletores representam categorias Layout como entidade Definição Regras a serem seguidas Manutenção Semântica e localização Armazenamento Reuso e abstração
66. BEM OOCSS SMACSS ITCSS SUITCSS AtomicCSS Seletores representam componentes Convenção de nomenclatura Seletores representam escopo de especificidade Seletores representam categorias Seletores sem descendentes Componentes são representados por abstrações Seletores apenas com descendentes diretos Layout como entidade Localização semântica Co-localização
67. Difícil escolher os tipos de seletores Difícil de definir qual template receberá qual estilo CSS é extremamente dependente na ordem do código fonte Difícil nomenclatura Inclusão de novos estilos Organização de código confusa Reutilização de código inexistente Falta de estrutura e processos qualidade Cascata e herança são difíceis de controlar Alta carga cognitiva O tamanho dos arquivos só cresce Diferentes estilos e formas de trabalhar O código é muito frágil à mudanças Mudanças no CSS vazam de escopo Não saber ou procurar código já existente Mistura de habilidades ou falta de conhecimento (de CSS ou do projeto) Necessidade de documentação Especificidade é difícil de gerenciar Falta de estrutura e processos qualidade Pouco expressivo, relação opaca com os componentes O CSS é muito permissivo E os problemas?
68. Mistura de habilidades ou falta de conhecimento (de CSS ou do projeto) Convenção de nomenclatura Seletores representam categorias Localização semântica
69. O tamanho dos arquivos só cresce Seletores representam categorias Seletores representam escopo de especificidade Seletores sem descendentes Layout como entidade Localização semântica
70. O código é muito frágil à mudanças Seletores representam componentes Convenção de nomenclatura Seletores sem descendentes Co-localização
71. Convenção de nomenclatura Seletores sem descendentes Tailwind CSS Bootstrap OOCSS Componentes são representados por abstrações Co-localização Layout como entidade Componentes são representados por abstrações Convenção de nomenclatura Seletores representam componentes Seletores apenas com descendentes diretos Co-localização
72. MEDIR COLETAR CATEGORIZAR RESUMIR ATUAR