James Long james-jlo-long

CSS Calisthenics

Introduction

A series of exercises designed to help you improve your CSS. This are not rules that should be applied to all style sheets and this is not a measure of CSS quality, merely tools to help you learn some of CSS's strengths.

Pre-processors and styled components

These exercises assume that you have 1 style sheet. We're talking about the CSS that is generated after the pre-processors have run. For styled components, extract all styles (even if the component isn't being used on the current view) and put them into a single style sheet. If you have an inline <style> tag for performance, those styles should be in the single style sheet.

	function post(url, data) {

	return new Promise(function (resolve, reject) {

	var xhr = new XMLHttpRequest();
	var params = new URLSearchParams();

	Object.entries(data).forEach(function (pair) {
	params.set(pair[0], pair[1]);
	});

	/**
	* Polyfills a property on the given object. If the object already has the
	* property, no action is taken.
	*
	* @param {?} object
	* Object whose property should be polyfilled.
	* @param {String} name
	* Name of the property to polyfill.
	* @param {?} value
	* Value for the property.

	const times = (i, handler, context) => {

	let count = 0;
	let max = Math.floor(Math.abs(i)) \|\| 0;

	while (count < max) {

	handler.call(context, count);
	count += 1;

	/**
	* @file A class that listens for breakpoints. This is far more efficient
	* and accurate than relying on the window resize event.
	* @license MIT
	* @author James "JLo" Long <[email protected]>
	* @requires Observer
	*/

	var BreakPoints = (function () {