Add Emotion to Your Web Apps With CSS-in-JS


January is National Creativity Month, and what better way to showcase your creativity than by giving your web apps some style? Want to learn how? We’ll show you in our new course: Learn CSS-in-JS.

In this course, you’ll learn how to add CSS styles to your web app using JavaScript syntax. If you already have a strong background in web development and you’re looking to pick up some new tricks — now’s the time! Jiwon Shin, one of the Curriculum Developers behind our new course, explains that the benefits of using CSS-in-JSS include:

  • No more switching between JavaScript and CSS to write styling
  • Automatic inlining of critical-path CSS
  • No class names and IDs collisions — every class name and ID is guaranteed to be unique
  • Automatic vendor prefixing
  • Reducing code and file size since compiled CSS only includes necessary declarations

Plus, as you discover a new way of implementing CSS, you’ll also learn how to use the Emotion library, which has been gaining traction in the tech industry and is currently used by companies like Reddit and Patreon.

Who is the course right for?

Learn CSS-in-JS is well-suited for learners who’ve mastered the basics of web development (including HTML, CSS, and JavaScript), along with React, and want to expand on their web design skills. Plus, if you’re looking for work as a Front-End or Full-Stack Developer, getting hands-on experience with CSS-in-JS and Emotion can help give you an edge in your job search.

What will you learn from the new course?

In Learn CSS-in-JSS, you’ll use the styling technique to build a React web application, following a tutorial as you go along. By the end of the course, you’ll be able to:

  • Explain the pros and cons of using CSS-in-JSS.
  • Identify different CSS-in-JSS libraries.
  • Use Emotion in an existing React app.
  • Apply styles to a React app using the CSS-in-JSS syntax.

Ready to learn a new way to use CSS? Check out Learn CSS-in-JS!

Web Development Courses & Tutorials | Codecademy
Web Development is the practice of developing websites and web apps that live on the internet. Whether you’re interested in front-end, back-end, or going full-stack, the content in our Web Development domain will help you get there.

Related articles

7 articles