# bendc/frontend-guidelines

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/bendc-frontend-guidelines).**

9,089 stars · 680 forks

## Links

- GitHub: https://github.com/bendc/frontend-guidelines
- awesome-repositories: https://awesome-repositories.com/repository/bendc-frontend-guidelines.md

## Description

This project is a comprehensive collection of frontend development best practices and standards. It provides guides for writing semantic HTML, efficient CSS, and functional JavaScript to improve overall web performance and accessibility.

The repository establishes frameworks for modern CSS architecture, focusing on specificity management and the use of Flexbox and Grid for predictable layouts. It outlines patterns for functional JavaScript programming, emphasizing the use of pure functions and composition to reduce execution time and dependency bloat.

The guidelines cover several core capability areas, including web accessibility implementation through HTML5 semantics and ARIA patterns, and web performance optimization via script deferral and the reduction of render-blocking resources. It also includes standards for maintaining clean stylesheets and optimizing JavaScript execution through memoized caching and the use of native browser APIs.

## Tags

### Testing & Quality Assurance

- [Web Accessibility Standards](https://awesome-repositories.com/f/testing-quality-assurance/accessibility-visual-testing/web-accessibility-standards.md) — Establishes structural conventions and marking standards to support assistive technologies through alt attributes and form labeling. ([source](https://github.com/bendc/frontend-guidelines#readme))
- [Web Accessibility](https://awesome-repositories.com/f/testing-quality-assurance/accessibility-visual-testing/web-accessibility.md) — Provides comprehensive guidelines for ensuring web content is perceivable and operable for all users. ([source](https://github.com/bendc/frontend-guidelines/blob/master/README.md))
- [Semantic Document Structures](https://awesome-repositories.com/f/testing-quality-assurance/accessibility-visual-testing/web-accessibility-standards/semantic-document-structures.md) — Provides standards for using semantic HTML5 elements to ensure accessibility and search engine indexing.

### Part of an Awesome List

- [CSS Style Guides](https://awesome-repositories.com/f/awesome-lists/devtools/css-style-guides.md) — Provides a standardized framework for managing CSS specificity, layouts, and efficient styling.
- [Web API Substitutions](https://awesome-repositories.com/f/awesome-lists/devtools/text-and-string-utilities/shell-native-substitutions/web-api-substitutions.md) — Provides patterns for substituting heavy external libraries with lightweight native browser implementations.
- [Platform and API Guidelines](https://awesome-repositories.com/f/awesome-lists/devtools/platform-and-api-guidelines.md) — Best practices for HTML, CSS, and JavaScript.

### Content Management & Publishing

- [Semantic Document Structuring](https://awesome-repositories.com/f/content-management-publishing/semantic-document-structuring.md) — Guides the creation of logical hierarchies using semantic HTML5 elements to ensure accessible document structures. ([source](https://github.com/bendc/frontend-guidelines#readme))

### Education & Learning Resources

- [Functional Programming Concepts](https://awesome-repositories.com/f/education-learning-resources/educational-resources/languages-and-programming-concepts/programming-language-mastery-guides/functional-programming-concepts.md) — Guides the application of functional programming principles like immutability and pure functions in JavaScript.
- [Frontend Development Guides](https://awesome-repositories.com/f/education-learning-resources/frontend-development-guides.md) — Serves as a comprehensive collection of standards for writing semantic HTML, efficient CSS, and functional JavaScript.

### Graphics & Multimedia

- [Flexbox and Grid Layouts](https://awesome-repositories.com/f/graphics-multimedia/web-standard-rendering/flexbox-and-grid-layouts.md) — Recommends using Flexbox and Grid layout engines to maintain flexible and responsive document flows.

### Programming Languages & Runtimes

- [Pure Functions](https://awesome-repositories.com/f/programming-languages-runtimes/pure-functions.md) — Advocates for the use of pure functions that return new values instead of modifying original inputs.
- [Browser API Implementations](https://awesome-repositories.com/f/programming-languages-runtimes/python-native-implementations/browser-api-implementations.md) — Encourages replacing heavy third-party libraries with lightweight custom code using built-in browser functionality.

### Software Engineering & Architecture

- [Pure Functional Logic Implementations](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/design-patterns/functional-design-patterns/pure-functional-logic-implementations.md) — Promotes the use of deterministic pure functions and functional composition to improve code reliability. ([source](https://github.com/bendc/frontend-guidelines#readme))
- [Frontend Architecture Best Practices](https://awesome-repositories.com/f/software-engineering-architecture/coding-best-practices/engineering-best-practices/frontend-architecture-best-practices.md) — Establishes a comprehensive set of best practices for scalable and maintainable frontend architecture.
- [CSS Architecture Patterns](https://awesome-repositories.com/f/software-engineering-architecture/css-architecture-patterns.md) — Outlines methodologies for structuring CSS using Flexbox, Grid, and specificity management for maintainable layouts.
- [Composable Logic Patterns](https://awesome-repositories.com/f/software-engineering-architecture/development-methodologies/engineering-best-practices/code-craftsmanship-standards/composable-logic-patterns.md) — Defines patterns for building complex behavior through the composition of small, reusable, single-purpose functions. ([source](https://github.com/bendc/frontend-guidelines/blob/master/README.md))
- [Function Composition](https://awesome-repositories.com/f/software-engineering-architecture/modular-program-composition/function-composition.md) — Outlines patterns for combining small, single-purpose pure functions to build complex application behavior.
- [Memoization Caches](https://awesome-repositories.com/f/software-engineering-architecture/memoization-caches.md) — Implements memoized caching of expensive functions and feature tests to eliminate redundant processing.

### User Interface & Experience

- [Accessibility Standards](https://awesome-repositories.com/f/user-interface-experience/accessibility-standards.md) — Implements accessibility standards using semantic HTML5 and ARIA patterns to ensure inclusive usability.
- [Efficiency Patterns](https://awesome-repositories.com/f/user-interface-experience/css-shorthand-definitions/efficiency-patterns.md) — Implements efficient CSS writing techniques using shorthand properties and relative units to avoid redundancy. ([source](https://github.com/bendc/frontend-guidelines/blob/master/README.md))
- [Stylesheet Maintainability Standards](https://awesome-repositories.com/f/user-interface-experience/stylesheet-maintainability-standards.md) — Provides standards for box-modeling and positioning to ensure stylesheet maintainability and consistency. ([source](https://github.com/bendc/frontend-guidelines#readme))
- [Style Specificity Resolution](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/style-specificity-resolution.md) — Provides a strategy for specificity resolution by restricting the use of IDs and important flags.
- [CSS Transform Animations](https://awesome-repositories.com/f/user-interface-experience/component-utilities/animation-engines/css-transform-animations.md) — Optimizes animation performance by limiting CSS transitions to opacity and transform properties. ([source](https://github.com/bendc/frontend-guidelines/blob/master/README.md))
- [Hardware Acceleration Optimization](https://awesome-repositories.com/f/user-interface-experience/component-utilities/animation-engines/css-transform-animations/hardware-acceleration-optimization.md) — Provides guidelines for offloading CSS animations to the GPU by limiting properties to opacity and transform.

### Web Development

- [CSS Specificity Management](https://awesome-repositories.com/f/web-development/css-specificity-management.md) — Establishes standards for controlling selector specificity to ensure a predictable and overridable style hierarchy.
- [Frontend Performance Optimization](https://awesome-repositories.com/f/web-development/frontend-performance-optimization.md) — Offers techniques for optimizing script loading, style isolation, and image compression to improve page speed. ([source](https://github.com/bendc/frontend-guidelines#readme))
- [Modern CSS Best Practices](https://awesome-repositories.com/f/web-development/modern-css-best-practices.md) — Provides a curated collection of modern CSS techniques for creating maintainable and predictable layouts.
- [Page Speed Optimizations](https://awesome-repositories.com/f/web-development/page-speed-optimizations.md) — Provides techniques to reduce page load times and improve rendering performance through asset optimization.
- [Render-Blocking Resource Optimization](https://awesome-repositories.com/f/web-development/render-blocking-resource-optimization.md) — Provides strategies for deferring non-critical assets to prevent render-blocking and accelerate initial page paint.
- [Pure Function Patterns](https://awesome-repositories.com/f/web-development/side-effect-management-libraries/pure-function-patterns.md) — Provides patterns for using pure functions and composition to eliminate state mutation and reduce dependency bloat.
- [Web Performance Optimizations](https://awesome-repositories.com/f/web-development/web-performance-optimizations.md) — Offers a detailed manual for accelerating page loads through script deferral, asset compression, and reducing render-blocking resources.
- [Initial Page Load Optimizations](https://awesome-repositories.com/f/web-development/performance-optimizations/initial-page-load-optimizations.md) — Provides strategies for deferring non-critical assets to prevent render-blocking and accelerate initial page loads. ([source](https://github.com/bendc/frontend-guidelines/blob/master/README.md))
- [Execution Optimization Patterns](https://awesome-repositories.com/f/web-development/side-effect-management-libraries/pure-function-patterns/execution-optimization-patterns.md) — Recommends using pure functions, functional composition, and native APIs to optimize JavaScript execution.

### Data & Databases

- [Computational Caching](https://awesome-repositories.com/f/data-databases/filesystem-cache-stores/file-lookup-caches/execution-result-caches/computational-caching.md) — Implements caching for expensive computations and feature tests to reduce JavaScript execution time. ([source](https://github.com/bendc/frontend-guidelines/blob/master/README.md))

### Development Tools & Productivity

- [Dependency Minimizers](https://awesome-repositories.com/f/development-tools-productivity/package-dependency-managers/dependency-bloat-reducers/dependency-minimizers.md) — Encourages reducing dependency bloat by replacing third-party libraries with native language features. ([source](https://github.com/bendc/frontend-guidelines/blob/master/README.md))

### Operating Systems & Systems Programming

- [GPU-Accelerated UI Rendering](https://awesome-repositories.com/f/operating-systems-systems-programming/hardware-interfacing-drivers/hardware-acceleration/graphics-acceleration/gpu-accelerated-ui-rendering.md) — Guides the use of GPU acceleration for rendering UI elements via opacity and transform properties.