Neil Gardose nkpgardose

CSS Code Guidelines

We all know when project/s gets really big, CSS problems will pop out and will take a lot of your time troubleshooting rather than finishing your tasks. Here are some problems:

Rule clash, since the project is big. There's a possibility of rule clash.
Cascading too much #override-sale .checkout-dog .full-width .button-primary is real. Specificity makes the style hard to refactor and introduce unnecessary performance overhead for applying styles
Class with JS on it are hardest to deal with.

This is a simple guidelines that I'm implementing when doing CSS. Adapted from the work being done in the SUIT CSS framework and @fat's guideline. Which is to say, it relies on structured class names and meaningful hyphens (i.e., not using hyphens merely to separate words). This is to help developers to quickly understand the code even at glance.

Useful command using ol' plain terminal

Position the cursor in your terminal

alt + [cursor]

pbcopy & pbpaste

$ echo 'Hello World' | pbcopy

	// Third-party libraries
	@import "foundation-sites/vendor/normalize";
	// Sass utilities
	@import "foundation-sites/util/util";

	// Global variables and styles -- Add a global file `app/assets/stylesheets`
	@import "global";

	// Components
	@import "foundation-sites/grid/grid";

	source 'https://rubygems.org'

	gem 'bundler', '>= 1.8.4'
	gem 'hpricot'
	gem 'premailer-rails'
	# Add devise (Dependent on bycrypt for has_secure_password)
	gem 'devise'
	# Lest worry on browser support and just write styles
	gem "autoprefixer-rails"
	# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'

	.clamp {
	overflow: hidden;
	}
	.clamp.is-active {
	position: relative;
	height: 7em;
	}
	.clamp.is-active:after {
	content: "";
	text-align: right;