The Skinny on CSS in Vue Single File Components
Tags: vue, css, vue3, webdev
Published: 2022-12-13 20:11:50

In my humble opinion one of the best features of Vue.js is its robust capability to handle styling. Out-of-the box it provides encapsulated CSS for components, while adding any pre- or postprocessor is just one npm install away. It's all very straightforward for basic usage. However there are some less known super useful styling features in Vue.js that you might not know about, also version 3 added a lot of new tools in this area as well.

## Scoping CSS in Vue
One of the core styling features of Vue is the ability to add scoped CSS. This basically solves the global scope problem of CSS and gives us the ability to encapsulate styles to our Single File Components.

For example we have an `Alert.vue` component, that looks like this:
```vue
<template>
    <div class="alert">
        <slot />
    </div>
</template>

<style scoped>
.alert {
    --base-gutter: 0.4rem;
    padding: calc(var(--base-gutter) * 2);
    border: 1px solid #ffea2a;
    background-color: #fff48d;
    border-radius: var(--base-gutter);
}
</style>

```

```vue
<Alert>
  Hi there!<br />
  This is some warning for the user from the system.
</Alert>
```
If you run this code (the easiest way of doing that is by scaffolding a new Vue project with [Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project)) you will get this output in your browser.

```html
<div class="alert" data-v-3f4a8ec2="" data-v-7a7a37b1="">
   Hi there!<br data-v-7a7a37b1=""> This is some warning for the user from the system.
</div>
```

You'll notice that all the HTML tags (even that little `<br />`) from our Vue template got a generated [data attribute](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) that looks like `data-v-<some-hash>`. This will be the same for every instance of our component, but unique to that component. By the way, the random string after the `data-v-` is generated from the name of your `*.vue` file, so if you rename it, the hash will also change.

Now if you inspect the styles applied to it you'll see that your selector is also rewritten by the framework like so.

```css
.alert[data-v-3f4a8ec2] {
  --base-gutter: 0.4rem;
  padding: calc(var(--base-gutter) * 2);
  border: 1px solid #ffea2a;
  background-color: #fff48d;
  border-radius: var(--base-gutter);
}
```
That unique data attribute got added as an [attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) to our class name, thus adding to the specificity and making sure that if another `.alert` class is defined in any other stylesheet loaded on the page, its rules won't conflict with our `Alert` component's rules.

Notice that in development mode those styles will go into a `<style>` in the `<head>` and Vite's latest version will even add a `data-vite-dev-id` attribute with the url and generated hash of the CSS file it extracts from the SFC. Of course when building your app for production, your bundler of choice will put this code into a separate `.css` file.

![IDs in Vue.js generated style tags](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8mb0c2r53wokfexdgh5u.jpg)

So it's that easy to create scoped styles in Vue.js. Fun fact the scoped attribute on the style tag actually comes from a [W3C draft](https://www.w3.org/TR/css-scoping-1/) for implementing native scoping for CSS, which was unfortunately [abandoned](https://css-tricks.com/early-days-for-css-scoping/).

## Working around child selectors
Now there is one small problem with this method of scoping CSS.

Let's say you have an API that delivers raw HTML text, that content editors add using the WYSIWYG editor of some CMS.

Now inserting raw HTML to Vue templates is trivial with the [v-html](https://vuejs.org/api/built-in-directives.html#v-html) directive, but you also want to style these tags independently, so you create a `<RichText />` component to encapsulate their CSS.

This would all look like this:

```vue
<template>
    <div class="rich-text" v-html="props.text" />
</template>

<script setup>
const props = defineProps({
    text: String
})
</script>

<style lang="scss" scoped>
.rich-text {
    p {
        margin: 0 0 1rem 0;
    }

    ol {
        list-style-type: lower-alpha;
    }

    ul {
        list-style-type: circle;
    }

    // some more styles for all possible tags...
}
</style>
```

Now your component will render the following CSS.

```css
.rich-text p[data-v-60170f23] {
  margin: 0 0 1rem 0;
}
.rich-text ol[data-v-60170f23] {
  list-style-type: lower-alpha;
}
.rich-text ul[data-v-60170f23] {
  list-style-type: circle;
}
```

But the tags inserted by `v-html` won't receive the `data-v-<component-hash>` attributes as the other tags in your component.

You can change the CSS output so that the scoping will also work for nested elements.

```vue
<style lang="scss" scoped>
.rich-text {
    :deep(p) {
        margin: 0 0 1rem 0;
    }

    :deep(ol) {
        list-style-type: lower-alpha;
    }

    :deep(ul) {
        list-style-type: circle;
    }

    // some more styles for all possible tags...
}
</style>
```

Now the styles generated will look like this:

```css
.rich-text[data-v-60170f23] p {
  margin: 0 0 1rem 0;
}
.rich-text[data-v-60170f23] ol {
  list-style-type: lower-alpha;
}
.rich-text[data-v-60170f23] ul {
  list-style-type: circle;
}
```

The `data-v-` goes in front of the parent selector so child selectors will get applied and scoping will be maintained. 

### Syntax variations
If you've googled this problem before you may have found some alternate syntaxes to do the same thing, so let's clarify things a bit.

You've may seen this:

```css
.alert ::v-deep h1 {
…
}
```

Or this

```css
.alert /deep/ h1 {
…
}
```

Or even this

```css
.alert >>> h1 {
…
}
```

In **Vue 3** and **Vue 2.7** all of these have been deprecated, so while your code may work, the compiler will show a warning and they will stop working in some future release. So it's best to use `:deep()`, unless you are on **Vue >2.7**.

Also note that if you are using SCSS, the `>>>` and `/deep/` syntax will throw an error in **Vue 3**, while the `::v-deep` will still work but with a warning.

Bottom line is, just use `:deep()` on all newer versions of Vue.

## New CSS features in Vue 3

With Vue 3 we've got two new combinators next to `:deep()`. 

### Scoped styles for slots

First we have `:slotted()` which lets you target any HTML that's inserted to one of the slots of your component.

Let's say you want to add another slot in the component and you'd want whatever element that goes in that slot to have a specific styling defined by it.

```vue
<template>
    <div class="alert">
        <slot name="header" />
        <slot />
    </div>
</template>

<style scoped>
.alert {
    --base-gutter: 0.4rem;
    padding: calc(var(--base-gutter) * 2);
    border: 1px solid #ffea2a;
    background-color: #fff48d;
    border-radius: var(--base-gutter);
}

h1 {
    font-size: 1.8rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    margin-bottom: calc(var(--base-gutter) * 2);
    margin-top: 0;
    padding-bottom: calc(var(--base-gutter) * 2)
}
</style>
```

```vue
<Alert>
    <template #header>
      <h1>Hi there!</h1>
    </template>
    This is some warning for the user from the system.
</Alert>
```
This of course won't work. If you look at what CSS was generated, you'll find this selector.

```css
h1[data-v-3f4a8ec2] {
   // our h1 styles
}
```
This would work if we would have the `<h1>` tag in our component and only its text content coming in via a props, but for whatever reason we don't want to do that.

To make this work we can change our component's CSS like so:

```css
:slotted(h1) {
    font-size: 1.8rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    margin-bottom: calc(var(--base-gutter) * 2);
    margin-top: 0;
    padding-bottom: calc(var(--base-gutter) * 2)
}
```

Now it works! And what's even cooler is, if that you add another style block to the `<styles scoped>`...

```css
h1 {
    color: red
}
```
...and a this line of code to the template.

```html
<h1>I'm hard coded in the component</h1>
```

You'll see that the `<h1>` we pass through the `#header` slot doesn't get red, while it's rules won't affect the "hard-coded" `<h1>`.

If you are wondering how Vue.js does this, it's very easy. The difference in the rendered output is literally one character.

```css
h1[data-v-3f4a8ec2] {
  // styles for the tag inside the component
}
```

```css
h1[data-v-3f4a8ec2-s] {
  // styles for the tag coming from the slot
}
```
The generated `:scoped()` selector gets an extra `-s` appended to the file name hash that's used to scope elements inside the components.

### Global styles

The `:global()` combinator provides an escape hatch from the scoped styles. A good use case for this would be if you have some page identifier class on the main `<body>` tag, which is normally out of scope of your Vue application, but you want to keep your styles that hook into these classes inside your page components.

```vue
<style scoped>
.App {
  color: #000;
}

:global(body.home-page) {
  background-color: antiquewhite;
}
</style>
```

Also note that this could be achieved by adding two `<style>` tags in your SFC, one with the `scoped` attribute and one without it.

```vue
<style>
body.home-page {
  background-color: antiquewhite;
}
</style>

<style scoped>
.App {
  color: #000;
}
</style>
```

### JS-in-CSS the Vue way

This last one is the most exciting and solves a lot of the use cases for which you would have had to turn to CSS-in-JS libraries like [vue-emotion](https://github.com/egoist/vue-emotion) in the past.

You can use the v-bind directive as a CSS value and extrapolate any JS value inside the `<style>` tag of the SFC just as you would in your `<template>`.

This is great for every use case where you want your styles to react directly to some user input or state change without having to write a bunch of predefined classes.

To demonstrate how powerful this feature is, I've added a small demo with a color picker.

{% embed https://stackblitz.com/edit/vitejs-vite-va5yn3?embed=1&file=src/App.vue %}

If you look at the rendered code you'll see that Vue.js is generating CSS custom properties that are inserted into inline styles and then they cascade down the component.

```html
<div data-v-45e5ffe2 style="--45e5ffe2-color:rgb(230, 74, 25);">
    <div data-v-45e5ffe2>
        <div class="vc-color-wrap transparent" data-v-11bd4fe5="">
            <div class="current-color" data-v-11bd4fe5 style="background: rgb(230, 74, 25);"></div>
        </div>
    </div>
    <p class="example" data-v-45e5ffe2>Click on the square to select a color!</p>
</div>
```

```css
.example[data-v-45e5ffe2] {
    color: var(--45e5ffe2-color);
}
```

I hope you've found this post useful and it will help you write CSS more effectively in your next Vue.js project!