Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Scoped CSS: To scope or not to scope

25 visualizaciones

Publicado el

On how to use Scoped CSS in VueJS.
Presented in VueJs + FullStk Meetup SG on 21 Nov 2018.

Was pretty stoked when I first learnt about Scoped CSS and enthusiastically used it everywhere, and made some mistakes. Here's what I learnt, and good thing these are also now documented in the official guide (https://vue-loader.vuejs.org/guide/scoped-css.html)!

Publicado en: Software
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Scoped CSS: To scope or not to scope

  1. 1. Scoped CSS To scope or not to scope?
  2. 2. @shiling @taishiling
  3. 3. Why do you need to care about properly scoping CSS? - Prevent styles for one component from affecting others - Prevent people from resorting to using !important
  4. 4. How do you properly scope CSS? … By carefully naming things. (At least that the way it is before CSS modules) - Name-spacing, e.g: • Pure CSS: pure- (pure-button, pure-grid) - Conventions, e.g.: • BEM (Block-Element-Modifier) • OOCSS (Object Oriented CSS)
  5. 5. There are only two hard things in Computer Science: cache invalidation and naming things.
  6. 6. BEM (Block-Element-Modifier) Naming nested elements get out of hand very fast.
  7. 7. What’s Scoped CSS?
  8. 8. Let’s scope everything!!!
  9. 9. Gotcha’s
  10. 10. (1)
  11. 11. Parent components can’t override the styles of child scoped components
  12. 12. Parent components can’t override the styles of child scoped components (Parent) <Card>
  13. 13. Parent components can’t override the styles of child scoped components (Child) <CardHeader> (Parent) <Card>
  14. 14. Parent components can’t override the styles of child scoped components Original style (Child) <CardHeader> (Parent) <Card>
  15. 15. Parent components can’t override the styles of child scoped components Original style Let me just try to override the style… Hm… it does’t work.
  16. 16. Parent components can’t override the styles of child scoped components
  17. 17. Parent components can’t override the styles of child scoped components Child has a different ID.
  18. 18. Parent components can’t override the styles of child scoped components Child has a different ID. Solutions: 1. Use deep selectors 2. Remove scoping on child component
  19. 19. Use deep selectors
  20. 20. Use deep selectors
  21. 21. Use deep selectors
  22. 22. (2)
  23. 23. Scoped CSS != You don’t need to use CSS class at all Don’t do this. Browsers will evaluate all h1 elements, slowing down performance.
  24. 24. In the end I removed all the scoped css and when back to scoping using BEM - It’s easier to override styles (As how Cascading Style Sheets was designed for) - It’s easier to see relationships between elements use “Block” prefixes - And simply because I’m used to it… Note that this is very personal preference. YMMV.
  25. 25. How I think Scoped CSS is supposed to be used - Don’t scope global components, e.g. buttons. Because you’ll properly want to override them. - Start with naming elements with proper CSS class first. - Use scoped when you have similar components with similar structure e.g. <UserCard>, <ArticleSummaryCard>. (And then, in these components you might just use shorter block prefixes like “card-“ instead of “user-card-“ or “article-card-“).

×