Skip to content

Latest commit

 

History

History
102 lines (75 loc) · 3.06 KB

STYLEGUIDE.md

File metadata and controls

102 lines (75 loc) · 3.06 KB
Raw

Women Techmakers Bamenda Community Frontend Coding Style Guide

Welcome to the Women Techmakers Bamenda (WTM Bamenda) community's frontend coding style guide. This document outlines the coding conventions and best practices to follow when contributing to our frontend projects. Consistency in coding style helps maintain code readability and makes collaboration smoother.

Table of Contents

General Guidelines

  • Write clean, readable, and maintainable code.
  • Keep your code DRY (Don't Repeat Yourself) by reusing code when applicable.
  • Use meaningful variable and function names.
  • Avoid commented-out code in the repository; use version control for historical code.

HTML

  • Use semantic HTML elements for better accessibility and SEO.

  • Maintain proper indentation and formatting.

  • Include descriptive alt text for images.

    <!-- Good -->
<button type="submit">Submit</button>
<img src="profile.jpg" alt="User Profile" />

<!-- Avoid -->
<div onclick="submitForm()">Submit</div>

CSS

  • Follow a consistent CSS naming convention such as BEM (Block, Element, Modifier).

  • Use meaningful class names and IDs.

  • Group related styles together in the stylesheet.

       /* BEM Example */
.profile-card {
  /* ... */
}

.profile-card__header {
  /* ... */
}

.profile-card--highlighted {
  /* ... */
}

JavaScript

  • Follow ESLint rules for JavaScript code quality.

  • Use semicolons at the end of statements.

  • Use single quotes for strings unless interpolating variables.

  • Use const for variables that do not need reassignment, let for variables that do.

  • Use arrow functions for concise anonymous functions.

    // Good
const age = 30;
const name = 'Jane Doe';

// Avoid
var x = 10;

React

  • Follow the Airbnb React/JSX Style Guide.

  • Use functional components with hooks whenever possible.

  • Keep components small and focused on a single responsibility.

       // Functional Component
function UserProfile(props) {
  // ...
}

Version Control

  • Use Git for version control.
  • Create feature branches for each new feature or bug fix.
  • Write meaningful commit messages that summarize the changes.

Dependencies

  • Document and keep track of project dependencies in a package.json file.
  • Regularly update dependencies to benefit from security patches and new features.

Additional Resources

Airbnb JavaScript Style Guide BEM - Block Element Modifier MDN Web Docs - HTML MDN Web Docs - CSS React Documentation