A GUIDE TO WRITING CSS IN JS.

The idea of writing css in js is a relatively new concept that has just been around in recent years.

Some CSS purists argue that CSS should be written in CSS and JS in JS. While some other people argue that writing CSS in JS makes components true individuals ( which is what we try to achieve as we write different components in React ).

The pros however, are evident as writing CSS in JS eliminates the problem of accidentally sharing styles with a different component as a result of having the same className, because even though parts of the websites are separated into components, the styles when rendered are rendered globally ( they have a shared namespace )and any component can have access to them.

The con, some people might argue, is that it adds an extra layer of complexity. Complexity you might not need when building small applications as it is easier to keep track of all the class names.

WRITING CSS STYLES IN JAVASCRIPT

We can assign styles we have written in to our JSX( JavaScript XML, it allows us write HTML in our JavaScript ).

const  divStyle = {
         backgroundColor : ‘black’;
         color: ‘white';
         width: ‘100px’;
         height: ‘100px';

};


function App(){
      return(
     <div className = ‘App' >
         <div style= { divStyle }> Hello World </div>
     );
}

In the example above we assign divStyle, CSS styles, but unlike CSS we write the CSS properties in camel case unlike the kebab case we are used to.

The problem with writing styles like this is that we do not have access to some CSS properties, properties like hover, nth-child etc.

However this gives us an idea of what styled components library does for us. We talk more about styled components in the subsequent chapters.

STYLED COMPONENTS.

There are many libraries that enable us to write CSS In JS, but styled components is the most used ( also the most starred ) and therefore would be the one we would use in this article.

GETTING STARTED WITH STYLED COMPONENTS.

• Install the library.

npm install styled components

Or.

yarn add styled components.

• Import the styled keyword into your file.

Import styled from ‘styled-components';

CREATING AND USING A STYLED COMPONENT.

Example:

const Box = styled.div`
         background-color : ‘black’;
         color: ‘white';
         width: ‘100px’;
         height: ‘100px'
`;


function App(){
      return(
     <div className = ‘App' >
         <Box> Hello World </Box>
      </div> 
      );
}

In the example above, we create a component Box and assign it a value of styled(the keyword we imported).div( the HTML element we want to create, in this case a div ) then we write a string value of the css styles we want on that component we are creating.

In this case we write actual CSS styles, not CSS – like syntax styles. Therefore we have access to all the CSS properties and write the properties in kebab-case. We can also write in SASS.

We then use the component like a normal div in our application. This component can also be reused anywhere else in our application.

This works because when the Box component gets rendered on the DOM as a div element with a unique className generated by styled component library. The unique className makes it impossible for different components to accidentally share the same styles.

LEVERAGING PROPS IN STYLED COMPONENTS.

One of the biggest pros is the easy ability to use components props to render styles depending on their values.

const Box = styled.div`
         background-color : ‘black';
         width: ‘100px’;
         height: ‘100px';
         color: ${ ({isYellow}) => isYellow?  ‘ yellow’ : ‘white’};
`;


function App(){
      return(
     <div className = ‘App' >
         <Box isYellow = { true } > Hello World </Box>
       </div> 
      );
}

)

In the example above, the Box component gets passed a prop isYellow.

The color style in the css gets passed a function ( we interpolated to write the function, because we write the css styles in a string ), I mean we basically are writing JavaScript that just happened to have CSS in it yeah ?

The isYellow property is then destructured off the props passed into the function (if we do not destructure the props, and we pass it whole, we would have to use props.isYellow in the ternary operator statement), we then use a ternary operator to give the Hello world text a color of yellow or black depending on the boolean value.

Conclusion

We discussed about CSS in JS and why you would want to use it in your application. It might come off as a bit of overkill or you might think ‘ I can barely even write CSS properly now this! ‘ but the usefulness of styled components is a lot more glaring in larger applications with different developers.

All in all, it really depends on you and the company you work for.