# Styles

We use a combination of `scss` and `css-modules` for our styles by adding the `lang="scss"` and `module` attributes to `<style>` tag:

```markup
<style lang="scss" module>
.link {
  width: 10px;
}
</style>
```

We also enforce strong [linting of styles](/wemake-vue-template/linting.md#styles) to keep it consistent and find possible errors early.

## Global CSS

If you want to use any global `css` here's what you need to do:

1. Install the library you need: `npm run add normalize.css`
2. Add the file path to `css` property of [`nuxt.config.ts`](/wemake-vue-template/configuration.md#nuxt-config-js)

It will look something like so:

```javascript
  /**
  * Global CSS
  */
  css: [
    'normalize.css/normalize.css'
  ],
```

This file will be included in the final build.

### Layout specific styles

Every layout in `client/layouts/` is not scoped or bundled in a module. It is required to drop some global styles for all components that are using this layout.

## SCSS

We use [`scss`](https://sass-lang.com/guide) to write components' styles. Because it is just like `css`. But better! You can just drop-in any plain `css` and it will work with no any other actions required.

`scss` is a preprocessor. It means, that `scss` get compiled to `css` later. And before it is compiled `scss` allows to use features that are missing from `css3` spec, including:

* [variables](https://sass-lang.com/guide#topic-2)
* [nesting](https://sass-lang.com/guide#topic-3)
* [mixins](https://sass-lang.com/guide#topic-6)

That's the bare minimum you need to know to productively use `scss`.

### Aliases and imports

We have a preconfigured `~/scss` alias inside [`nuxt.config.ts`](/wemake-vue-template/configuration.md#nuxt-config-js) to [import](https://sass-lang.com/guide#topic-5) local files. You can use it inside `Vue` components like so:

```markup
<style lang="scss" module>
@import "~/scss/variables";

.component {
  color: $imported-color-from-variables;
}
</style>
```

Things to keep in mind:

* you don't have to specify a file extension or leading `_`, this will be considered as a linting error
* do not import modules that produce `css` output, it will pollute your stylesheets with multiple declarations
* do not import external `css` libraries, use `nuxt.config.ts` for that

## CSS Modules

Every `Vue` component should be a [`css` module](https://github.com/css-modules/css-modules). How does it work?

The main idea is:

* to rename your classes to some **unique** name during build time
* to make your `css` classes available from `js`

So, this:

```markup
<style lang="scss" module>
.component { ... }
.input { ... }
</style>
```

Will became this:

```javascript
this.$style = {
  'component': '_3hLE8Zr42CA8Iz_38AM4TJ_0',
  'input': 'VZZoxarQNkuSWSg1ftV1v_0'
}
```

Now you don't have to worry about naming your classes or binding them together with `Vue`. The future is now!

### Naming

When naming your `css` classes stick to [`camelCase`](https://github.com/css-modules/css-modules#naming), as it would be easier to call it inside your `Vue` component:

```markup
<template>
   <div>
      <p class="$style.camelCase"></p>
      <p class="$style['kebab-case']"></p>
   </div>
</template>

<style lang="scss" module>
.camelCase { ... }
.kebab-case { ... }
</style>
```

Also, keep in mind that all nested classes will be flattened for `$style` access:

```markup
<template>
   <div>
      <p class="$style.root"></p>
      <p class="$style.child"></p>
   </div>
</template>

<style lang="scss" module>
.root {
  .child { ... }
}
</style>
```

You can play around with [`:local` selector](https://github.com/css-modules/css-modules#exceptions) if you would like to make them nested.

### Exporting SCSS variables to Javascript

Imagine that you have to use your `scss` variable in `vue`. Sounds like a nightmare? No, that's not. Imaging exporting this variable:

```css
$grid-size: 15rem;
```

And use it like so:

```markup
<style lang="scss" module>
@import '~/scss/variables';

:export {
  $var-grid-size: $grid-size;
}
</style>
```

It would be available as `this.$style['var-grid-size']`. It might be useful for dynamic colors, grids, blocks, and tables.

## PostCSS

After we have created all our styles they are processed by a [post-processor](https://github.com/postcss/postcss). Why? Because it is easier to make optimizations on this step.

It comes [bundled](https://nuxtjs.org/api/configuration-build#postcss) with `nuxt`. What kind of custom optimizations or plugins do we use?

* [`css-mqpacker`](https://www.npmjs.com/package/css-mqpacker) - which allows

  to combine all `@media` queries into one block for better performance

These optimizations are applied by `webpack`. You don't have to run them manually.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wemake-services.gitbook.io/wemake-vue-template/styles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.