Website Style Programming

How to make it clean, pretty, easy, fun

Overview

Libraries
CSS wisdom
Specific CSS
Automation tasks
Automation Tools
CSS Naming conventions
JavaScript
References
More on front-end software development

Here are tools and rules I try to use for styling websites.

### Colors:

What is too many colors? http://styletil.es

Libraries

GetBootstrap.com
font-awesome SVG icons
Google Accelerated Mobile Pages
Algolia search
EmailOctopus (based in London, England) provides analytics, bounce/complaint tracking, and email campaigns for contacts sent to it via an API. It is low cost because it stored emails in AWS cloud, under your account.
- This video explains the product
- This CodePen by Saijo George provides HTML and CSS for a simple form to send subscription info to EmailOcotopus.
- A Wordpress plug-in is available.
Prism.js and prism.css (2KB minified) is a syntax highlighter. In the examples page, click the various styles at the right of the page to see changes reflected.
Google Analytics

CSS wisdom

tshirt you are the css to my html 300x250-15kb

Many developers have declared “enough” and have switched to HTML5-only websites as less and less enterprises have given up on demanding their users only use Microsoft-only browers.

In HTML:

Use HTML5 tags instead of <div :
<main so screen readers know where to look for content
<section to separate topics within a page
Within <header & <footer, use <div to separate sub-sections

In CSS:

Use a pre-processor which substitute actual CSS for variables you define:
- Less on NodeJs to use .less files which extend CSS syntax (used by Bootstrap)
- SASS on Ruby to use .scss which extends CSS or .sass using indented syntax
- Stylus on NodeJs to use .styl files containing either syntax
- PostCSS for JavaScript processing
Use cleaner indented syntax:
- .styl for stylus files (rather than .styl)
- .sass for Sass files ()
sassmeister.com displays expanded CSS from SASS.
Use CSS IDs (#tag) for navigation JavaScript (they’re faster)
Use CSS classes (.tag) for styling
Code CSS or SCSS in several files:
- _base.css
- _typography.css
- _layout.css
Name files with leading underline when they are combined into a main.css file.
Use HTML5 Data-* attributes to supply additional information
Normalize “user agent stylesheet” of each browser (inconsistent) by adding styles in a stylesheet rather than starting out with a CSS Reset that creates an un-styled baseline
Harry Roberts at CSSWizardry recommends putting “hack-y” questionable CSS in a separate file named “shame.css” For example, styles specific to a browser, such as ie9, put in a separate file:
```
File: ie-9.css
.ie9 a { padding: 20px; }
 
File: ie-10.css
.ie10 a { margin: 2px; }
.ie10 p { line-height: 1; }
 
```
Use view port percentage lengths (1 vh = 1% of height, 1 vw = 1% of width, vmin, vmax)

Cache selectors for re-use:

var modal = document.getElementById('modal');
modal.onclick = function(){
 // do something.
}
// jQuery:
var modal = $("#modal");
modal.fadeIn();
modal.fadeOut();

Specific CSS

Use “last” ascender to lists to add extra space after the last item in a list.
Mixins
Use JSBin.com to experiment with CSS and JavaScript rendering online.

Automation tasks

Here are automation tricks:

CSS Specificity calculator based on this W3 standard
Identify CSS tags not referenced in HTML
Mimify CSS files for publishing to sites so there is no penalty for adding comments
For websites not using HTTP2, combine several CSS into one file
Pre-Compress images in basic sizes (HD display, tablet, mobile, etc.) to save download time.

Automation Tools

The workflow is automated by task runners:

CodeKit refreshes the browser whenever it detects file changes occurred
GulpJs
GruntJs
Koala
Autoprefixer uses the caniuse.com to code for you

CSS Naming conventions

These prevent errors:

Use hyphens to separate words in a sentence
Use underlines to separate compound words
Use functional names such as “submit-button”
Avoid names such as “red-button” what it looks like

JavaScript

Separate scripts in modals.js and themes.js
Combine all minified files together in one global.js for production publication
Use CDN but have fall-back local copy

References

These are from:

BEM.info (Block, Element, Modifier) frontend development methodology to provide transparency and meaning
support.google.com/webmasters
Idiomatic CSS
Airbnb CSS / SASS Styleguide
Trello CSS Guide
Code Guide by @mdo, developer at GitHub
Wordpress Coding Standards include HTML and CSS, not just the PHP
How to structure a Sass Project
Organizing Your CSS Code for Preprocessors
structure-css
Chrome: Working with CSS Preprocessors
Firefox Developer Tools: Style Editor
CSS Reference
CSS Performance has changed (for the better)
CSS Performance revisited: selectors, bload, and expansive styles

More on front-end software development

This is one of several topics:

Wilson Mar