An ever-growing cheatsheet for JavaScript. I add things that I think are useful but difficult to unearth or understand.


  1. Only apply CSS if JavaScript is enabled

Only apply CSS if JavaScript is enabled

Too many websites break entirely if a visitor has JavaScript disabled. I think JavaScript should be opt-in; icing on the cake.

Say you want JavaScript to decide when to turn a div from opacity: 0 to opacity: 1. If the user does not have JavaScript enabled, that div will never be visible. That opacity: 0 should therefore only be set if JavaScript is enabled.

Here’s the cleanest way I think to do that (within my opt-in approach described above):

document.documentElement.className = "js"

That adds the class js to the root html element. Then, in your CSS:

.js div {
    opacity: 0;

That div will only ever receive the opacity: 0 if the root html tag has the class js applied to it.

See this Sass tip for how to reference a higher-up parent element within your nesting structure. That’s how I apply these .js styles.