We Create Digital: Frontend Coding Standards

Welcome to our Frontend Coding Standards document. In the fast-paced world of web development, creating exceptional user experiences relies on consistent, well-organised code. These standards serve as a compass for our frontend team, ensuring our web applications are visually appealing, performant, and maintainable.

Our frontend coding standards cover everything from HTML, CSS, and JavaScript to accessibility and modern tooling. By adhering to these guidelines, we aim to:

Thank you for your commitment to these standards, and let's create amazing web applications together.

New Projects

HTML

PHP, Blade & Laravel

CSS, SASS, LESS, Tailwind CSS (and Other Frameworks)

/**
 * 'components.css/components.scss/components.less'
 */

@layer components {
    .btn {
        @apply ...Tailwind classes,
    }
}

.class-1,
.class-2 {
    ...styling 
}

SASS and LESS Specific

JavaScript

/**
 * 'checkout.js'
 */

'use strict';

class Checkout {
    variable;

    constructor (variable) { 
        this.variable = variable;
     }

    processPayment() { /* ...functionality */ }

    // ...Other functionality
}

export default Checkout;

/**
 * 'app.js'
 */

'use strict';

import Checkout from './modules/checkout';
// ... more imports

const checkout = new Checkout(variable);
// ... more declarations

class Checkout {
    // ...class declaration

    async processPayment(checkoutSession) {
        const paymentIntent = await this.getPaymentintent();
        const paymentDetails = this.getPaymentDetails();
        
        await this.finalisePayment(checkoutSession, paymentIntent, paymentDetails);
    }

    // ...more functions and end of class
}

const compliment = `${name} is awesome!`;

const favColour = (colour = 'blue') => {
    return `My favourite colour is ${colour}`;
}

Legacy Projects

Legacy projects will have different style codebases to work from. Unless there is budget in the project to refactor the code, you should try to stick to the code conventions used in that particular project.

Spend some time getting accustomed to any differences that there may be in the codebase to these standards. Below are lists of where you may find differences in some of the codebases. Try to stick to our standards as much as possible unless listed below.

HTML

CSS, SASS, LESS, Tailwind CSS (and Other Frameworks)

JavaScript & jQuery

// Classic function
function helloWorld() {
    console.log('Hello world');
}

// Arrow function
const helloWorld = () => console.log('Hello world');