<commit_before>+++
date = "2018-04-01T13:45:21+02:00"
title = "Vue.js Application Structure and CSS Architecture"
description = "Learn about 3 ways of how to structure the CSS in a Vue.js project and the pros and cons of certain architectural decisions."
intro = "In recent days, I thought a lot about structuring large scale component based applications. Oftentimes, at the beginning of a project, everything seems to be easy. You build a couple of components, put them together and without too much effort you've implemented the first feature of your application in a reasonable amount of time..."
draft = false
categories = ["Development"]
tags = ["JavaScript", "Vue", "CSS Architecture", "Sass"]
+++

In recent days, I thought a lot about structuring large scale component based applications. Oftentimes, at the beginning of a project, everything seems to be easy. You build a couple of components, put them together and without too much effort you've implemented the first feature of your application in a reasonable amount of time.

Deceived by the project's rapid progress, you think, now that you already have a bunch of components, developing the next feature must be even easier and faster. But more often than not, it's more complicated than that. You realize that the components you've built, are not that generic as you thought they are. Sometimes you think you can reuse a component fairly easy only to find out that in this particular case, the component should look or work a little different than it does.

In this article, I want to take a closer look at three different approaches of how to structure a component based Vue.js application. We'll build one and the same application in three different ways and we'll find out the pros and cons of every version of the application.

## 1. Few components + Sass Mixins

The first approach we want to investigate is using **very few Vue.js components but a lot of reusable Sass Mixins** for styling recurring elements of our application.

### Hypothesis

Although Vue.js tends to be very fast, large scale applications consisting of a large number of components, can still become slow. **By using fewer components and instead utilizing Sass Mixins for consistent styling, we can save on the number of components** (e.g. a button doesn't have to be a component, but can be styled with a Sass Mixin).

Also we expect it to be easier to deal with cases when something looks (almost) exactly as something else, but it works (a little) differently; with this approach we're able to create two components, each doing different things, but sharing the same look without having to duplicate the CSS, thanks to the Sass Mixin.

### Example

To keep this article concise, I will only show a few examples here. You can [take a look at the application running on Netlify](https://vue-css-architecture-sass-mixins.netlify.com/) and you can find [the complete code on GitHub](https://github.com/maoberlehner/vue-application-structure-and-css-architecture).

```html
<template>
  <div :class="$options.name">
    <div :class="`${$options.name}__hero`">
      <h1 :class="`${$options.name}__heroHeadline`">
        Welcome!
      </h1>

      <div :class="`${$options.name}__heroIntro`">
        <p>
          Lorem ipsum dolor sit amet, <router-link<commit_msg>Improve phrasing<commit_after>+++
date = "2018-04-01T13:45:21+02:00"
title = "Vue.js Application Structure and CSS Architecture"
description = "Learn about 3 ways of how to structure the CSS in a Vue.js project and the pros and cons of individual architectural decisions."
intro = "In recent days, I thought a lot about structuring large scale component-based applications. Oftentimes, at the beginning of a project, everything seems to be easy. You build a couple of components, put them together, and without too much effort you've implemented the first feature of your application in a reasonable amount of time..."
draft = false
categories = ["Development"]
tags = ["JavaScript", "Vue", "CSS Architecture", "Sass"]
+++

In recent days, I thought a lot about structuring large scale component-based applications. Oftentimes, at the beginning of a project, everything seems to be easy. You build a couple of components, put them together, and without too much effort, you've implemented the first feature of your application in a reasonable amount of time.

Deceived by the project's rapid progress, you think, now that you already have a bunch of components, developing the next feature must be even easier and faster. But more often than not, it's more complicated than that. You realize that the components you've built are not that generic as you thought they are. Sometimes you think you can reuse a component fairly easy only to find out that in this particular case, the component should look or work a little different than it does.

In this article, I want to take a closer look at three different approaches of how to structure a component-based Vue.js application. We build one and the same application in three different ways, and we find out the pros and cons of every version of the application.

## 1. Few components + Sass Mixins

The first approach we want to investigate is using **very few Vue.js components but a lot of reusable Sass Mixins** for styling recurring elements of our application.

### Hypothesis

Although Vue.js tends to be very fast, large scale applications consisting of a large number of components, can still become slow. **By using fewer components and instead utilizing Sass Mixins for consistent styling, we can save on the number of components** (e.g. a button doesn't have to be a component, but can be styled with a Sass Mixin).

Also we expect it to be easier to deal with cases when something looks (almost) exactly as something else, but it works (a little) differently; with this approach we're able to create two components, each doing different things, but sharing the same look without having to duplicate the CSS, thanks to the Sass Mixin.

### Example

To keep this article concise, I will only show a few examples here. You can [take a look at the application running on Netlify](https://vue-css-architecture-sass-mixins.netlify.com/) and you can find [the complete code on GitHub](https://github.com/maoberlehner/vue-application-structure-and-css-architecture).

```html
<template>
  <div :class="$options.name">
    <div :class="`${$options.name}__hero`">
      <h1 :class="`${$options.name}__heroHeadline`">
        Welcome!
      </h1>

      <div :class="`${$options.name}__heroIntro`">
        <p>
          Lorem ipsum dolor sit amet, <router-link
{'fraction_non_alphanumeric': 0.06796556411418214, 'fraction_numerical': 0.00664552182449781, 'mean_word_length': 4.4013050570962475, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 17, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4263037', 'n_tokens_mistral': 1721, 'n_tokens_neox': 1625, 'n_words': 963}