Hello there. I’m built with CSS and JS.

Click the button to change the color

What’s the deal with CSS and CSS-in-JS?

They can do a lot of the same things, but in different ways.

Many people like traditional CSS because it is well-established and more approachable with less configuration and dependencies.

At its simplest, you write content in html or with your templating system of choice.

index.html
<header>
  <h1>Hello there. I’m built with CSS and JS.</h1>
</header>

To style content, write CSS in a stylesheet, usually in a separate file that gets loaded via a link tag in the head of your document.

style.css
header { 
  padding-top:32px; 
  padding-bottom:32px;
  text-align: center;
}
h1 { font-size: 20px; }
@media screen and (min-width: 32em) {
  h1 { font-size: 32px; }
}

Some people think that if you are using React, that means you have to use CSS‑in‑JS. That’s not the case!

Header.jsx
<Header className="header">
  <h1>You can still use classes with React.</h1>
</Header>

It is possible you may not need any JavaScript at all. There’s a lot that can be done these days with new CSS features alone.

If you do need it, there are plenty of frameworks and tooling to help you import, require, prettify, minify, lint, code split, bundle, tree shake, transpile, compile and hot reload, but a script tag at the bottom of your page works just fine too.

script.js
var colors = ['#00ADEF','#22AD00','#FF8C00','#ee5555','#484fd1'];
var colorIndex = 0;

document.getElementById('changeColor').addEventListener('click', function() {
  colorIndex = (colorIndex+1) % colors.length;
  document.documentElement.style.setProperty('--themeColor', colors[colorIndex]);
});

Building web pages like this has worked for many years, and will continue to work for the foreseeable future. If you want to build websites this way, there’s nothing wrong with that and don’t let anyone stop you!