Typically, I reset all margins/paddings by including the following code snippet at the beginning of my CSS:
*, body {
margin: 0;
padding: 0;
}
This method usually works fine since it is overridden by subsequent selectors. However, Vue appends data attributes to each selector in the CSS, disrupting the specificity of the * selector.
[data-v-c9eed8c6], body[data-v-c9eed8c6] {
margin: 0;
padding: 0;
}
The issue arises when Element Plus's CSS is imported before my general CSS, causing a conflict where the selector overwrites the styles from Element Plus.
Although I'm not certain about the desired outcome, it seems that Vue requires these data attributes for bindings. During my investigation of this "issue," I came across an article on CSS Universal selector (*) specificity, which served as the final clue to understanding my problem.
Edit: I recently came across a similar question regarding the presence of a "random "data-v-*" attribute in Vue.js components" at random "data-v-*" attribute in Vue.js components. One of the answers mentioned that this attribute is only added when using scoped CSS, although in my case, I import my general CSS with the CSS loader in my Vue configuration.