zspecza zspecza

Stylus Best Practices

Introduction

This is a curated set of conventions and best practices for Stylus, an expressive, dynamic, robust and advanced CSS preprocessor. Frustrated with there not being a set of conventions set in place (that could be easily found), I set forth to find out on my own.

CSS Preprocessor Micro-Specification

Introduction

This is a conceptual specification for what could/would/should be the preprocessor to end all preprocessors. Unfortunately, it is just that - a specification. I had made quite a few attempts to create a CSS preprocessor, but I am far too inexperienced with advanced programming to succeed at this task. I got as far as the scanner and half of a half-working tokenizer before proceeding to pull my hair out. So I gave up, and decided just to list the proposed features here for reference. Perhaps these will make their way into existing pre-processors, or even inspire the birth of a new one.

First off, the basic features:

Pretty much everything the 3 leading pre-processors offer in terms of:

	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Futuristic HUD single-div no-image CSS3 loading spinner" />
	<title>CSS3 Loading Spinner</title>
	</head>
	<body>
	<div id="spinner"></div>
	</body>
	</html>

	###
	# Solo Pong - Declan de Wet
	# TODO: Prevent paddle from going out of the viewport
	# TODO: Implement collision animations
	# TODO: Music and sound
	# TODO: Keyboard controls
	###


	# Create a self-instantiating shim/polyfill for the requestAnimationFrame API, if it does not exist,

	// Vertical Rhythm ported from SASS/Compass
	// Works exactly as before, with four exceptions:
	// 1. rhythm() is a mixin, $rhythm() is a function. Stylus doesn't differentiate between same-name mixins and functions
	// 2. All of the variables you're used to lack the dollar sign ($) prepend.
	// 3. debug-vertical-alignment uses a temporary online image solution via http://basehold.it
	// 4. There is no h-borders alias. Use horizonatal-borders instead.

	// The base font size.
	base-font-size ?= 16px

	{
	"auto_complete_commit_on_tab": true,
	"bold_folder_labels": true,
	"caret_style": "phase",
	"color_scheme": "Packages/Tomorrow Color Schemes/Tomorrow-Night.tmTheme",
	"create_window_at_startup": false,
	"default_line_ending": "unix",
	"detect_slow_plugins": false,
	"draw_minimap_border": true,
	"ensure_newline_at_eof_on_save": true,

	###
	brainfuck() function
	description: takes a string of Brainfuck code and returns the parsed result
	usage: brainfuck('++++++++++[>+++++++>++++++++++>+++>+<<<<-]>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>.')
	// output: 'Hello World.'
	###

	brainfuck = (code) ->
	inp = '23\n'
	out = ''

	;(function(undefined) {

	'use strict';

	var debug = function(err) {
	console.error(err.message + '\n' + err.stack);
	};

	try {

	/* private modernizr mixin
	*
	* downside - only works on single-element selectors. nesting still works though.
	*
	* @param features - a list of modernizr test classes e.g.: csstransitions opacity OR csstransitions, opacity
	* @param declaration - the {block} of content passed by the block mixins +yep()/+nope()
	* @param support - boolean, true if testing support, false if testing no support
	*
	* 1. if testing for support, set selector to empty string
	* if testing for no support, set selector to ".no-js" appended by

	/=====================================\
	build tasks
	\=====================================/

	/**
	* This gulpfile is optimised for developing
	* React.js apps in ES6 through Babel, and is
	* designed to live-inject CSS, HTML and even JavaScript
	* changes so maintaining state in an application when
	* editing code is super easy.