Media Query Placement

Place media queries as close to their relevant rule sets whenever possible. Don't bundle them all in a separate stylesheet or at the end of the document. Doing so only makes it easier for folks to miss them in the future.

Nesting

Avoid unnecessary element nesting. Consider nesting only if you must scope styles to a parent and if there are multiple elements to be nested. However, this should be very rarely needed, if at all.

When working with modules, you can use Sass’ ampersand feature to nest modifier and child declarations, which can help to organise blocks of code without creating verbose declarations as an end result.

JavaScript

Separation of Concerns

JavaScript behaviour should never be linked to classes. By using classes as styling hooks only and the data-js attribute for JS behaviour only, we are preventing any possibility of the two ever crossing streams. Any changes to classes will never affect the JS behaviour and vice versa. This post explains this concept and its advantages well.

Ordered List

Another item which has a bit more text Another item which has a bit more text Another item which has a bit more text

Definition Lists

Coffee

- black hot drink

Milk

- white cold drink

Quotes

Blockquote

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.

Franz Kafka

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.

Franz Kafka

Short Quote

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.

Code Blocks

When using code blocks, ensure that the prism.css and prism.js files are included on the page/template.

<pre class="language-markup maxwidth980"><code>
<p>When using code blocks, ensure that the prism.css and prism.js files are included on the page/template.</p>
</code></pre>

Icon Panels

03modules/icon-panels.scss

User-Centred Development

I really do believe that the web is for everyone and will always do my best to be the users’ advocate. This means my focus throughout design reviews and site builds will lie with accessibiliy, progressive enhancements, responsive techniques, and optimising performance.

Modular CSS

I love taking designs apart into components and then convert those into streamlined, modular code. For most projects, I will start by coding up a well-documented comprehensive style guide. With this and detailed planning, the 'puzzle pieces' can easily fall into place and integrate with the back-end. It also ensures that the site remains maintainable and extendable.