--- layout: default --- {% include section-header.html title="html" %}

Elements

Add closing tags to elements that aren't self-closing. ¹
Don't add the forward slash for self-closing elements. ²
Avoid unnecessary markup, such as surrounding a block element in a <div>. ³
Use lowercase, not uppercase.

Attributes

Surround values for attributes in double quotes.
Boolean attributes, such as required, do not need a value. ¹
Follow this order for attributes: ²
1. class
2. id
3. name
4. data- attributes
5. for, href, value, etc.

Courtesies

Put a single line break between blocks/components.
Avoid adding comments. An exception would be a closing comment for large blocks. ¹

Reminders

Don't use styling tags such as <bold> and <hr>.
Do not inline Javascript.
HTML is about structure and meaning, not style or behavior.

{% include section-header.html title="css" %}

Formatting

Each selector in a group should be on its own line.
The opening brace belongs on the same line as the selector.
Put a space before the opening brace.
Each property and value pair gets its own line
Properties and values belong on the same line.
One space after the colon of a property.
Put a space after each comma.
Always end with a semicolon.

Sass

Stick to the basics: variables, includes, and mixins. ¹
Avoid nesting whenever possible. ²
Adhere to this order: ³
1. @include
2. regular styles
3. pseudo classes
4. nested items (only if you must)
5. media queries

CSS

Hyphen-delimit your class names.
Use lowercase, not uppercase.
Prefix decimals with a leading 0.
Don't specify units for zero values.
Do not style js- prefixed classes. ¹
Avoid using !important unless absolutely necessary. Restrict its use to utility classes prefixed with a u-. ²
Adhere to this property order:
1. Positioning (position, z-index...)
2. Box Model (display, margin...)
3. Typographic (font, color...)
4. Visual (background, opacity...)

Naming Convention

Find one you like and stick to it.
This site was made using BEM. Other options include:
1. OOCSS
2. SMACSS
3. Idiomatic CSS
4. RSCSS
5. Title CSS

Commenting

Use a title comment for sections/components. ¹
Keep comments coupled with the component/element. Don't put comments next to individual properties. ²
Don't comment about what you're doing. It's more important to comment why you're doing it. ³

Courtesies

Prefer rem over px values. ¹
Prefer seconds over milliseconds. ²
Be thoughtful of your shorthand notation. ³
Insert one newline between elements and 3 newlines between blocks/components.
Indent elements that belong together.

{% include section-header.html title="tools" %}

Editor Settings

Use UTF-8 encoding.
Use soft tabs set to 2 spaces.
Give yourself an 80 character wide guide
Remove any trailing whitespace.
Put a new line at the end of files.

Plugins

EditorConfig - helps maintain your coding style.
- Atom
- Sublime
Emmet - greatly improves the code writing workflow with shorthand, autocomplete, and more.
- Atom
- Sublime
Minimap - a full preview of your code in the sidebar.
- Atom
- Sublime

Resources

Trello - A look into how Trello writes their CSS.
Medium - Medium’s CSS is actually pretty f***ing good.
CSS Guidelines - High-level advice and guidelines for writing sane, manageable, scalable CSS.
GitHub Primer - Best practices and guidelines for writing HTML and CSS with approachable formatting, syntax, and more.
Sass Guidelines - An opinionated styleguide for writing sane, maintainable and scalable Sass.