How to CSS IN JS without JS

Variables

Ok this one is easy, css have native basic fully functional variables, here’s some examples

:root {
  --app-background-color-200: #272727;
  --app-background-color-300: #474747;
}

.app-wrapper {
  background-color: var(--app-background-color-200);
}

Css variables can be loaded and replace entire theme! They are easy to use and very useful to help and track our color schema in our application.
Even if we were to use styled components, emotionsjs or any other library. We’d want to stick to css native vars.

Brightness and Lightness

Another big feature of CIJ is that you can create a schema of colors with percentage. Or in case the color of your background element is effect by the color of the parent element and you want them to be somehow corresponding. So you’ll be using css filters like

Here’s example on a button

.button {
  color: #000;
}

/* you can go above 100% */
.button:hover {
  filter: brightness(85%);
}

<button class="button">some text of a button</button>

Encapsulation or modular CSS

Big benefit of CSS in JS is the fact that we can create modular code for our css components. Which means that our css is only applicable to our own component (we get an automatically generated css selector and it’s uniq to our component).

So how we get modular css and encapsulated code?

Inline css

It’s a bad idea, not manageable, not cached, hard to override (as needed in every app) and hard to debug (where the code comes from? It’s inlined)

Guidelines and lint rules

We can have basic guidelines and lint rules, for instance we’d want our component to have a single css file corresponding with the component name.

Inside the component we’ll want to always wrap our code with a wrapper.

// myComponent.scss
.my-component-wrapper {
/// our encapsulated code goes here
}

// myComponent.jsx

Import './my-component.css';
export default const MyComponent = () => {
// my component code
}

Few good lint rules can be found in stylelint.

Here’s few more good examples of code encapsulation in CSS

.app-name-wrapper {
  /* lots of code that wrapper covers */
}

.page-name-wrapper {
  /* For example, in amazon it would be .catalog-tv {} to apply css styles for tv catalog pages. */
}

/* As we continue we'll get and become more granular, smaller in responsibility, and encapsulating less and less code. For more part it can be achieved with 3-4 levels of responsibility  */

.section-name-wrapper {
/* sections like menu, navbar, articles, header, footer etc. Could be mostly margin, padding, structure, sizes etc */
}

.component-name-wrapper  {
  /* component specific wrapper */
}

.component-name {
  /* component very specific styling */
}

Theme

With CSS in js, like styled components or emotionjs we can have themes in our js file. However with plain css we can get the same result with less, technology, less maintainability and less complexity

In this code example in codesandbox we can utilize the data- attribute selector and apply different “variables” to which kind of theme we want to apply.

Css example:

body[data-theme="light"] {
  --app-background-color-200: #272727;
  /* we can apply more css selectors colors here */
}

body[data-theme="dark"] {
  --app-background-color-200: #787878;
  /* we can apply more css selectors colors here  */
}


/* apply css vars to a specific body data attribute means that we don’t have to refer to the theme within our css code. Like example below: */
.app-wrapper {
  /* here we use app background color 200 once, but the color will change base on what we define on the body data attribute */
  background-color: var(--app-background-color-200);
}

HTML example:

<!DOCTYPE html>
<html>
<body>
	<div id="app">
<h1>Hello Vanilla!</h1>
<div class="app-wrapper">
  We use the same configuration as Parcel to bundle this sandbox, you can find more
  info about Parcel 
  <hr />
  <div class="inner-block-card">
   	this is inner part of the div element
  </div>
  <a href="https://parceljs.org" target="_blank" rel="noopener noreferrer">here</a>.
</div>
</div>
</body>
</html>

How to theme without Javascript ?

body data-theme=”light”:
- Light can be switched to anything we want
Css variables:
- Can be defined in a class at the top level linked to body and data attribute of theme
- Can be defined with “levels” of degrees (like a bold interface 100,200,300 etc..)
Css selectors of data-theme:
- For specific use cases
- For media queries

It’s important to mention that to switch between themes you’ll need to replace the top level `data-them` from “light” to “dark” (or whatever you chose) with javascript or with server side rendering of the app.

Conclusion

At some point of our application life cycle we’ve adopted new tech stack technology (stlyed component, emotions, etc) since the basic technology didn’t provide us what we need. But as the basis of technology grow, we are able to adopt and use the basic technology for what otherwise we’d have to use external technology.

Lior Amsalem

Lior Amsalem embarked on his software engineering journey in the early 2000s, Diving into Pascal with a keen interest in creating, developing, and working on new technologies. Transitioning from his early teenage years as a freelancer, Lior dedicated countless hours to expanding his knowledge within the software engineering domain. He immersed himself in learning new development languages and technologies such as JavaScript, React, backend, frontend, devops, nextjs, nodejs, mongodb, mysql and all together end to end development, while also gaining insights into business development and idea implementation.

Through his blog, Lior aims to share his interests and entrepreneurial journey, driven by a desire for independence and freedom from traditional 9-5 work constraints.

Lior Amsalem