threepointone

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.

threepointone

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' };

Rich-Harris

node_modules

JarLowrey

#!/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

brandondurham

/**
 * 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):

wgottschalk

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

var mom = new Parent("Mom");

wgottschalk

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() {

picsoung

'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');

mmrko

// setup.js
import hook from 'css-modules-require-hook'
import sass from 'node-sass'

hook({
  extensions: [ '.scss' ],
  preprocessCss: data => sass.renderSync({ data }).css
})

vvgomes

var _ = require("lodash");
var R = require("ramda");

var companies = [
  { name: "tw", since: 1993 },
  { name: "pucrs", since: 1930 },
  { name: "tw br", since: 2009 }
];

var r1 = _(companies).chain()