Why I love styled-components

Does CSS in JS makes sense? Everyone has probably heard about them by now, though many have been probably been scared off by hearing the words “CSS in JS”. I wouldn’t blame them, I was very pessimistic when I first heard that word combination.

Everyone has probably heard about them by now, though many have been probably been scared off by hearing the words “CSS in JS”. I wouldn’t blame them, I was very pessimistic when I first heard that word combination.

If placing css in the HTML is considered bad practice, why would putting it in js be any better, right? We have our HTML , JS and CSS files, perfectly balanced, like everything, should be, though in the case of React , our components consist of functions returning JSX and our HTML is basically the bare minimum with a div for React to mount on.

Perhaps css in js is not some sort of heresy after all?

A somewhat simple example

To make it a bit more interesting, let us re-create the same components using different approaches: vanilla css , css with a pre-processor and finally styled-components .

love those shades of beige

Vanilla CSS

Let’s look at how the styling for the input field would look like without using any fancy tools — how bad could it be?

.input {
  padding: 23px;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  border: none;
}
.input-label {
  position: absolute;
  top: 22px;
  left: 20px;
}
.input:focus + .input-label {
  color: crimson;
  transition: ease-in-out 0.3s;
  top: 3px;
  left: 23px;
  font-size: 14px;
  font-weight: 600;
}
.name-input:hover ~ .info-box::after {
  content: "hello";
  font-weight: bold;
  transition: ease-in-out 0.2s;
}
.surname-input:hover ~ .info-box::after {
  content: "almost done";
  font-weight: bold;
  transition: ease-in-out 0.2s;
}

Looks great, right? Yeah sure, but there are significant drawbacks to using plain vanilla css :

• classes are global, meaning you can in intentionally inherit or override something, which may not be obvious.
• there is no nesting, selectors are separate blocks of code, which is not an issue by itself, but it does take extra mental capacity to process as well as some colleagues might not place everything related to one class in sequence — room for human error

web-development javascript javascript-tips programming javascript-frameworks

List of some useful JavaScript Frameworks and libraries for website, web apps, and mobile apps development, that developers should know about to make selection easier.

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

This article will walk you through the concepts you would need to know to step into the world of widely used ReactJS.

Hire Dedicated JavaScript Developers from a top javascript development agency for your business solutions. We provide JS web developers for hire at a fixed or hourly rate.