I've been on a bit of a theme lately. First, we went through The Layers of Javascript. Then we explored The Layers of CSS.

Today, I'm here to bring them both together! So without further ado, I give you The Layers of Javascript...Styles Remix.

My precious styles

In any Javascript project we have stylesheets full of CSS (or LESS, Sass, etc). We can have global stylesheets that apply to the full project as well as stylesheets that are imported into specific Javascript or HTML pages.

All of those stylesheets are filled with CSS code similar to this snippet below.

a {
    color: black;
}

It would be easy to think that these are the only styles that can affect our site, but this is Javascript land! You should know that things are rarely so simple.

NMS stands for Not My Styles!

Beyond the styles available to us through base CSS there are also third-party frameworks in use, like Bootstrap. These frameworks are meant to provide some default styling that makes a site look better without as much custom CSS work by the developers.

<button type="button" class="btn btn-primary">Primary</button>

If you've included bootstrap the code above, the button will be blue with white letters and have a more aesthetically pleasing shape. If not? Who knows! Depends on the styles you've included in your project already.

I'm just kidding, it'll likely look like the one on the left

Bootstrap has versions, so what version you're working with is important. There are changes in syntax as well as expected styling. And even beyond that, there are different wrappers for bootstrap!

For example, React has its own "wrapper" of bootstrap which is lovingly referred to as reactstrap.

Font Awesome

Another thing that contributes to "styles" are the inclusion of glyphicons, font awesome, or other publicly available libraries that make your sites look polished. If you see keywords like 'glyphicon' or 'fa' that's your culprit.

Keep in mind that these icon libraries are included in bootstrap, but they're cool and a little unique so I wanted to count them as a layer. Additionally, if you're not using bootstrap you can make use of them independently.

Look! DEV even has its own font awesome icon now!

Here it is in the wild.

Inline styles and the mess that can be JSX

Ok, next layer! Thus far I've been operating on the assumption that all your CSS is included in some style sheet or another. However, in React you have the option of using styles directly in your JSX code. If you're not familiar with JSX I recommend going back and reading the Javascript layers post I linked at the top.

Since components in React are designed to be reusable throughout an application this allows you to keep your styles co-located with the piece of code they're meant to be applied to.

let styles = { margin: 0, flex: 1 };

return (
    <h1 style={styles}>
        LAURIE             
    </h1>
)}

To be honest, I don't love inline styles. Doing this feels similar to inline styling in HTML, which is frowned upon. But somehow, somewhere it was decided that this is acceptable in JSX land because...reasons? I guess when your HTML is inline with your javascript it's all sort of a shrug at that point.

Remember that even though the styles are not written directly in the return statement they still count as "inline". That means CSS treats these styles as more specific than the CSS in your stylesheet.

Or Styled Components, why not keep this interesting?

Somewhere along the way people decided to create styled components. This can get a little confusing because of the syntax in JSX. However, there is a fundamental difference.

Adding styles and associating them with HTML tags is NOT a styled component. Styled components are specifically React components that carry their own styles with them, wherever they go.

import styled from 'styled-components';
const Title = styled.h1`
  font-size: 1em;
  color: blue;
`;
<Title>Laurie</Title>

In the example above you can see that there is no need for a class to be styled and assigned to the component. It's done directly, no mapping necessary. This could be a whole separate post, so if you're interested in learning more head here.

Not My Styles revisited

On top of including Bootstrap and the like for the purpose of styling, you should look out for the "accidental" inclusion of styles with third-party Javascript libraries. There are a number of ways this can come into play, but one example is gatsby-image.

<Img className="selfie" sizes={{...node.image.childImageSharp.fluid, aspectRatio: 4/3}} alt={node.conference} />

The code above uses an Img tag from the gatsby-image plugin. When it renders it will include additional styles and classes that aren't specified in this code snippet.

Look out for the rogue javascript!

Now, here is one more wrench to throw into things. Styles are static...but they can be changed dynamically by javascript.

I was recently trying to fix some responsive design issues in my personal site. It was previously written in Jekyll and worked fine, but when I ported over my CSS to the Gatsby project it was no longer resizing components for smaller screens. When searching around I realized that the Jekyll site was using an init.js file to trigger my navbar toggle. It was just sitting out there in the ether getting loaded when my project did and screwing around with styles without my knowing! Granted, it was doing this for good, not evil, but still!

So just remember that styles can be changed dynamically while your site is in use.

Don't we look pretty now!

Sorry if you made a mess, but at least the cake will still taste delicious!

If you're looking for other content like this check out:
Don't Get Fooled By Errors
Online Learning Tips and Tricks
My Series on Gatsby and GraphQL