DEV Community: Frida Nyvall

CSS Special Effects Summary

Frida Nyvall — Fri, 28 Aug 2020 08:45:16 +0000

Blend-modes, filters and backdrop-filters can be used in CSS to create special effects similar to effects in image editing software programs.

The pros of using CSS to create these effects are:

Ease of use for website administrators, who does not need to know how to create or edit special images.
Since less specialty knowledge is needed, more junior members of staff can edit and update the website. This can help the company use its personnel more effectively and ultimately save money.
Improved website performance since many of the effects previously was only obtainable through images. When created with CSS instead, the website page load will decrease.

When to Use Which Effect

Blend-modes

Use blend-modes to create effects by blending multiple elements or backgrounds. background-blend-mode blends background images, gradients, and colors. mix-blend-mode is for blending different elements with their surroundings and can also be used with pseudo-elements.

See the article “Blend Modes in CSS” for more details about background-blend-mode and mix-blend-mode.

Filters

Use filters to add effects to a single element. backdrop-filter is used to apply the filter to an elements background, while filter applies the effect to the whole element.

It is possible to define your own filters in SVG for even more custom effects. Just keep an eye out for a bug that (at the time of writing) might prevent linking to external SVG file filters in Chrome.

See our blogposts “CSS backdrop-filter” and “CSS Filter” for more details.

CSS Filter

Frida Nyvall — Fri, 28 Aug 2020 08:42:02 +0000

Use filters to add effects to single elements. Filters share the same syntax and options as backdrop-filter.

Just as with backdrop-filter, it is possible to use more than one filter on an element by adding additional filters:
filter: blur(5px) hue-rotate(90deg);

Examples of different filter effects applied to a photo.

CSS Filter Values

Blur: applies a Gaussian blur and works similar to blurring effects in graphical software programs. Takes a length value. Increasing the value increases the blurring effect. Example: filter: blur(5px);
Brightness: Takes a number or percentage value. filter: brightness(100%) or brightness(1) is the normal brightness. Values below 100% or 1 will make the element darker, and values above 100% or 1 will make the element brighter.
Contrast: takes a number or percentage value, where filter: contrast(100%) or contrast(1) is the starting point resulting in an unaltered element. Increasing the value means increasing the contrast.
Drop-shadow: takes 3 length values controlling offset-x, offset-y, and blur-radius (in that order), and a color at the end. Example: filter: drop-shadow(2px 3px 4px black); Compared to box-shadow, drop-shadow can provide hardware acceleration for some browsers, resulting in slightly better performance. The most important benefit however, is that drop-shadow has the ability to restrict the shadow to follow the edges of the visible element rather than the edges of its bounding box. The effect can be applied to for example SVGs, images, linear backgrounds as well as clipped or masked elements. See “Drop-shadow the underrated CSS filter” by M. Barker for examples.
Grayscale: takes a number or percentage value. Any number above 100% or 1 leads to a complete black-and-white result. 0 or 0% means no black-and-white filtering is applied, and anywhere from 0 or 0% to 1 or 100% means applying a partial black-and-white filter.
Hue-rotate: takes an angle that represents how much the hue should change. Example: backdrop-filter: hue-rotate(45deg); Degree values range from 0 to 360, where 0 is red, 120 is green and 240 is blue. Negative values or values above 360 are also accepted, although since the values represent degrees around the color circle those numbers will have equivalents within the range 0 to 360.
Invert: takes a number or percentage. 0 or 0% means no effect is applied. 1 and 100% means a totally inverted effect.
Opacity: takes a number or percentage between 0 to 1 and 0 to 100%. When using opacity with filter instead of the usual opacity property, some browsers can benefit from hardware acceleration for better performance.
Sepia: takes a number or percentage between 0 to 1 and 0 to 100%, where a lower number indicates a fainter sepia-tone level.
Saturate: takes a number or percentage, where a lower number means lower saturation and a higher number increases saturation. 1 or 100% is the starting point resulting in an unchanged element.
None, inherit, initial, unset: There are also the values none, inherit, initial, and unset to control inheritance, reset or remove any existing setting.
SVG filters: use your own SVG filter for a custom effect. Example: filter: url(filters.svg#filter); There is a bug that prevents linking to external SVG file filters in Chrome. Even though linking to external SVG file filters might work at some point in the future, the recommendation is to link to filters in the same HTML document using inline styles. Another alternative to avoid using inline styles in the HTML document is to just reference the SVG filter ID (which still has to be placed in the HTML file) in the CSS file: filter: url(#duotone);

Browser Compatibility

Filter effects are (at the time of writing) supported in 96% of all browsers globally. It is not supported in Internet Explorer or Opera Mini.

Using filter effects on SVG objects has a global compatibility percentage of 98%, including support in Internet Explorer 10 and 11.

Filter Online Tools

CSSfilters.co, is a website where users can upload photos and recreate Instagram filters using presets from CSSGram.

RGBA to feColorMatrix is a website where users can create their own SVG filters based on RGBA colors.

CSS backdrop-filter

Frida Nyvall — Fri, 14 Aug 2020 09:42:45 +0000

Backdrop-filter is as the name implies used for adding a filter on an element’s backdrop. It is similar to and shares the options of the CSS property filter.

Backdrop-filter is mostly known for making it possible (finally) to create a frosted glass effect just using CSS.

Example of Frosted Glass Effect:

Apart from the popular blur setting, there are several other effects. More than one effect can be used simultaneously by adding each effect after one another:

.classname{
    backdrop-filter: brightness(150%) saturate(150%) blur(5px);
}

NOTE: To see the effects, there have to be some transparent (or partially transparent) parts of the element. No effects will be visible if the element for example has a solid background-color or background-image.

Backdrop Filter Values

Blur: takes a length value, much like blurring effects in graphical software programs. Example: backgroup-filter: blur(2px);
Brightness: takes a number or percentage value. backdrop-filter: brightness(100%) or brightness(1) is the normal brightness. Anything below 100% or 1 will make the area darker, and any number above 100% or 1 will make the area brighter.
Contrast: takes a number or percentage value. backdrop-filter: contrast(100%) or contrast(1) is the normal contrast. Anything below 100% or 1 will lower the contrast, and any number above 100% or 1 will increase the contrast.
Drop-shadow: takes 3 length values controlling offset-x, offset-y and blur-radius (in that order), and a color at the end. Example: backdrop-filter: drop-shadow(4px 4px 10px blue); However, since it will only show outside of the parent container, the result of this setting might be difficult to predict. An example by A.Montoro can be viewed on Codepen.

Ana Tudor 🐯

@anatudor

Dumb CSS question: what does `backdrop-filter: drop-shadow()` even do?

Because it really doesn't seem like it does anything at all
¯\_(ツ)_/¯

codepen.io/thebabydino/pe…

14:34 PM - 08 Jun 2020

0 15

Grayscale: takes a number or percentage value. Any number above 100% or 1 leads to a complete black-and-white result. 0 or 0% means no black-and-white filtering is applied, and anywhere from 0 or 0% to 1 or 100% means applying a partial black-and-white filter.
Hue-rotate: takes an angle that represents how much the hue should change. Degree values range from 0 to 360, where 0 is red, 120 is green and 240 is blue. Negative values are also accepted. Example: backdrop-filter: hue-rotate(45deg);
Invert: takes a number or percentage. 0 or 0% means no effect is applied. 1 and 100% means a totally inverted effect.
Opacity: takes a number or percentage between 0 to 1 and 0 to 100%. It seems like the effect can only be seen when it is also paired with for example a mix-blend-mode. When using backdrop-filter opacity with mix-blend-mode it is also possible to work with background-colors and colors that are not semi-transparent.
Sepia: takes a number or percentage between 0 to 1 and 0 to 100%, where a lower number indicates a fainter sepia-tone level.
Saturate: takes a number or percentage, where a lower number means lower saturation and a higher number increases saturation.
None, inherit, initial, unset: There are also the values none, inherit, initial, and unset to control inheritance, reset or remove any existing setting.
SVG filters: It is possible to add a URL to an SVG filter to use as well. Example: backdrop-filter: url(filters.svg#filter); There is a bug in filter that prevents linking to external SVG file filters in Chrome, that might also impact backdrop-filter. Even though linking to external SVG file filters might work at some point in the future, the recommendation is to link to filters in the same HTML document using inline styles.

<!--HTML-->
<div class="frosted-glass-parent">
    <div class="frosted-glass-child" style="backdrop-filter: url(#duotone);">
        <p>Frosted Glass Effect</p>
    </div>
</div>

Another alternative to avoid using inline styles in the HTML document is to just reference the SVG filter ID (which still has to be placed in the HTML file) in the CSS file:

.classname{
    backdrop-filter: url(#duotone);
}

Areas of Use

Just like with blend-modes and filters, backdrop-filters are useful for adding enhancements and effects that are uniform and does not require website administrators to know how to edit images in an image editing software program.

Browser Support

Backdrop-filter is at the time of writing supported in about 86% of all modern browsers.

Support is missing from Internet Explorer as well as from a handful of mobile browsers. Most importantly, the feature is behind a flag in Firefox, meaning users will have to enable it manually for it to work. Since the normal user will probably not have done this, it is important to have sufficient fallbacks when using this feature in production.

One way of creating fallbacks is to use @supports queries for browsers where such queries work. Browsers where @support queries does not work will need special treatment in the form of separate, additional fallback styling served specifically to them.

How to Allow the Feature in Firefox:

Enter about:config in the URL input bar.
Accept that you are now going to alter important settings.
Search for backdrop-filter in the search bar.
Click on the arrows to toggle true/false.
Apart from allowing backdrop-filter, there is also a bug that requires you to also to set gfx.webrender.all to true.
After changing the settings, restart Firefox.

Blend Modes in CSS

Frida Nyvall — Fri, 05 Jun 2020 08:56:36 +0000

Being able to blend background images and HTML elements is not a new technology. However, as global browser support nowadays is slightly above 90% world-wide, these techniques have become increasingly accessible for most users.

TL;DR: Skip the theory and go straight to the image examples!

What are Blend Modes?

Blend modes in CSS are used to blend two or more layers using mathematics to calculate the color value for every pixel. You can use blend modes on both images, gradients, and solid-colored elements. Those familiar with graphical software programs like Photoshop will recognize some of the blend modes available.

Why Use Blend Modes?

Blend modes are useful for creating visual enhancements while still utilizing HTML elements. This is great for SEO and performance. It also makes it easier to create coherent image and text styles, without requiring skills in image editing software programs.

Using blend modes, website administrators can create visual effects with dynamic content without having to rely on or create specific image content. Creating images also takes time and requires skills in image editing software (like Photoshop). If more employees can help editing because fewer skills are required, it will be easier, faster, and cheaper to edit the website.

Being able to avoid using text as part of images is also beneficial for SEO as well as site performance (since images are always heavy resources to load compared to a few lines of code).

background-blend-mode

Blends the background of an element. An element can simultaneously have background images, gradients and colors set to it. Using background-blend-mode, these layers will get blended with each other. The way layers are blended is decided by one or more (comma separated) background-blend-mode values.

<!--HTML-->
<div class="example"></div>

/*CSS*/
.example{
    background: url('your-image.jpg'),
                linear-gradient(to bottom, red, blue),
                green;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: luminosity, screen;
    width:500px;
    height:500px;
}

The order layers are blended seems to be from the first defined background value, which is also the “top” layer. In the above example, the background image will be blended with the linear gradient using the luminosity blend mode value. The color green will then be blended with the result of the image and the gradient, using the screen blend mode value.

NOTE: If the number of background-blend-mode values does not match the list of background images, gradients, or colors set on an element, the background-blend-mode values will be repeated or removed to make the lists match.

Blend Mode Values

Color: combines the hue and saturation of the overlapping layer with the luminosity of the bottom layer. It can be used to add color or tint to images.
Color-burn: makes the overlapping area darker unless white is used.
Color-dodge: makes the overlapping area brighter unless black is used.
Darken: uses the darkest value of the colors to be blended.
Difference: subtracts the darker of the colors to be blended from the lighter one. Using white inverts the color of the overlapping area. Using black nothing will change.
Exclusion: is similar to difference, but with lower contrast. Using white inverts the color of the overlapping area, and using black nothing will change.
Hard-light: multiplies or screens the colors, depending on the colors of the overlapping layer. Similar to overlay, but with the layers swapped.
Hue: combines the hue from the overlapping layer and the saturation and luminosity of the other layer.
Inherit: any value inherited from a parent element.
Initial: the initial, default value
Lighten: uses the lightest values of the colors to be blended.
Luminosity: inverting the effect of the color mode: similar to color, but with the layers swapped. The result has the luminosity of the top layer, with the hue and saturation of the bottom layer. Used to make monochrome tinted images.
Multiply: the color values of the layers are multiplied with each other. Colors multiplied with black produces black. Multiplying a color with white renders the original color.
Normal: no fancy effect happening. This is like stacking the elements with no blending mode applied.
Overlay: uses either multiply or screen, depending on the colors of the two layers. Similar to hard-light, but with the layers swapped.
Saturation: blends the saturation of the top with the hue and luminosity of bottom layer. If used on an area that has no saturation (is grey), nothing will happen.
Screen: inverts the colors, multiplies them and inverts the resulting value. Using screen on any color with white renders white. Using with black results in the original color. Compare with multiply.
Soft-light: darkens or lightens the colors, depending on the colors of the overlapping layer. Similar to hard-light, but softer.
Unset: global value, resetting the property to fallback to inherit (if the property will inherit from its parent) or initial.

Since there are so many different blend modes available, and the fact that they can be used simultaneously on multiple background layers makes it possible to create a lot of visual effects. Sometimes the best way to find a suitable effect is simply to try different combinations.

FilterBlend is a free online tool to play around with different effects.

CSS Blender by Sara Soueidan is another online demo tool.

There is also a more general map of the blend modes and their visual impacts at Mozilla.

mix-blend-mode

Just as background-blend-mode blends background images, gradients, and colors, mix-blend-mode is for blending different elements with their surroundings. mix-blend-mode can also be used with pseudo-elements, which makes it even more practical for creating visual effects.

Typically, this can be used when you need to change the color of an element depending on the colors of its background.

Thankfully, mix-blend-mode takes the same values as background-blend-mode.

Isolate Elements: Prevent Elements from Blending

Sometimes it can be required to prevent an element from blending. This can be done by setting isolation: isolate; on a parent wrapper around the element you want to prevent from blending.

Isolation is not needed for background-blend-mix, since all the blending is supposed to take place within the element itself.

NOTE: You can achieve the same result of not blending an element if the overlapping element is placed in a parent with opacity lower than 1.

Browser Support

background-blend-mode is supported in all modern browsers, with a global support of about 93%. background-blend-mode is not supported in Internet Explorer or older versions of Edge (versions 12-18). iOS Safari might not support multiple background-blend-modes.

mix-blend-mode has a global support of around 91% (for HTML elements, or blending HTML and SVG, significantly less for only SVG) and is supported in most modern browsers. The feature is not supported in Internet Explorer or older versions of Edge (versions 12-18). Support is reported as “unknown” for some less popular browsers (like Opera Mini).

Blend Mode Examples

The amount of effects that can be achieved using all the capabilities of blend modes is of course mind-bogglingly large. However, some are more common than others.

Tinting an image

Tinting an image with a color of your choice. This helps reduce the time spent on image editing. Employees with no image editing skills can update the images.

Blending multiple images

Making two or more images blend artfully.

Knockout Text and Overlapping Text

Useful for improving SEO since the text does not have to be included in the image. Can help improve performance if the image can be made smaller when not having to incorporate text. This helps reduce the time spent on image editing.

Importing Styles to Component Style Tags in Nuxt.js

Frida Nyvall — Fri, 07 Feb 2020 10:47:13 +0000

In Vue.js projects, there are different ways of importing styles to a project. See the article “Importing Style Files to Component Style Tags in Vue.js” for more info.

In Nuxt.js projects, there are similar ways of importing styles, however with some slight differences.

Importing Global Styles in Component Style Tags

Importing global styles to be used in component style tags. A convenient way of not having to import certain files manually every time for every component. This is meant for adding the type of SCSS files that contains mixins and variables that will not generate any output before they are being used in a context. This is because it will be added to each component’s CSS when imported.

Making this type of import has been made available natively in Vue.js, but Nuxt.js still seems to be in need of the style-resources plugin. In the project folder, run:
npm install --save-dev @nuxtjs/style-resources

Add the following to your nuxt.config file:

/*
  ** Nuxt.js modules
  */
  modules: [
    '@nuxtjs/style-resources'
  ],

  /*@nuxtjs/style-resources*/
  styleResources: {
    //array of strings that are paths to the file:
    scss: ['~assets/styles/globalvariables.scss']
  },

:src Imports

Importing separate style files in the style tag by using “src” imports seems to work the same for Nuxt.js as in Vue.js.

For example pages/subfolder/filename.scss can be used with for example pages/subfolder/index.vue. This works for normal as well as scoped style tags. Thanks to Georgiy Bukharov for also showing that it works with the module tag.

<!--Normal example-->
<style src="./filename.scss" lang="scss">
    //Note that any other styles here are ignored.
    //Only the styles in the src import are being used.
</style>

<!--Scoped styles-->
<style scoped src="./filename.scss" lang="scss">
    //Note that any other styles here are ignored
    //Only the styles in the src import are being used.
</style>

<!--CSS Module styles-->
<template>
   <p :class="$style.classname">Remember to add the classes with js.</p>
</template>

<!--Remember to add the '.module' suffix just before the file extension.-->
<style module src="./filename.module.scss" lang="scss">
    //Note that any other styles here are ignored
    //Only the styles in the src import are being used.
</style>

To read more about src imports in Vue, see the section “:src Imports” in the article “Importing Style Files to Component Style Tags in Vue.js”.

Start Setup

Note that both setup, plugins and framework are evolving. Changes will in time most certainly happen that make the techniques described in this post less relevant.

I’ve used create-nuxt-app version 2.10.0 to set up the project. When setting up the project, I chose NPM as package manager and jsconfig.json as development tool (only choice available and recommended for VS Code).

CSS Modules in Nuxt.js

Frida Nyvall — Sun, 02 Feb 2020 12:03:55 +0000

The second article in a series about working with CSS in Nuxt.js, this time focusing on how to use CSS Modules with Nuxt.

Just like in Vue.js, support for CSS Modules is provided out of the box in Nuxt.js projects. (To learn more about CSS Modules in Vue, see this article.)

To alter the generated class names, edit the nuxt.config.js file:

build: {
    /*
    ** You can extend webpack config here
    */      
    loaders: {
      cssModules: {
        modules: {
          //this is where you can alter the generated class names:
          localIdentName: "[local]--[Frida]_[hash:base64:4]",
        }
      }
    },
  },

In the example above, I’ve added my own name in the middle of the class name.

Add the module keyword to the style section of the component file:

<style module lang="scss">
    .moduleclass{
        color: green;
    }
</style>

Use CSS Modules by binding the class name using JavaScript in the template part of the component .vue file:

<template>
    <section>
        <h1 :class="$style.moduleclass">Contact</h1>
    </section>
</template>

It is also possible to use CSS Modules for just some and not all of the components in a project. Check out the documentation on how to set up opt-in usage.

Importing Module Style Files

In Vue.js projects, it is possible to put styles in a separate filename.module.css file and import it in the script tag of a .vue file. (See the article “CSS Modules in Vue.js” for more info.)

The same approach works for Nuxt projects:

<!--CSS Module styles-->
<template>
   <p :class="$style.classname">Remember to add the classes with js.</p>
</template>

<!--Remember to add the '.module' suffix just before the file extension.-->
<style module src="./filename.module.scss" lang="scss">
    //Note that any other styles here are ignored
    //Only the styles in the src import are being used.
</style>

Start Setup

Note that both setup, plugins and framework are evolving. Changes will in time most certainly happen that make the techniques described in this post less relevant.

Working with CSS in Nuxt.js

Frida Nyvall — Fri, 24 Jan 2020 18:41:07 +0000

The first part of a series of articles about working with CSS in Nuxt.js, showing different ways of adding CSS to a Nuxt.js project.

Main topics in this article are preprocessors, autoprefixing, CSS Source Maps , global styles and how to add a separate CSS file to the document head.

There are a lot of similarities with how CSS works in Vue.js (read the article series “Working with CSS in Vue.js”), however since the Nuxt.js project is set up slightly differently, there are also some differences.

Start Setup

Note that both setup, plugins and framework are evolving. Changes will in time most certainly happen that make the techniques described in this post less relevant.

Production Output

Unlike the default production setting in a Vue.js project, styles are not automatically output as a CSS file. The CSS output depends on the chosen setup.

Adding SASS/SCSS to a Nuxt.js project

Adding SASS/SCSS to a Nuxt.js project works just like for a Vue.js project. Install sass-loader and node-sass in your project:
npm install --save-dev sass-loader
npm install --save-dev node-sass

To read more about working with CSS in Vue.js projects, see the articles series starting with “Working with CSS in Vue.js”.

Autoprefixing

Autoprefixing is included in Nuxt.js and is handled by autoprefixer, which in turn relies on Browserslist.

To control which browser versions are included, you could create a separate browserslistrc config file, or add a setting in the package.js file. Place the setting after devdependecies:

"browserslist": "cover 99.5%" //or whatever settings you prefer

Prefixes are added to the CSS during development as well as for production.

CSS Source Maps

CSS source maps seem to be supported out of the box with the create-nuxt-app package. To also have CSS source maps in production, add the setting cssSourceMap: true to the nuxt.config file:

  /* Build configuration */
  build: {
    /* You can extend webpack config here */
   cssSourceMap: true,
  }

Note that for some reason, the source maps did not seem to work for me when testing in Mozilla Firefox. This closed bug thread suggests that extending the webpack configuration manually might do the trick. However note that the syntax of the suggested configuration differs from what is suggested in the nuxt documentation.

Global Styles

Global styles in the form of .css or .scss files can be added via the nuxt.config file.

  /* Global CSS */
  css: [
    '~assets/styles/global.css',
    '~assets/styles/globalscss.scss'
  ],

In that way, it is possible to set up an SCSS or CSS workflow that is completely outside of the style tags in .vue files or components, similarly to working without a framework.

Note that the variables declared in these files are not available in the .vue file style section. Classes declared in the global files are available to use in the template parts of .vue files, and can be overwritten in the .vue style section.

Output Separate CSS File

This corresponds to the setting css: {extract: true} in a vue.config.js file for a Vue.js project.

For a Nuxt.js project, add the line extractCSS: true to the nuxt.config.js file:

  /* Build configuration */
  build: {
    /* You can extend webpack config here */
    extractCSS: true,
  }

Note that this will also take scoped styles and place them in .css files to be linked in the document head. The .css files are not concatenated; each one is added separately for every scoped section.

To get all of the styles into one single .css file (and save some requests), use the Nuxt.js optimization setting splitChunks. splitChunks is a part of webpack, so the splitChunks webpack documentation is more detailed.

Adding External CSS to Document Head

Sometimes you want to add external CSS, like for example Google Fonts to your project. In Nuxt.js projects, you’ll find settings for this in the nuxt.config.js file. Add the link to your file in the link array in the head object:

  /* Headers of the page */
  head: {
    /* ...other things that will be output to the head element */
    link: [
      /* add your header links here, for example to favicon and Google Fonts*/
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Yrsa&display=swap'}
    ]
  },

Nuxt.js with ESLint in VS Code

Frida Nyvall — Sat, 18 Jan 2020 17:10:14 +0000

This is a short “note to self” type of article where a future me and perhaps someone else as well, might save some time googling for tooling configurations.

When setting up a Nuxt.js project with ESLint using create-nuxt-app version 2.10.0, I ran into this problem, where the project did not autofix on save.

I was not using Prettier so the error would stem from the ESLint integration solely. Since I had ESLint working in a previous Vue.js project out of the box, I decided to use those settings instead and installed the ESLint plugin used in the Vue.js project: npm install --save-dev eslint-plugin-vue

I then changed the VS Code settings.json file to:

{
    "eslint.validate": [
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "javascript",
            "autoFix": true
        },
        {
            "language": "javascriptreact",
            "autoFix": true
        }
    ],
    "eslint.autoFixOnSave": true,
    "editor.formatOnSave": true,
}

And made the following changes to the .eslintrc.js file, where I removed the nuxt eslint extensions and added one for vue instead.

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    //'@nuxtjs',
    //'plugin:nuxt/recommended',
    //'plugin:vue/recommended',
    'plugin:vue/essential',
    'eslint:recommended'
  ],
}

If you also need to add Prettier to your project, you might find some help in this post: "How to properly set up Nuxt with ESLint and Prettier in VSCode"

Importing Style Files to Component Style Tags in Vue.js

Frida Nyvall — Fri, 22 Nov 2019 10:43:20 +0000

Part four in a series of articles about working with CSS in Vue.js, discussing different ways of importing separate style files to .vue file style tags.

The examples are using SCSS. To read more about adding SCSS support to a Vue.js project, see the article ”Working with CSS in Vue.js”.

Importing Global Styles in Component Style Tags

Adding an automatic import of a file instead of repeating the same import in all of your component files can save time and effort.

Note that the code in the imported file should be such that it is only output when used (like scss mixins and scss variables). This is because it will be added to each component’s CSS when imported.

In earlier versions of Vue.js, a plugin called style-resources-loader was needed for this to work.

An Example Setup
In the src folder, add a new folder for your styles. Add any other SCSS files you want to use. An example might look like this:

Remember to import everything (mixins, variables) you want to distribute in your global.scss file:

@import './mixins/mixins';
@import 'variables';

Add the following code to your vue.config.js file, to link to your global.scss file:

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        data: `@import "~@/styles/global.scss";`
      }
    }
  }
}

In the file Component.vue style tag, you should now be able to use the styles defined in all of the files accessed in global.scss:

<style lang="scss">
.testclass{
  p{
    color: $primary;
    /* variable declared in src/styles/_variables.scss */
    @include fontSizePX(24);
    /* mixin declared in src/styles/mixins/_mixins.scss */
  }
}
</style>

Note:
Vue CLI v3 works with sass-loader v7 only at the moment. You can downgrade it for now by uninstalling sass-loader and installing the latest v7 version. To do this, run npm uninstall sass-loader and npm i --save-dev sass-loader@7.3.1.

Read more about this in the Vue CLI GitHub Issues.

With Vue CLI v4+ and sass-loader v8+, data will be renamed prependData in the vue.config.js file.

:src Imports

Another way of importing styles from a separate file is to write a src declaration in the style tag, referencing the style file you want to use.

For example you have a separate style file, Tipp.scss:

.tipp{
    text-transform: uppercase;
}

And a component file, Tipp.vue:

<template>
    <div class="tipp">
        <h2>Hello Tipp</h2>
        <!-- will be in uppercase -->
    </div>
</template>

<style src="./Tipp.scss" lang="scss">

</style>

This is handy if you want to keep your component styles in a separate file. It is also possible to put the component js code in a separate file and add it in the same way to the script tag in the .vue file.

When experimenting with this, it seemed like any additional styles declared within the component style tag were ignored. So the only styles active were the ones in the linked file. If I did a normal import inside the same style tag, as described in the following section, those styles did however work.

Normal SCSS Imports

Using normal import declarations for external style files work as well. In the file global-ui.scss:

.green{
    color: green;
}

$global-ui-darkred: rgb(136, 2, 2);

In Component.vue:

<template>
  <div class="darkred">
    <p class="green">I get style from file global-ui.scss imported</p>
    <!-- class declared in the imported file -->
  </div>
</template>

<style lang="scss">
@import "./src/styles/global-ui.scss";

.darkred {
  background-color:$global-ui-darkred;
  /*SCSS variable from the imported file*/
}
</style>

Setup

The starting code for this article is created by the Vue CLI command tool version 3.3.0 and Vue.js version 2.6.10. Note that both setup, plugins and framework are evolving. Changes will in time most certainly happen that make the techniques described in this post less relevant.

CSS Modules in Vue.js

Frida Nyvall — Fri, 15 Nov 2019 12:36:07 +0000

Part three in a series of articles about working with CSS in Vue.js, focusing on using CSS Modules in Vue.js.

In these types of javascript frameworks, it has become popular to use CSS Modules. It is a way of automatically creating unique class names, thereby preventing any possible style leaking or accidental cascading between elements.

Support for CSS Modules is already setup by default by the Vue CLI.

In the .vue file where you want to use CSS modules, add module to the style tag:

<style module>
  .hello{
    background-color: mistyrose;
  }
</style>

In the .vue file template, the class name is then added though javascript:

<div :class="$style.hello">

The $style prefix used in .vue file templates refers to any styles within the component (.vue file) style tag.

Targeting Elements Without Defined Class Names

For targeting HTML elements without defined class names like p or h1, you would have to make sure they are related to their parent for them to be included in the module class name output.

In the example below, the h3 style text-decoration underline will be added to the CSS as .hello-[modulename-identifier] h3. The h3 outside of the .hello block will not be included in the .hello-[modulename-identifier] block and therefore risk affecting other h3 tags outside of the module.

<style module>
  .hello{
    background-color: mistyrose;
  }

  .hello h3{
    text-decoration: underline;
  }

  h3{
    margin: 1em 0;
  }
</style>

Changing the Class Name

If you want to change the generated module class names, this can be done in the vue.config.js file:

module.exports = {
  css: {
    loaderOptions: {
      css: {
        localIdentName: '[local][Frida][hash:base64:8]'
        // camelCase: 'only' //optional setting for how the name is output
      }
    }
  }
}

In the example above, I’ve added my name Frida followed by a random string to make sure the name is unique.

Utilizing the Class Name

It is possible to use the expression $style.hello as a reference to the class name elsewhere within the vue component.

<p>Printing $style.hello: {{ $style.hello }}</p>

The code above will output: “Printing $style.hello: hello-[modulename-identifier]”

This can also be used to for example target the element using JavaScript, access and print out its styles or do any other operation. Because of the module naming convention, the class name acts like an ID meaning there will be just one element with this specific name.

Example: Outputting an Element Style

A very basic example where an element’s background-color is output.
In the .vue file template section:

<p>Output: {{ $style.hello }} background-color is: {{ dataBackground }}</p>
<!-- Output: hello-[modulename-indentifier] background-color is: #ffe4e1 -->

In the .vue file script section:

<script>
export default {
  data () {
    return {
      dataBackground: 'background'
    }
  },
  methods: {
    classNameBackground () {
      const elem = document.getElementsByClassName(this.$style.hello)[0]
      const compStyles = window.getComputedStyle(elem)
      const bg = compStyles.getPropertyValue('background-color')

      this.dataBackground = bg
      return bg
    }
  },
  mounted () {
    this.classNameBackground()
  }
}
</script>

In the .vue file style section:

<style module>
  .hello{
    background-color: #ffe4e1;
  }
</style>

CSS Modules :export

Another way of accessing information in the CSS style block is to use the :export feature in CSS Modules to export strings from the style tag:

<template>
    <p>{{ $style.primaryColor }}</p>
    <!-- Outputs: #ffe4e1 -->
    <p>{{ $style.displayAs }}</p>
    <!-- Outputs: some-string -->
</template>

<style module lang=”scss”>
  $primary-color: #ffe4e1;

  :export {
    primaryColor: $primary-color;
    displayAs: some-string;
  }
</style>

Note that the :export feature seems restricted to working with strings. To get a specific CSS style from a named class, it might be better to go the JavaScript route as per the example above.

Read more about the :export feature in the CSS Modules documentation, and more about CSS Modules in Vue, in the vue-loader documentation.

Importing Module Style Files

For when you want to place your CSS Module styles in separate files, rather than in the style tag in each .vue component file.

Create your style file and place it for example in the same folder as your component. Name it “filename.module.fileextension”. In my example, I’ve created the style file “HelloWorld.module.scss”. In HelloWorld.module.scss:

.imported{
    background-color:green;
}

Import the style file in the script tag of the component where you want to use it, in this example HelloWorld.vue. I found that I also had to add the import to data:

<script>
  import scssStyles from './HelloWorld.module.scss'
  export default {
    data () {
      return {
        scssStyles
      }
    }
  }
</script>

In the template part of your component, add the class by referencing the import name and the class name in the style file:

<template>
  <p :class="scssStyles.imported">
</template>

Make all CSS Files CSS Modules

If you want to be able to omit the extra “.module” in the file name, you can add this setting to the vue.config.js file:

module.exports = {
  css: {
    modules: true
  }
}

However setting modules to true will at the same time also cause all other style files to be working as CSS modules.

Note that the imported .module.scss file content is not available to the vue file component style tag, since the generated class names will differ. Also note that variables inside the imported file are not available to the component style tag. To achieve this, see the article “Importing Style Files to Component Style Tags in Vue.js”.

Setup

Adding CSS to a Vue.js Project

Frida Nyvall — Fri, 08 Nov 2019 16:04:14 +0000

This is part of a series of articles starting with “Working with CSS in Vue.js”. Focus in this article is on different ways of adding CSS to a Vue.js project.

Separate Global Style Files

If you prefer to keep your style files separate from the .vue files and their style tags, similar to a workflow without a framework, this can be achieved. Setting up the style files this way means the styling will be applied to your template sections, but not available in component style tags.

Note: For example, if you create a SCSS variable in your style file, it will not be recognized if you try to use it within a component style tag. To get global styles available in component style tags, see the article about importing global styles in component style tags.

Set up your folder and file structure for your style files, for example src/styles/style.scss. If you use a structure with folders, _filename.scss and SCSS imports, this will work provided you have added SCSS support. (See the article “Working with CSS in Vue.js” on adding SCSS support.)

In your main.js file, import your styles below the Vue import:

import './styles/style.scss'

Style Tags in Vue Files

The default version of handling CSS is to write your styles in the vue file style tags.

Styles written in this way are global. Styles defined here are available in the project’s other .vue files.

<style>
  /*…write your styles here*/
</style>

Scoped Styletags

Scoping means adding data attributes to the different classes to keep them from leaking styles to one another. Scoping is similar to CSS Modules (read more about this in the article “CSS Modules in Vue.js”).

Add “scoped” to the component style tag in the .vue file:

<style scoped>
  /*add scoped styles here*/
</style>

Style Cascading

If a child component has a class name that is shared by its parent component, the parent component style will cascade to the child. Read more about nesting with the deep selector in the documentation.

To target children of scoped parents, use:

.parent >>> child { /*styles*/ }

Which syntax works depends on which preprocessor is used. Possible syntaxes are also:

.parent /deep/ child{ /*styles*/ }

.parent ::v-deep child{ /*styles*/ }

Read more about this in the vue-loader documentation.

Setup

Working with CSS in Vue.js

Frida Nyvall — Fri, 01 Nov 2019 11:56:03 +0000

Frameworks like Vue.js offer many different ways of adding CSS to a web project. Compared to working without a framework, the framework build process is however often more complex.

This is the first part in a series of articles about working with CSS in Vue.js. The article is meant as a resource when it comes to the different ways of handling CSS in Vue.js. Main topics in this article are how to add preprocessors, autoprefixing and source maps.

Note that for production, Vue.js creates a separate css file that is linked in the document head. Read more about the Vue.js build process here.

Start Setup

The starting code for this article is created by the Vue CLI command tool v3.3.0. Run vue --version in the command prompt to see the version number. The Vue version is v.2.6.10. Run npm list vue in the command prompt to see the Vue version.

Note that both setup, plugins and framework are evolving. Changes will in time most certainly happen that make the techniques described in this post less relevant.

Adding SASS/SCSS to Vue.js

To add support for sass/scss, install sass-loader as a development dependency in the project folder by running: npm install --save-dev sass-loader in the command prompt.

Since sass-loader depends on node-sass, you will have to install that as well, by running: npm install --save-dev node-sass

Declare the language on styletags in .vue files: <style lang=”scss”>

Autoprefixing

Settings for autoprefixing can be found in package.json, provided you have chosen to use a package.json file when creating the project with Vue CLI. Read more about how to configure the browserlist settings.

CSS Source Maps

Add source maps by adding the following to the vue.config.js file. If the vue.config.js file hasn’t yet been created, you can create one and save it directly in the project folder.

/* vue.config.js */

module.exports = {
  css: {
    sourceMap: true
  }
}

Separate CSS file

A separate CSS file will be created when the project is built for production, and linked in the document head.

There is a setting in the vue.config.js file to also get a separate CSS file linked to the document head during development:

/* vue.config.js */
module.exports = {
  css: {
    extract: true
  }
}

It is set to false per default because setting it to true will interfere with hot module reloading. It is possible to set it to true, but then hot module reloading will not work.

Setting it to true during development also means source maps will point to the compiled CSS file, and not to the real individual sources. If you need more control over the code splitting, Vue docs points to a plugin: mini-css-extract-plugin.

Read more about the extract setting in the official Vue documents, as well as the official instructions about deployment.