Alex Klos aklos

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;

Below is the list of modern JS frameworks and almost frameworks – React, Vue, Angular, Ember and others.

All files were downloaded from https://cdnjs.com and named accordingly. Output from ls command is stripped out (irrelevant stuff)

As-is (minified)

$ ls -lhS
566K Jan 4 22:03 angular2.min.js

Haskell vs Clojure

The JSON data is in the following format

{
    "Genesis": {
        "1": {
            "1": "In the beginning..." ,
            "2": "..."

	'use strict';
	//////////////////////////////////
	// How to use?
	// 1. Create `sequelize-schema-file-generator.js` in your app root
	// 2. Make sure you've ran the `sequelize init` before (It should create `config`,`seeders`,`migrations` folders).
	// 3. Update `DATABASE_DSN` below to match your connection string (works with any database adapter that Sequelize supports)
	// 4. Run it with `node sequelize-schema-file-generator.js`
	// 5. Review the generated migrations inside of the `migrations` folder.
	//////////////////////////////////

	import * as models from "models";
	import Sequelize from "sequelize";
	import fs from "fs";

	delete models.default;

	const sequelize = new Sequelize(
	'',
	'',
	'', {

	<!DOCTYPE html>
	<title>Render Queue</title>
	<style type="text/css">
	html, body { background: #f7f7f7; height: 100%; margin: 0; padding: 0; color: #b6b6b6; font-family: Ubuntu, Helvetica, sans-serif; font-size: 15px; line-height: 1.35em;}
	a { color: #6be; text-decoration: none; }
	#canvas { position: fixed; }
	#center { position: absolute; top: 0; left: 0; margin: 40px; width: 520px; padding: 20px; background: #444; background: rgba(0,0,0,0.9); border-radius: 8px;}
	h1 { margin-top:0; padding: 3px 0; font-size: 1.4em; }
	h1, h3 { color: #f9f9f9; border-bottom: 1px solid #333; }
	h3 { font-size: 1em; }