DEV Community

loading...
Cover image for What is CSS in JS?

What is CSS in JS?

Anjan Shomodder
Full Stack Web Developer | Blogger | Instructor at Cules coding
Updated on ・3 min read

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.
Alt Text

Each components has different styles. So you add class names to them. Those
class names have some styling.
Alt Text

Now it is easy to mess up with component names like the picture below.
Alt Text

And your whole layout breaks.

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.
Alt Text

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:

Alt Text

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 put them on the comment box. I would love to hear from you. Also if you like this blog then give it a 💖 reaction. You can connect to me on any social media as @thatanjan . 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: thatanjan@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.

Discussion (0)