Federico Zivolo FezVrasta

Please star ⭐️ the gist to help! This is a proposal for a ⚡️ talk at Reactive Conference.

Styling Components in React Toolbox 2

I wrote react-toolbox and presented it almost a year ago in lighning talk at Reactive Conf 2015 in Bratislava. At first it was just a proof of concept of a component library styled with CSS Modules and SASS. Now the project has grown quite a bit, and during this year there has been tons of changes and lessons learned.

Theming and customization is one of the most difficult and interesting problems to solve. For the first version we needed a custom Webpack loader to generate themes and doing simple style overrides was very painful. Today I'm working on a new playground that will allow you try CSS Modules live, and to create React Toolbox themes on the f

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;

	// requestAnimationFrame polyfill by @rma4ok
	!function (window) {
	var
	equestAnimationFrame = 'equestAnimationFrame',
	requestAnimationFrame = 'r' + equestAnimationFrame,

	ancelAnimationFrame = 'ancelAnimationFrame',
	cancelAnimationFrame = 'c' + ancelAnimationFrame,

	expectedTime = 0,

	// @license http://opensource.org/licenses/MIT
	// copyright Paul Irish 2015


	// Date.now() is supported everywhere except IE8. For IE8 we use the Date.now polyfill
	// github.com/Financial-Times/polyfill-service/blob/master/polyfills/Date.now/polyfill.js
	// as Safari 6 doesn't have support for NavigationTiming, we use a Date.now() timestamp for relative values

	// if you want values similar to what you'd get with real perf.now, place this towards the head of the page
	// but in reality, you're just getting the delta between now() calls, so it's not terribly important where it's placed

	# first:
	lsbom -f -l -s -pf /var/db/receipts/org.nodejs.pkg.bom \| while read f; do sudo rm /usr/local/${f}; done
	sudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*

	# To recap, the best way (I've found) to completely uninstall node + npm is to do the following:

	# go to /usr/local/lib and delete any node and node_modules
	cd /usr/local/lib
	sudo rm -rf node*

	# copied from http://gbayer.com/development/moving-files-from-one-git-repository-to-another-preserving-history/
	git clone <git repository A url> # clone source repository
	cd <git repository A directory>
	git remote rm origin # to make sure it doesn't affect the original repository
	git filter-branch --subdirectory-filter <directory 1> -- --all # remove all files other than the ones needed
	mkdir <directory 1> # move them into another directory where they will be stored in the destination repository (if needed)
	mv * <directory 1>
	git add .
	git commit

	import React, { Component, PropTypes } from 'react';
	import popperJS from 'popper.js';

	export default class Popper extends Component {
	constructor(props) {
	super(props);
	this.state = {};
	this.update = this.update.bind(this);
	}

	console.reset = function () {
	return process.stdout.write('\033c');
	}

	git branch -m old_branch new_branch # Rename branch locally
	git push origin :old_branch # Delete the old branch
	git push --set-upstream origin new_branch # Push the new branch, set local branch to track the new remote