Transforming your CSS to JS for fun and profit

gistfile1.md

Quick guide to CSS in JS.

Transforming your CSS to Javascript is easy!

Step 1:

Change all css file extensions to js.

Step 2:

Javascript uses "camel case" instead of dashes when writing property names. If you're from the middle east, don't be offended.

While you're at it, you might as well add quotes to your property values. Properties in Javascript are "sarcastic."

/* CSS */
background-color: white;

/* JS */
backgroundColor: "white",

Step 3

Comments in JS and CSS use the exact same syntax. Don't change them.

/* CSS */
/* THIS IS A COMMENT IN CSS */

/* JS */
/* THIS IS COMMENT IN JS */

Step 4

CSS rulesets are called "objects" in Javascript, and are assigned to variables. The name "variable" makes sense, because the properties in the ruleset will look different in each browser.

Lines will end in commas, which is nice. Commas help you code look "more beautiful" without all those extra semi-colon dots all over your files.

/* CSS */
.foo {
  background-color: white;
  color: black;
}

var foo = {
  backgroundColor: "white",
  color: "black"
}

It's that easy!