Giuseppe giuseppeg

Recently CSS has got a lot of negativity. But I would like to defend it and show, that with good naming convention CSS works pretty well.

My 3 developers team has just developed React.js application with 7668 lines of CSS (and just 2 !important). During one year of development we had 0 issues with CSS. No refactoring typos, no style leaks, no performance problems, possibly, it is the most stable part of our application.

Here are main principles we use to write CSS for modern (IE11+) browsers:

SUIT CSS naming conventions + SUIT CSS design principles;
PostCSS + CSSNext. Future CSS syntax like variables, nesting, and autoprefixer are good enough;
Flexbox is awesome. No need for grid framework;
Normalize.css, base styles and variables are solid foundation for all components;

explanation of https://twitter.com/getify/status/780249160662605824 in terms of SpiderMonkey (Firefox) internals

edit: The tweet linked above has since been deleted, but the original code read something like:

' \t\n\r\u000c\u000b\uFEFF\u0020' == 0 // true

The script is parsed and compiled to bytecode.

A top-level App component returns <Button /> from its render() method.

What is the relationship between <Button /> and this in that Button’s render()?
Does rendering <Button><Icon /></Button> guarantee that an Icon mounts?
Can the App change anything in the Button output? What and how?

React lifecycle cheatsheet

Method	Side effects¹	State updates²	Example uses
Mounting
`componentWillMount`		✓	Constructor equivalent for `createClass`
`render`			Create and return element(s)
`componentDidMount`	✓	✓	DOM manipulations, network requests, etc.
Updating
`componentWillReceiveProps`		✓	Update `state` based on changed `props`

	// If you are planning to use postcss plugins like autoprefixer,
	//you probably should precompile your jss style objects with postcss-js before running your app.
	// Because autoprefixer makes a network request and loads caniusedb json file into your bundle
	//and this will dramaticly increase the size of your bundle.

	// So lets create a precompile script

	// Following 2 library needed for writing compiled jss style objects to files
	var fs = require("fs");
	var stringifyObject = require("stringify-object");

	// getComponent is a function that returns a promise for a component
	// It will not be called until the first mount
	function asyncComponent(getComponent) {
	return class AsyncComponent extends React.Component {
	static Component = null;
	state = { Component: AsyncComponent.Component };

	componentWillMount() {
	if (!this.state.Component) {
	getComponent().then(Component => {

	import React, { Component, PropTypes } from 'react'
	import {
	Text,
	View,
	ScrollView
	} from 'react-native'

	import Redirect from 'react-router/Redirect'
	import Match from 'react-router/Match'

	// inifinite scrolling of content without extra wrappers
	const { render, findDOMNode } = ReactDOMFiber

	class App extends React.Component {
	render() {
	// wrap the root element with an Intersection Observer, exposing .observe for children
	return <Intersection>
	<div style={{ height: 200, overflow: 'auto' }}>
	<Page offset={0} count={10} />
	</div>

	/* global React, ReactDOMFiber */
	/* @jsx deferElement */
	const { render, unstable_deferredUpdates } = ReactDOMFiber

	class Deferred extends React.Component {
	state = { next: false }
	componentDidMount() {
	unstable_deferredUpdates(() =>
	this.setState(state => ({ next: true })))
	}

	// Usage:
	//
	// function loader() {
	// return new Promise((resolve) => {
	// if (process.env.LAZY_LOAD) {
	// require.ensure([], (require) => {
	// resolve(require('./SomeComponent').default);
	// });
	// }
	// });