Nuxt•2w ago

CSS class nomenclature for components and pages

What's the recommended way to structure root element class names in Nuxt 3 components and pages with SCSS? For example, should ProductCard.vue use .product-card and products.vue use .products-page as their root classes?

2 Replies

kapa.ai•2w ago

Hi @Sagar Kapoor. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Nuxt 3 doesn't have a strict recommendation for CSS class nomenclature in components and pages. However, I can provide some insights based on common practices and Nuxt's approach to styling. 1. Component Naming: For components like ProductCard.vue, using a class name like .product-card for the root element is a common and logical approach. This follows the component's name and makes it easy to identify in the DOM and stylesheets. 2. Page Naming: For pages like products.vue, using a class name like .products-page is also a reasonable convention. It clearly indicates that the styles are specific to the products page. 3. Scoped Styles: Nuxt 3 supports scoped styles out of the box. When you use <style scoped> in your component or page, Nuxt will automatically add a unique data attribute to your component's elements and scope the styles to that component only. This reduces the need for overly specific class names to avoid conflicts Nuxt Docs - Styling (https://nuxt.com/docs/getting-started/styling). 4. Using SCSS: Nuxt 3 supports SCSS out of the box. You can use SCSS in your components by adding lang="scss" to your style tag:

   <style lang="scss" scoped>
   .product-card {
     // Your styles here
   }
   </style>

   <style lang="scss" scoped>
   .product-card {
     // Your styles here
   }
   </style>

5. BEM Methodology: While not specific to Nuxt, many developers use the BEM (Block Element Modifier) methodology for naming CSS classes. This can be particularly useful for larger components. 6. Customizing Root Element: Nuxt allows you to customize the root element's attributes, including classes, through the app.config.ts file. You can add global classes to the root element this way Nuxt Docs - rootAttrs (https://nuxt.com/docs/api/nuxt-config#rootattrs). Remember, the most important thing is to be consistent with your naming convention throughout your project. The approach you suggested (.product-card for components and .products-page for pages) is perfectly valid and easy to understand. For more advanced theming and component styling, you might want to check out Nuxt UI, which provides a set of components with customizable themes Nuxt UI - Theming (https://ui.nuxt.com/getting-started/theming). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@565461230060306432> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

CSS class nomenclature for components and pages