Simple CSS with Styled-Components

If you are a developer, you have most likely had some ‘fun’ with CSS. While styling your application can be the most enjoyable part of your development process, it can quickly become painfully complex. Traditionally, developers need to create and keep track of numerous different class names and ID’s in order to style various elements within their application. Odds are, at some point, you are going to forget one of those class names — or change a style on one element, just to find that it completely changes another that that you did not mean to alter.

Styled-Components with React is here to save the day!

The creators of React were inspired to create styled-components to enhance the development of styling React components, making it easier for us as developers and ultimately improving the experience for users. Styled-components take much of the pain and frustration that you might experience with regular CSS.

Features of styled-components that make it great!

Automatic critical CSS — styled-components keep track of what is being rendered to the DOM. This means that users machines only load the necessary code to style those components. No more loading of never ending CSS files just to see the login page!

No more class names — by taking the necessity of class names on elements away, you will have more simplicity when it comes to the styling of your application! Styled-components automatically generate class names for you as a developer. This means less bugs!!!

Want to read this story later? Save it in Journal.

Styled-components automatically get generated class names!

Easier deletion of CSS — typically, we will assign multiple class names to multiple elements when styling our applications. This mean traversing multiple files to make sure we are styling the correct elements, or even searching these files to find the class name that doesn’t belong. With styled-components, we no longer have to worry! Any element that gets deleted, takes it’s CSS with it. Each styled-component has it’s own specific CSS styling.

Simple dynamic styling — styling through props or themes are applied across your application is easier than ever. We no longer need to traverse dozens of class names and files to make sure that our global themes are being applied across the application in the desired places. Less time spent styling means more time beautifying your world changing application!

Painless Maintenance — styled-components are built right within the React component they are styling! Again, saving you so much time and pain. You’ll now know exactly where the code is that is styling your components.

Automatic Vendor Prefixing — ever seen something like this in a CSS file:

Vendor prefixing examples

Styled-components will take car of this for you!!! How nice is that.

Examples:

Dynamic Styling:

Parent Component <Profile />with CSS styling! Notice that it is also responsible for rendering <ProfileCard />, displayed below
<ProfileCard /> has no import for styled-components, and no CSS declaration in file. Yet styled-components knows to pass ‘global’ styling to child components!

Painless Maintenance:

The ability to edit styling to any component, right from within the component’s file.

<App /> is styled right at the bottom of its own file. Simple and easy to add a cool linear gradient to your application. Hopefully cooler than this one!

Styled-components is the answer to what has been known as a tedious experience when it comes to styling web application. It’s smart and easy to use!!!

Check out the styled-components documentation for more details in how to use them on your next React project. I promise you won’t be disappointed.

More CSS documentation:

Places to learn or resource CSS code:

📝 Save this story in Journal.

Software Engineer | Full Stack Developer | Soccer Fanatic