What is CSS in JS?
Wed Jun 09 2021
3 min read
15 views
CSS in JS is a way of writing css styles in javascript with much more flexiblity and features.
I have already created a video about on Cules Coding youtube channel.
Why CSS in JS?
Suppose you have a large scale application with a lot of components.
Each components has different styles. So you add class names to them. Those
class names have some styling.
Now it is easy to mess up with component names like the picture below.
And your whole layout breaks like this. // gif
How can this problem be solved?
The solution is Scoping CSS. Instead of writing css globaly in css styles, what if we can write them inside
the component. Then the css styles won't affect other components.
But how do we do something like this?
This is where css-in-js comes into play. Css in js is writing css inside
javascript. And we want to write css inside javascript. Now, what css-in-js
libary will do is, it will generate a unique class name to the component. And
that class will have all the styles.
It will add a unique hash to the class name. Just because the hash will be unique, that's why all the component will have different style. Now we have Scoping CSS.
How do we write CSS in JS?
There are bunch of libraries out there. Popular ones are:
I like the Styled Component most. You can use whatever you want.
Don't think that all you can do with css-in-js is write scoping Css.
There are a lot of features that those libraries provides us. Like theming, props adaption, extending style and so on.
And also remember you are writing in JavaScript. That means you can create your functionalities and features. So, don't let yourself restrict witin libary features.
To learn more watch the Video.
That's it for today. If you have any question, please contact me on social media as @thatanjan. I would love to hear from you. I daily post content there. So stay safe and good bye.
About me:
Who am I?
My name is Anjan. I am a full stack web developer from Dhaka, Bangladesh.
What problems do I solve?
I can create complex full stack web applications like social media application, blogging, e-commerce website and many more.
Why do I do what I do?
I love to solve problems and develop new ideas. I also enjoy sharing my knowledge to other people who are wiling to learn. That's why I write blog posts and run a youtube channel called Cules Coding
Think we should work together?
Feel free to contact me
Email: anjancules@gmail.com
linkedin: @thatanjan
portofolio: anjan
Github: @thatanjan
Instagram (personal): @thatanjan
Instagram (youtube channel): @thatanjan
twitter: @thatanjan
About My channel:
Why would you subscribe to Cules Coding?
Cules Coding will teach you full stack development. I will teach you not only the basic concepts but also the advanced concepts that other youtube channels don't cover. I will also teach you Data Structures and Algorithms with abstraction and without Math. You will also find many tutorials about developer tools and technologies. I also explain advanced concepts and technologies with simplicity.
So what are you waiting for?
Subscribe to Cules Coding so that my friend you don't miss any of these cool stuffs.