Global and Scoped CSS
in Vue
In this video you will learn how to write global and scoped CSS in Vue. Vue gives us a nice possibility to avoid writing styles globally out of the box.
Introduction
Hi I'm Oleksandr Kocherhin from monsterlessons-academy, where I'm teaching you how to become a developer or improve your skills of being a developer in learning by doing way. And if you are new here don't forget to subscribe and I will link everything that I'm mentioning in the description.
And just to remind you this video is a part of free series "Vue for beginners"
So let's get started.
Content
In previous video we successfully created our UsersList component and rendered our data inside. But how we can style our component? For this in Vue we have a stype part inside our component. Let's create a new class for each user and add it.
<div v-for="user in users" :key="user.id" class="user"></div>
<style>
.user {
border: 1px solid red;
}
</style>
As you can see it looks almost like plain css. If we check in browser there is a global class user that is applied to our element. This is how you can write global styles in Vue and this is how I never recommend to write styles.
What we want to do is writing our styles in isolation. Now if we create other component and .user class inside, we will get an override of the class because our styles are global. And this is the huge problem of css. To avoid this problem Vue allows us to make our css isolated and only valid for this component.
To achieve that we need to add scoped attribute to our styles section.
<style scoped>
.user {
border: 1px solid red;
}
</style>
As you can see everything is working as before but we have a special class notation now. There is an attribute which helps this class to become unique. This is just some unique id which is generated by Vue and we don't see it in the code at all. But now we simply write styles as always and we should not think if our styles are unique or will we have name collisions at all.
This is why I always recommend you to put scoped attribute in every component and never ever write global styles because normally you can implement any Vue project just with scoped styles.
Now let's add some nice styling for our users.
.user {
font-size: 18px;
border-bottom: 1px solid grey;
padding: 10px;
display: flex;
justify-content: space-between;
}
Call to action
As you can see Vue gives a possibility to work with CSS in easy and isolated way. Just don't forget to put scoped attribute in your every component and you are good to go.
If "Vue for beginners" is too easy for you go check my advanced course about Vue which is going 10 hourse and where we are creating together the application from empty folder to fully finished application. I will link it in the description below as well as my other courses.
If you find this video helpful, don't forget to subscribe to this channel and hit subscribe button. And I see you in my next video.