Why You Don't Need Vue Scoped CSS !

In Vue.js there are a lot of ways to work with CSS. In this video we take a look at Vue.js Scoped CSS, CSS Modules, Deep selectors, global selectors and dynamic CSS! #vuejs
👉Check out my last video on advanced Vue Components
• Vue.js Advanced Compon...
👉 Sign up and get free Vue cheat sheets and updates!
www.vuecourse.tech/
Need some mentoring, help with a project, get a career in tech, level up your skills? Check it out
👉mentorcruise.com/mentor/erikh...
Need to Learn Vue or Nuxt? Check out my courses below!
bit.ly/2OETt0M - Full 6 Module course on vue!
bit.ly/2LalQka - Learn Nuxt.js Course!
bit.ly/3aiYe8s - Quick Starter On Vue 3
🗂️ 🗂️ 🗂️
0:00 Introduction
0:32 App Setup
02:53 Style Scoped
04:45 Global Selector
06:55 Deep Selector
08:45 CSS Modules
10:53 Dynamic CSS
Links

[@psybitcoin]

Can you do a video on Vue Clean Architecture? Thanks Erik!

[@ProgramWithErik]

Sure! I’ll add it to my list

[@cokis]

Up

[@marcosmoralesrodrigo9963]

This video definitely touched some tricks I didn't know and I'm glad I watched it to the end. Thank you Erik!

[@everythingisfine9988]

I used css modules with react. One of many positives of vue is scoped css. Little less work vs using css modules. And every little bit counts.

[@brandonleichty]

Thanks for continually pumping out great videos!

[@ProgramWithErik]

You are welcome !

[@TheRvh70]

Hey Erik, first of all congrats on 100K. I kinda wish there was a video on you channel on bringing a Vue app to production (let's say S3 + cloudfront, since I know you're over at AWS). So the whole deployment side of things. I've been working on smoothing out our deploy process in my job and I've got a pretty good setup now. Happy to share some of my deployment architecture if you need ideas 😉.

[@emmanuelehis1194]

This is mind blowing. Cooooool! Thanks for the tech talk!!

[@PabloMartinezfr]

Amazing Tutorial

[@rey6253]

A lot of info i did not even know they existed in the first place, thanks a lot 😊

[@baka_baca]

Good to see some of the alternatives to getting the styles you want in Vue. ::v-deep and scoped are nice and all, but working in a larger application I've also had them cause me plenty of headaches while trying to debug why styles aren't working like I thought they should be.

[@akad1981]

Awesome! Thanks!

[@glowiever]

nice ide setup. wish you'd make a video on it.

[@m-fusion]

Hi. What’s the name a plug-in for highlights active tab ?

[@CrazyCodingChannel]

Interesting material, thx!

[@aminealoulou]

Thank you for this video. CSS custom properties could be a powerful way to make components styles customizable by consumers.

[@koknineexclusive370]

Congratulation 100K Subscribes :D

[@aleksas_codebook]

Unrelated to the topic of the video, what's the name of that VS theme ? It looks amazing. :)

[@virtuoz-ru]

Спасибо Ерик

[@VincentDECAUX]

I am so happy we decided to migrate on classical scss files. But I am so surprised young developers have so many difficulties to handle good CSS. Is it so bad to not use these style scoped / module ... ? Syntax is terrific and I still think a JS framework is a ... JS framework

[@samuelnmeje]

This could easily get confusing. But it cool to know there are other ways.

[@ProgramWithErik]

Yes!

[@aslamh]

I’ve been working with with css module for a year. The only reason i use css module is that compiled classes look cool 😂. Other than that css module suvk. At least for me. Now use i tailwind and never look other. Tailwind is so good if not hard to read tailwind i think the best.

[@stefanosgiannakis7151]

Gold

[@purpleAiPEy]

… you can v-bind css? Whoopsies guess I missed that lesson.. thanks!

[@possumkeys]

You can vbindalmost any attribute.

[@purpleAiPEy]

@@possumkeys good to know! i just always looked at style tags as forbidden entities untouchable, but i guess the files are VUE ..

[@mattbagot1236]

"a very poorly named component..." hahaha! hilarious. btw, what theme are you using??

[@ProgramWithErik]

Yup Synthwave ! I believe it works in Mac too…

[@ayitinya]

Does he always put "not as good as Kevin Powell" or this is the first time

[@ProgramWithErik]

Haha that’s the Easter egg, first time! Haha

[@nested9301]

there is alot of things to learn in vue unlike react it's limited

[@wolfisraging]

1st time 1st

[@cesswhite]

you dont need CSS if you have Tailwindcss, :P jk, thank you Erik!

[@psybitcoin]

@Randy Ainsworth Vuetify is nowhere near Tailwind

[@SvingitGolf]

Quasar is the way... 😉🙂

[@ProgramWithErik]

Ha!

[@gab_shirohige]

Poor practices here, ladies and gentlemen..

[@rajikkali2381]

Ah yes, Hitler's famous book: 'My Comp"

[@squiggleturtle]

Are CSS modules globally available?