Arquitetando css para aplicações web robustas
Transferir como PPTX, PDF2 gostaram301 visualizações
O documento discute as vantagens de se usar pré-processadores e frameworks CSS para criar aplicações web robustas, incluindo reutilização de código, manutenção fácil e escalabilidade. Ele também apresenta vários frameworks populares como BEM, SMACSS, ITCSS e Atomic Design e discute princípios como separação de estrutura e estilo, nomeação semântica de classes e modularização.
Arquitetando css para aplicações web robustas
- 1. Arquitetando CSS para aplicações Web robustas
- 3. - Estilos duplicados - Código muito específico - Difícil de manter
- 4. CSS é muito fácil e não damos a devida atenção a ele.
- 5. CSS is simple...It’s simple to understand. But CSS is not simple to use or maintain. Chris Eppstein - @chriseppstein
- 7. Uma boa arquitetura CSS é ... - Previsível - Reutilizável - Sustentável - Escalável
- 9. E a identidade visual?
- 10. Construa seu próprio framework
- 11. Como construir um framework ?
- 12. Componentização
- 15. POR QUE USAR UM PRÉ-PROCESSADOR?
- 17. Variáveis
- 18. Mixins
- 19. Placeholders
- 20. Maps
- 21. Construção de regras de estilo automatizadas
- 24. - DON’T REPEAT YOURSELF - Nunca duplique um estilo/definição de propriedade que você pode evitar
- 25. - Manter o estilo separado do conteúdo - Evitar a especificidade
- 26. Usar variáveis e mixins para reúso
- 27. - Junte os grupos de propriedades reutilizáveis - Nomeie estes grupos logicamente - Adicione os seletores aos grupos
- 29. Separar a estrutura do visual
- 34. Separar container e conteúdo
- 37. - base - layout - module - state - theme
- 38. ➔Base
- 39. ➔Layout
- 40. ➔Module
- 42. ➔Theme
- 43. B E M - Development by Yandex
- 45. .tab__item--active { ... }
- 48. ➔Settings
- 49. ➔Tools
- 50. ➔Generic
- 51. ➔Base
- 52. ➔Objects
- 53. ➔Components
- 54. ➔Trumps
- 55. ATOMIC DESIGN -Brad Frost, @brad_frost
- 57. ➔Atoms
- 58. ➔Moléculas
- 59. ➔Organismo
- 60. ➔Template
- 61. ➔Página
- 64. !important Nunca use !important;
- 65. Use reset ou normalize
- 66. Pare de usar números mágicos
- 67. Não use ID para estilizar
- 68. Nomeie suas classes, variáveis e mixins de acordo com a sua funcionalidade. Nunca use a apresentação visual para nomeação.
- 69. Cuidado com o aninhamento de seletores
- 70. Analize o código de saída do pré-processador
- 71. Padronize seu código. Tenha um CSS guideline
- 72. Modularize o seu código “Ao separar um sanduíche em pedaços menores, você pode rapidamente e eficientemente criar uma infinidade de variedades. Assim que as classes deveriam ser baseadas. Em vez de “#sanduiche” agora temos “.pao.alface.queijo.salame.tomate.maionese” e isso é incrível! Não gosta de tomate? É fácil deixá-lo fora ... Classes baseadas em estruturas é como comer no Subway (só que melhor). – Harry Roberts, @csswizardry
- 73. Divida seu código em pequenas peças
- 74. Construa um showcase com os seus componentes
- 75. Indo além ...