Why I Love CSS Modules in Vue.js
ฝัง
- เผยแพร่เมื่อ 28 ส.ค. 2024
- One of the most commonly discussed topics in the world of frontend frameworks is how CSS should be managed. Today, I'm here to show you why CSS Modules is my favorite way to manage CSS in components in Vue.js
=======================================
📚 Resources
=======================================
👨💻 Repo: github.com/ben...
=======================================
📑 Bookmarks
=======================================
00:00:00:00 - Intro
00:04:40:16 - Live Coding with CSS Modules
00:10:41:03 - CSS Modules in Composition API
00:13:34:14 - Outro
=======================================
📱 Social Media
=======================================
Website - www.bencodezen.io
Twitter - / bencodezen
GitHub - www.github.com...
TikTok - / bencodezen
=======================================
🏷 Keywords
=======================================
vue js styles css-in-js
This is an aswesome feature, I will defintely try css modules, for people who are not familiar how it works it might look intimidating but with your step by step instructions and walk through it makes sense and looks fun to work with it !!!
So glad to hear it! If you run into any problems or find anything confusing, be sure to let me know and I'll be happy to try and clear things up!
Why doesn’t scoped styles just do the append thing rather than the data attribute?
Thank you. Great explanation. I didn't know you had your own channel; I know you from Vue Mastery +1 subscriber!
You're welcome. Glad you found it helpful.
Thanks for the support here as well!
Thank you!!! BTW I like the format of this video :)
You're welcome! Glad you enjoyed it!
Can you talk about the new component syntax released in Vue 3.0.3?
Absolutely! Adding it to the queue!
It is really a great opportunity to learn Vue.js from the Vue Core Team Member. Super helpful! By the way, can you make a video on the latest version of Vuex and Vue-router? Thanks.
Thanks for the suggestion! I'll add it to the queue.
@@BenCodeZen thanks Ben 😊
hi, i i like the way you make videos and how explain things so straight and clear,
but i have a question in this video, can i mix module css and plain css class?
somethink like this
:class="[$style.header, headerMain]" being "headerMain" normal class of css
i try it, but think i cant :C
Yeah this should totally work! The CSS module only applies to the $style block. Let me know if you run into any issues!
@@BenCodeZen yeah it worked, i relly like how you explain all, like vue style module :D
@@bilich7651 Appreciate it! The words of support mean a lot!
why not just use scss and wrap everything in a custom name for that exact component? :)
You could, but this is subject to the discipline of the developer and being aware of what other prefixes / postfixes exist with an codebase, which is harder to do as applications scale.
@@BenCodeZen Not really, just name it after your component, that way there never will be the same prefix. I had similar issue on this hand before, i just went with this way. It's way easier and more readable to just do this, instead of learning something like that which is really messy code wise. Especially if you have to use that much js in templates, really becomes unreadable as your app grows.
@@coltzi
That's what I've always done.. Just seems sensible to me ^^;
Yes just like I thought. Just add the component name as prefix. Because I don't think that between same components there is be different css, so the sufix random hash is not really meaningful.
Thanks for the clear explanation. Are you aware of any vue-cli/webpack plugin that I can use to auto-convert all SFC scoped styles to module variant in a large code base? As far as I can see, it's basically changing "scoped" to "module" in the style tag, and in the template, change the reference to classes to an array with referring them with the $style prefix? Is it as simple as this or, there are more between scoped vs module that I'm missing? Thanks again!
Hey Ahmed! So sorry for the delay on responding to this, it somehow slipped through the cracks.
I'm not sure there's a tool to automatically convert everything at the moment, but it's certainly an interesting concept!
Great video! What app do you use to present your code changes so that the pieces of code slide around when they change?
I use Keynote Magic Move!
Hi Ben. Thank you so so much for this tutorial on how to use CSS Modules in Vue JS. This looks pretty cool 👌. One question totally not related to CSS Modules, what is the shortcut in VS Code to wrap the text with square brackets [ ] form both sides. I saw you used it in this tutorial so I was thinking if you can share that tip it would be very helpful. Thank you once again for your great work and please keep going with this amazing tutorials. Cheers.
Hey Aleksandar! Believe it or not, I'm pretty sure this is a native feature in VS Code! I just highlight whatever text it is, and then I press the left version of whatever bracket I want. The setting in VS Code is called "Editor: Auto Surround." I believe it's on by default, but if not, mine has "languageDefined" as the set value.
I tested it in a plain text file and it worked as expected. If this doesn't work for you, let me know though!
@@BenCodeZen That was super easy 🙂. Thank you very much for sharing this tip 🙏. You are right, it is a native VS Code feature that I didn't know about. Have a great day/evening. I'm looking forward for your next video.
this is cool !!!
Thanks for a terrific explanation, Ben. How would you handle snapshots in unit tests? The problem being that the added hash is randomly generated, and will very probably be different from one unit test invocation to the next, so the snapshots will be different.
Use the `data-testid` approach, where each element will have a data-testid="somethingwhichisfixed" and you'll use that to query in the tests.
And you can include a new rule in webpack that during prod build, it'll be removed so it doesn't go to the prod code.
Thank you for the video and explanation 😊
You're welcome! 🙂
Great video! Just want to point one thing that I noticed: in your compiled CSS modules, you don't have the component name prefixed. Is this right?
Great question! I must not have mentioned it in the video, but the reason this is happening is because the app I was working on using Vite which is still under development and doesn't prepend the component name at the moment. However, if you use CSS Modules with Vue CLI, you should see the component name as I explained at the beginning. Let me know if you need additional clarification!
@@BenCodeZen oh ok, so it’s just because of Vite. Thanks 🤙🏻
Will this work with SCSS too?
Yup!
Very useful thanks!
You're welcome!
Could you add some Vue content about Vue-styled-components??
I'll add it to the backlog!
Awesome! Subscribing...
Thanks for subscribing!
This is beautiful code
Thank you!
Cool video. It's a pity the syntax is quite ugly compared to normal css classes
Agreed. It's definitely one of the downsides of it. The beautiful part about it is that you don't have to opt into it for your entire app! So I recommend just using it where it's necessary, but then otherwise don't worry about it at all!
@@BenCodeZen ahhh ok that makes sense. And if you're doing more advanced styling then you'll probably be using computed properties anyway, which makes the html template look cleaner actually!
@@AJ23mady Exactly! 🙌
Is it also valid in vue3
Yes it is!
Tell me how to use css-modules in a separate file - test.module.sass .The example I gave doesn't work
Test
import test from '../test.module.sass'
export default {
data () {
return {
test
}
}
}
test.module.sass In a separate file
.red
color: red
I'd recommend checking out this resource: vue-loader.vuejs.org/guide/css-modules.html#using-with-pre-processors
HOpe it helps!
@@BenCodeZen Thank you Ben, I will definitely read this!
Do you know how to import style module from some vue component to another vue component? Is it possible?
Once you use CSS modules, it's not typically something that would be shared across components. That would be where global CSS would make sense.
CSS Modules is more for ensuring a specific set of styles is encompassed only to a component.
Does that help to clarify things?
@@BenCodeZen Yes, thank you for the explanation. Though I don't see any problem if we could share styles across components. Just like we import javascript modules. BTW, it is possible if you know a data attribute of a component. We can use styles of foreign component if we append data attribute by hand, e.g.: . It works if we know that '3LpW' suffix. I just was looking for the method to do it progammatically, so I can write something like :class="$style['AnotherComponent']['btn']".
Beautiful. Now try to achieve something similar in React.
God, I hate React hype.
Glad you like the feature! You should also check out the new v-bind styles for Vue 3 when you have a chance!