Imagine having an index page called index.vue consisting of various components like this:
index.vue
<template>
<div>
<component-1 />
<section class="section-1">
<div class="container section-container">
<component-2 />
<component-3 />
</div>
</section>
<component-4>
</div>
</template>
import Component-1 from '~/components/Component-1'
import Component-2 from '~/components/Component-2'
import Component-3 from '~/components/Component-3'
import Component-4 from '~/components/Component-4'
export default {
components: {
Component-1
Component-2
Component-3
Component-4
}
}
<style>
// style for the index page
</style>
Furthermore, there are files named component-2.vue and component-3.vue where specific css rules are declared. In this scenario, certain elements within these components have unique classes while others do not. If styling, let's say, section-1 is defined in the index.vue file, those styles will be inherited by all its children components. This setup allows for styling unique classes in the component-1.vue and component-2.vue files (using <style scoped>) while styling non-unique classes like section-1, container, section-container inside index.vue. Even though section-1, container, section-container exist in both component-1.vue and component-2.vue.
Thus arises the question: Is it a reasonable practice to structure code in this manner? This is what I seek to comprehend. One drawback of this structure is that css rules for certain elements in component-2 and component-3 are placed outside their respective components.