Summary of CSS Coding Guidelines - ΩJr. Coding Guidelines

This information lives on a webpage hosted at the following web address: 'https://www.omegajunior.net/code/guidelines/'.

CSS Coding Guidelines are intended to make it easier to read our work, both for colleagues when we are away, and for ourselves in a year's time.

This is a summary. It contains the guidelines and examples. Explanations can be found in the annotated version.

Suggestions are welcome.

A word from a sponsor:


Know your CSS
CSS basics, from the Web Standards Curriculum.


Avoid depending on CSS for critical functionality
Add server-side intelligence.


Get along with clients on all kinds of devices


Like so:
/* Samples taken from Zjramble5, used with permission */
body {
max-width: 600pt;
margin-left: auto;
margin-right: auto;
}
button {
font-size: 14pt;
height: 28pt;
font-weight: bold;
margin: 0;
padding: 0pt 4pt;
width: auto;
min-width: 49pt;
text-align: center;
cursor: pointer;
-webkit-tap-highlight-color: rgba(4,96,179,0.3);
-webkit-appearance: none;
color: #fff;
background-color: #000;
background-image: url(myBadlyShapedLowResButtonImage.png);
background-image: -ms-linear-gradient( rgb(255,255,255),
rgba(255,255,255,0));
background-image: -moz-linear-gradient( rgb(255,255,255),
rgba(255,255,255,0));
background-image: -o-linear-gradient( rgb(255,255,255),
rgba(255,255,255,0));
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,
from(rgb(255,255,255)),
to(rgba(255,255,255,0)));
background-image: linear-gradient( rgb(255,255,255),
rgba(255,255,255,0));
-moz-text-shadow: 0pt -1pt 1pt #111;
-ms-text-shadow: 0pt -1pt 1pt #111;
-o-text-shadow: 0pt -1pt 1pt #111;
-webkit-text-shadow: 0pt -1pt 1pt #111;
text-shadow: 0pt -1pt 1pt #111;
}



Get along with CMS implementors



Adding CSS to your web pages
<link rel="stylesheet" title="myStyle" media="all" type="text/css" href="myStyle.css?20111020T1616" />

Or:
<style type="text/css" id="myStyle">/* <![CDATA[ */
body{
background-color: #fff;
color: #000;
}
/* ]]> */</style>



Start big, end small
Blatantly copied from WNAS CSS Coding Conventions: start defining the largest elements, and work your way towards more specificity. At the top of your CSS we should find html and body, and as we read our way down, the elements and selectors should become smaller and more specific.

Wrong:
a{}
li{}
ul{}
p{}
body{}
html{}


Better:
html{}
body{}
div{}
p{}
ul{}
li{}
a{}



On tables
Use tables for tabular data. Prefer the use of semantically relevant elements, like article, aside, header, footer, hgroup, menu, and structurally relevant CSS properties like column-width, but consider the supported browsers.


Avoid procedural rules where declared rules work
Sometimes we want to use Javascript (libraries) to set CSS or create animations. If you can use a CSS rule declaration instead of a scripted procedure, do so. (Do take ease of development into consideration, and talk to the Javascript developers.)

If you must use Javascript to set CSS, do so by adding or removing a CSS class, rather than each property individually (or the whole CSS rule for that element at once).


Use short-hand notation where possible

Example of full notation:
.myBlock { background-color: transparent; background-image: url(myImage.png); background-attachment: scroll; background-repeat: no-repeat; background-position: center center; }

Example of short-hand notation:
.myBlock { background: transparent url(myImage.png) scroll no-repeat center center; }

However, when setting just one property, using short-hand is wrong, because it will overrule the other implied properties.


Remember a background colour
Help the visitor: provide a background colour.

Wrong:
body{
font-size: medium;
padding: 8pt;
}
p{
padding: 8pt;
margin: 8pt 0pt 16pt;
color: #000;
}
a{ color: blue; }


Better:
body{
font-size: medium;
padding: 8pt;
background-color: white;
}
p{
padding: 8pt;
margin: 8pt 0pt 16pt;
color: #000;
}
a{
color: blue;
background-color: white;
}


Even better:
body{
font-size: medium;
padding: 8pt;
color: #000;
background-color: white;
}
p{
padding: 8pt;
margin: 8pt 0pt 16pt;
}
a{
color: blue;
background-color: white;
}



Remember contrast
Colour Contrast Check


Put rule properties together that make sense together
And be consistent about it. Whether some selectors and properties make sense together, depends on the web page, so it will differ per project.

Wrong:
p.error{
color: #111;
border: none;
text-decoration: underline;
padding: 8pt;
background-color: #ecc;
font-style: italic;
}


Better:
p.error{
color: #111;
background-color: #ecc;
font-style: italic;
text-decoration: underline;
padding: 8pt;
border: none;
}



On whitespace and block style for selectors and properties


/* no comparison needed */
fieldset {
background-color: #ddd;
color: #000;
border: 1pt solid black;
border-radius: 5pt;
margin: 8pt;
padding: 8pt;
}

/* comparison needed */
fieldset#gameStart { background-color: #ffc; }
fieldset#gameActive { background-color: #9d9; }
fieldset#gameOver { background-color: #600; color: #fff; }



Provide semantically relevant class names and element IDs
Name classes and elements after what they are used for in the web page. Be as specific as needed. What proves semantically relevant, depends on the type of page.


Use camel casing for class names and element IDs
Normally we would add a space to signify the start of new words. Since CSS class names and element IDs must not contain spaces, we advise camel-casing: concatenate all the words in a class name and start each word with a capital letter, except for the very first one, which must start with a lower case letter. Avoid underscores, hyphens, and other marks. These are camel-cased, and on some pages also semantically relevant class names:
leftSidebarBlock
footerServiceLink
newsArticleButton



Use consistent colour value casing
Some guidelines will tell you to use upper case for hexadecimal colour values. This guideline doesn't care, as long as you stick with the choice you made.


Prepend your CSS files with a JavaDoc-like comment block
Preferably one that holds useful information, e.g.:
/**
* myStyle.css
* @use For template: thisPageType
* @author Our company <us@here.now>
*/



Use a CSS validator
It will find grammatical and some usability errors. It will not find functional errors. Use common sense and browser-comparison services for functional testing.

Need problem solving?

Talk to me. Let's meet for coffee or over lunch. Mail me at “code at omegajunior dot net”.

Clicky Analytics