Joe Seifi joeshub

A series of posts on css-in-js

0. styles as objects

First, an exercise. Can we represent all of css with plain data? Let's try.

let redText = { color: 'red' };

https://twitter.com/snookca/status/1073299331262889984?s=21

‪“‬In what way is JS any more maintainable than CSS? How does writing CSS in JS make it any more maintainable?”

‪Happy to chat about this. There’s an obvious disclaimer that there’s a cost to css-in-js solutions, but that cost is paid specifically for the benefits it brings; as such it’s useful for some usecases, and not meant as a replacement for all workflows. ‬

‪(These conversations always get heated on twitter, so please believe that I’m here to converse, not to convince. In return, I promise to listen to you too and change my opinions; I’ve had mad respect for you for years and would consider your feedback a gift. Also, some of the stuff I’m writing might seem obvious to you; I’m not trying to tell you if all people of some of the details, but it might be useful to someone else who bumps into this who doesn’t have context)‬

So the big deal about css-in-js (cij) is selectors.

	'use strict';

	/**
	* Author: Nicolas Grenié, @pisoung
	* Date: November 2015
	* This is the code for the Amazon Echo app for APIstrat Austin conference. Using the app you can ask for the schedule of the conference.
	* It uses APIstrat API developed by Kin Lane
	*/

	require('jaws-core-js/env');

	function NEW(constructor, argsArray) {
	var obj = {}; // step 1
	obj.__proto__ = constructor.prototype; // step 2
	constructor.apply(obj, argsArray); // step 3
	return obj; // step 4
	}
	function Parent(name) {
	this.name = name;
	}
	Parent.prototype.greet = function() {

	class Parent {
	constructor(name) {
	this.name = name;
	}
	greet() {
	console.log(`Hi, I'm ${this.name}`);
	}
	}

	var mom = new Parent("Mom");

	/**
	* Using Operator Mono in Atom
	*
	* 1. Open up Atom Preferences.
	* 2. Click the “Open Config Folder” button.
	* 3. In the new window’s tree view on the left you should see a file called “styles.less”. Open that up.
	* 4. Copy and paste the CSS below into that file. As long as you have Operator Mono SSm installed you should be golden!
	* 5. Tweak away.
	*
	* Theme from the screenshot (http://cdn.typography.com/assets/images/blog/operator_ide2.png):

	#!/bin/sh

	# Auto-run via:
	# sh -c "$(curl -fsSL https://gist.githubusercontent.com/JTronLabs/941821b71a746dc31f418fd03a6c7236/raw/a7ad1b47d1ea72d06d304db3202475930b5362b6/atom_stater_pack.sh)"

	echo "Downloading some awesome Atom packages. See the code at https://gist.github.com/JTronLabs/941821b71a746dc31f418fd03a6c7236"

	#Editor
	apm install linter # https://atom.io/packages/linter - available linters: http://atomlinter.github.io/
	apm install highlight-selected # https://atom.io/packages/highlight-selected