Menu

Styled Components – Future Reusability

The idea of reusable and modular components is often associated as being best practise with the latest and greatest in the JavaScript world. As such, some of the industry seems to be shifting towards creating components that contain a certain piece of functionality that cab exist in isolation. For example, a button or a menu.

In otherwords, this component can be migrated from project to project with little customisation needed to be fully functional. From this idea I would like to demonstrate the use of styled components.

While my personal preference for styling is still using SASS and partials there is no denying that styled components is the evolution of styling modular UI components.

A library called Styled Components is using the idea of module styled React web components.

Most of the guidelines are already covered in the docs here but to install Styled Components into your project enter the following in your node command line:

npm install --save styled-components

CSS in JS

For sure, this topic of conversation in particular has to be one of the most polarising within the dev community. It really comes down to personal preference but in the context of styled components template literal strings from ES6 JavaScript are used to describe the CSS to our component.

This is the basic concept of styled components and how it differs from standard CSS/SCSS styling sheets.

I’m not going to cover this extensively here as this a post specifically about Styled Components but if you wanted to get more in depth on this topic I’d recommend this podcast episode by Wes Bos and Scott Tolenski.

Creating a Styled Component

Using some examples from the docs we can declare the styled properties of a title text h1 element.

And its as simple as that these ES6 back ticks provide the styled data properties to our component. It definitely seems an unusual but creative way to describe style properties. But at its core it really is just like declaring normal CSS, there is no issue converting already defined CSS from one of your components or projects.

I think it is quite important that the string interpolation is still very simliar to normal CSS. It will be key to converting developers over to this way of injecting styles in JS because it already feels familiar and comfortable to use.

But this is just a basic implementation you can go on further to manipulate and interact with your styled components in combination with things like JSX in React.

This is where the ability to customise CSS with JS becomes apparent and I would highly encourage you to explore the docs even further.

Media Queries

Media Queries for specific styling at different dimensions are also not a problem using Styled Components. A great example from the Git demonstrates this:

As I hope I just outlined, there are a lot of benefits to creating components in this way. In the future, I wouldn’t be surprised to see mass adoption of this isolated component pattern at enterprise level. It would enable a company to create their own JavaScript UI library that could be used across a wide range of projects.

Each piece of the UI could be customised by passing down new props or injecting new template literal CSS.

But this isn’t limited to large scale projects either. The possibilities are really endless for creating migratable components like this and its really another weapon the arsenal of a frontend JavaScript developer.