Vik Ramanujam vviikk

## CSS in JS (advantages, drawbacks, and how styled-components is hopefully the answer).md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              3 stars
            
          
                vviikk
                / CSS in JS (advantages, drawbacks, and how styled-components is hopefully the answer).md
            
            
              Created
              November 15, 2018 10:20
            
              
                CSS in JS (advantages, drawbacks, and how styled-components is hopefully the answer)
              
          
    CSS in JS (advantages, drawbacks, and how styled-components is hopefully the answer)


Someone is going to unify these three different syntaxes and write a language that just addresses the web platform directly, and it's going to be insanely popular.

—[Jeremy Askenas][rise-of-the-transpilers], creator of coffeescript, 2015

TL;DR; styled-components FTW!
The journey to styled-components has been long, but with it's simplicity, tooling and level of adoption, it's the future of CSS in JS, and IMHO, the emerging standard that is about to stay. I can mention the disadvantages of CSS in JS, but most of them will not be valid if we're using styled-components. The topic is probably one of the fastest evolving in web development, so I hope you'll see:

advantages of CSS in JS


## userChrome.css
/* Hide horizontal tabs at the top of the window #1349 */
#TabsToolbar {
    visibility: collapse !important;
}

/* For only Tree Style Tab sidebar #1397 */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
    display: none !important;
}

## index.pug
h1 A simple CSS Custom properties naming convention
p.large Discussed in detail in my article on medium.com.
p
  a.button View on Medium
<script src="https://gist.github.com/vviikk/fde0fced50ee27780189dd7bc028e63d.js?file=style.css"></script>

## index.html
	<html>
<head>
    <style>
    </style>
</head>
<body>
    <form name="form">
        <input name="input" placeholder="https://messenger.com/" value="https://messenger.com">
        <button type="submit">submit</button>
    </form>

## two-finger-history-navigation.js
// This script is responsible for implementing the functionality of
// going back/forward in the navigation history when the user scrolls
// the page left/right using the touchpad.
// Each horizontal scroll event is intercepted and if the total motion
// within a given time is greather than a threshold, the code triggers
// a history.back() or .forward()
// Settings are handled by the background script bg.js.

function twoFingerScroll() {
  // define a motion accumulator

## smooth-scrolling.js
// ==UserScript==
// @name Smoothscroll
// @author       Creec Winceptor
// @description  Smooth scrolling on pages using javascript
// @namespace https://greasyfork.org/users/3167
// @include     *
// @version 9.6
// ==/UserScript==

const Smoothscroll = {};

## nicely-named-fluid-typography-with-custom-properties.css
:root {
  /* CONSTANTS */
  --FONT-SIZE-MIN: 16;
  --FONT-SIZE-MAX: 26;

  /* Notice, no calcs used yet */
  --FONT-SIZE-MIN-PX: (var(--FONT-SIZE-MIN) * 1px);
  --FONT-SIZE-MAX-PX: (var(--FONT-SIZE-MAX) * 1px);

  --BROWSER-WIDTH-MIN: 300;

## userChrome.2019.aug
Toolbar {
    visibility: collapse !important;
}

/* For only Tree Style Tab sidebar #1397 */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
    display: none !important;
}


## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <style>
      .tabbar {
        position: absolute;
        left: 0;
        top: 0;

## index.html
	<html>
<head>
    <style>
    </style>
</head>
<body>
    <form name="form">
        <input name="input" placeholder="https://messenger.com/" value="https://messenger.com">
        <button type="submit">submit</button>
    </form>
	/* Hide horizontal tabs at the top of the window #1349 */
	#TabsToolbar {
	visibility: collapse !important;
	}

	/* For only Tree Style Tab sidebar #1397 */
	#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
	display: none !important;
	}
	h1 A simple CSS Custom properties naming convention
	p.large Discussed in detail in my article on medium.com.
	p
	a.button View on Medium
	<script src="https://gist.github.com/vviikk/fde0fced50ee27780189dd7bc028e63d.js?file=style.css"></script>
	<html>
	<head>
	<style>
	</style>
	</head>
	<body>
	<form name="form">
	<input name="input" placeholder="https://messenger.com/" value="https://messenger.com">
	<button type="submit">submit</button>
	</form>
	// This script is responsible for implementing the functionality of
	// going back/forward in the navigation history when the user scrolls
	// the page left/right using the touchpad.
	// Each horizontal scroll event is intercepted and if the total motion
	// within a given time is greather than a threshold, the code triggers
	// a history.back() or .forward()
	// Settings are handled by the background script bg.js.

	function twoFingerScroll() {
	// define a motion accumulator
	// ==UserScript==
	// @name Smoothscroll
	// @author Creec Winceptor
	// @description Smooth scrolling on pages using javascript
	// @namespace https://greasyfork.org/users/3167
	// @include *
	// @version 9.6
	// ==/UserScript==

	const Smoothscroll = {};
	:root {
	/* CONSTANTS */
	--FONT-SIZE-MIN: 16;
	--FONT-SIZE-MAX: 26;

	/* Notice, no calcs used yet */
	--FONT-SIZE-MIN-PX: (var(--FONT-SIZE-MIN) * 1px);
	--FONT-SIZE-MAX-PX: (var(--FONT-SIZE-MAX) * 1px);

	--BROWSER-WIDTH-MIN: 300;
	Toolbar {
	visibility: collapse !important;
	}

	/* For only Tree Style Tab sidebar #1397 */
	#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
	display: none !important;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Hello World!</title>
	<style>
	.tabbar {
	position: absolute;
	left: 0;
	top: 0;