Style Guides

A style guide (or manual of style) is a set of standards for the writing and design of documents, either for general use or for a specific publication, organization, or field.
https://en.wikipedia.org/wiki/Style_guide

The differences between writing 'website' or 'web site', between indents being a 'tab' or 'four spaces', between .class-name { this: that; } or .className{this:that}, etc.


Index



  • Introduction

  • Writing

  • HTML

  • CSS

  • JavaScript

  • PHP

  • MySQL

  • Bash

  • Swift

  • Life




Introduction
the foundation of this page


My choices are a result of how something feels or looks to me. How it's easier for me to work with. Sometimes displaying code in a certain way gives me overview and clarity. What's listed on this page is nothing more but personal preference, through example.

It's all about consistency, but I've been lacks.What's listed on this page is nothing more but a collection of my personal preference, through example.

For orderliness I shall try to put what's 'right' first, optionally followed by 'wrong'.

For example: 'website' vs 'web site'
(meaning, I shall write 'website' without a space).


Writing
writing, editing, and English usage


Some rules, guidelines, choices and preferences that I try to apply when writing. Specially International/English (UK). Yes, that means colour, and not color.

My operating systems are set to English (UK), and a great resource that I refer to is The Guardian's style guide.

Respect the Oxford Comma.


HTML
Hypertext Markup Language


A standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.

Version: HTML5

A rule of thumb is to write everything in lowercase, and nest tags and their content.

Right:
<div class="container">
<p>
It was a cold day in Spring.<br>
She could not believe her eyes when the door opened, and there he was.
</p>
</div>


Wrong:
<div class="container"><p>It was a cold day in Spring.

<br>She could not believe her eyes when the door opened, and there he was.</p></div>


Link to CSS and JavaScript files. Don't use @import, nor use in-line code.


CSS
Cascading Style Sheet


A web page derived from multiple sources with a defined order of precedence where the definitions of any style element conflict.

Version: CSS3

A rule of thumb is to write everything in lowercase, and split multiple words with a dash '-'.

Right:
body {
width: 970px;
margin: 0 auto;
}
.article-introduction {
font-weight: 700px;
}
#article-author {
font-size: 12px;
}


Wrong:
body
{
width: 970px;margin:0 auto;
}
.article-introduction
{font-weight: bold; }
#article-author {font-size:12em}


CSS files should be offered minified and optionally cached.


The rest :)