# ecomfe/spec

**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/ecomfe-spec).**

4,605 stars · 1,591 forks

## Links

- GitHub: https://github.com/ecomfe/spec
- awesome-repositories: https://awesome-repositories.com/repository/ecomfe-spec.md

## Description

Spec is a comprehensive set of frontend coding standard specifications and project architecture guides. It provides a framework for organizing directory structures, module dependencies, and package layouts to create scalable and predictable codebases.

The project defines rigorous governance standards for React components, including specific naming conventions and structural patterns for props. It also establishes a JSON API data specification to ensure predictable communication between system components through standardized exchange formats and HTTP response structures.

The specification covers a broad range of capabilities including web accessibility compliance through semantic HTML and accessible form controls, as well as web performance optimization strategies for DOM manipulation and resource loading. It further details standards for JavaScript, HTML, and CSS coding styles to maintain consistency across development teams.

## Tags

### Software Engineering & Architecture

- [Frontend Code Governance](https://awesome-repositories.com/f/software-engineering-architecture/frontend-code-governance.md) — Defines and enforces shared styling and structural guidelines for JavaScript, HTML, and CSS across frontend teams. ([source](https://github.com/ecomfe/spec#readme))
- [Component Governance Standards](https://awesome-repositories.com/f/software-engineering-architecture/component-governance-standards.md) — Defines rigorous naming conventions and structural patterns for React components and props.
- [Data Exchange Standards](https://awesome-repositories.com/f/software-engineering-architecture/data-exchange-standards.md) — Establishes standardized JSON data exchange formats to ensure reliable communication between system components. ([source](https://github.com/ecomfe/spec#readme))
- [JavaScript](https://awesome-repositories.com/f/software-engineering-architecture/development-methodologies/engineering-best-practices/code-craftsmanship-standards/coding-standards/javascript.md) — Provides mandatory syntax and naming rules to ensure consistency across frontend JavaScript projects. ([source](https://github.com/ecomfe/spec/blob/master/es-next-style-guide.md))
- [Frontend Architecture Patterns](https://awesome-repositories.com/f/software-engineering-architecture/frontend-architecture-patterns.md) — Organizes directory structures and module dependencies to create scalable frontend architectures.
- [Frontend Architectures](https://awesome-repositories.com/f/software-engineering-architecture/frontend-architectures.md) — Provides a structured framework for organizing directory layouts and module dependencies in frontend projects.
- [Logical-to-Physical Directory Mapping](https://awesome-repositories.com/f/software-engineering-architecture/logical-to-physical-directory-mapping.md) — Provides a framework for grouping source files by business logic to create a predictable and scalable directory structure.
- [Modular Feature Architectures](https://awesome-repositories.com/f/software-engineering-architecture/modular-feature-architectures.md) — Implements a modular architecture using the AMD standard to organize the codebase into portable units. ([source](https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md))
- [Naming Conventions](https://awesome-repositories.com/f/software-engineering-architecture/naming-conventions.md) — Applies specific casing and naming patterns for React components and props to improve readability. ([source](https://github.com/ecomfe/spec/blob/master/react-style-guide.md))
- [Project Organization](https://awesome-repositories.com/f/software-engineering-architecture/project-management-governance/repository-maintenance/project-organization.md) — Defines package structures and directory layouts to ensure a predictable and scalable codebase. ([source](https://github.com/ecomfe/spec#readme))
- [Project Structure Standardization](https://awesome-repositories.com/f/software-engineering-architecture/project-structure-standardization.md) — Defines shared file patterns and directory layouts for reusable code sets to ensure predictable project organization. ([source](https://github.com/ecomfe/spec/blob/master/package.md))
- [React Project Layouts](https://awesome-repositories.com/f/software-engineering-architecture/project-structure-standardization/react-project-layouts.md) — Organizes React component files and export patterns to ensure consistency across the codebase. ([source](https://github.com/ecomfe/spec/blob/master/react-style-guide.md))
- [Business-Logic Based Organization](https://awesome-repositories.com/f/software-engineering-architecture/source-file-organization/business-logic-based-organization.md) — Groups source code into directories based on functional business modules to improve maintainability. ([source](https://github.com/ecomfe/spec/blob/master/directory.md))
- [Build Artifact Separations](https://awesome-repositories.com/f/software-engineering-architecture/build-artifact-separations.md) — Provides guidelines for distinguishing development source files from compiled production assets to maintain clean project structures. ([source](https://github.com/ecomfe/spec/blob/master/directory.md))
- [Code Documentation Standards](https://awesome-repositories.com/f/software-engineering-architecture/code-documentation-standards.md) — Standardizes the use of JSDoc block comments and tags to create self-documenting code. ([source](https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md))
- [Arrow Function Expressions](https://awesome-repositories.com/f/software-engineering-architecture/development-methodologies/engineering-best-practices/code-craftsmanship-standards/coding-standards/arrow-function-expressions.md) — Implements coding standards for arrow function expressions, including rules for parentheses and curly braces. ([source](https://github.com/ecomfe/spec/blob/master/es-next-style-guide.md))
- [Module Factory Patterns](https://awesome-repositories.com/f/software-engineering-architecture/module-factory-patterns.md) — Establishes the use of factory functions to create modules with consistent associations between logic and file paths.
- [Style Guide Enforcers](https://awesome-repositories.com/f/software-engineering-architecture/style-guide-enforcers.md) — Specifies the use of automated linting and fixing tools to enforce defined frontend coding standards. ([source](https://github.com/ecomfe/spec/blob/master/README.md))
- [Vendor Code Isolation](https://awesome-repositories.com/f/software-engineering-architecture/vendor-code-isolation.md) — Isolates external library packages into dedicated directories to prevent accidental modification of vendor code. ([source](https://github.com/ecomfe/spec/blob/master/directory.md))

### Part of an Awesome List

- [JavaScript Best Practices](https://awesome-repositories.com/f/awesome-lists/devtools/javascript-best-practices.md) — Defines guidelines for memory management and type checking to prevent runtime errors and memory leaks in JavaScript. ([source](https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md))
- [Code Quality and Standards](https://awesome-repositories.com/f/awesome-lists/devtools/code-quality-and-standards.md) — Technical specifications and coding standards.
- [Front End Standards](https://awesome-repositories.com/f/awesome-lists/devtools/front-end-standards.md) — Standardized coding specifications for front-end development.
- [Software Architecture](https://awesome-repositories.com/f/awesome-lists/devtools/software-architecture.md) — Standardized specifications for front-end development.

### Data & Databases

- [JSON Data Exchange](https://awesome-repositories.com/f/data-databases/json-data-exchange.md) — Specifies mandatory status and data fields for JSON HTTP responses to ensure predictable client-side processing.
- [Hierarchical Data Modeling](https://awesome-repositories.com/f/data-databases/hierarchical-data-modeling.md) — Provides a standardized object structure for organizing tree-based data and nested relationships. ([source](https://github.com/ecomfe/spec/blob/master/e-json.md))
- [Key-Value Naming Conventions](https://awesome-repositories.com/f/data-databases/key-value-pair-managers/key-value-naming-conventions.md) — Applies mandatory naming conventions to objects and collections to maintain data consistency across all interface components. ([source](https://github.com/ecomfe/spec/blob/master/e-json.md))

### Development Tools & Productivity

- [Code Style Standardization](https://awesome-repositories.com/f/development-tools-productivity/code-style-standardization.md) — Sets mandatory rules for indentation, spacing, and naming conventions for JavaScript code. ([source](https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md))
- [Module Dependency Classification](https://awesome-repositories.com/f/development-tools-productivity/external-module-declarations/runtime-module-declarations/module-dependency-classification.md) — Distinguishes between internal module references and external package dependencies to maintain clean loading paths. ([source](https://github.com/ecomfe/spec/blob/master/package.md))
- [Dependency Isolation](https://awesome-repositories.com/f/development-tools-productivity/package-dependency-management/dependency-isolation.md) — Requires separating third-party library packages into dedicated directories to isolate external code from project source.

### DevOps & Infrastructure

- [Source Code Module Imports](https://awesome-repositories.com/f/devops-infrastructure/dependency-management/environment-scoping-controls/linked-dependency-management/module-based-dependency-managers/source-code-module-imports.md) — Establishes a consistent approach for importing internal and external modules using requirement functions. ([source](https://github.com/ecomfe/spec/blob/master/module.md))
- [Package Metadata](https://awesome-repositories.com/f/devops-infrastructure/package-metadata.md) — Defines a standardized JSON manifest system for tracking package identity, versioning, and maintainer details. ([source](https://github.com/ecomfe/spec/blob/master/package.md))

### Programming Languages & Runtimes

- [Module Path Resolution](https://awesome-repositories.com/f/programming-languages-runtimes/module-path-resolution.md) — Defines rules for resolving module identifiers and prefixes to absolute or relative file system paths. ([source](https://github.com/ecomfe/spec/blob/master/module.md))
- [CSS and Preprocessor Formatting](https://awesome-repositories.com/f/programming-languages-runtimes/css-and-preprocessor-formatting.md) — Establishes formatting rules for CSS, SCSS, Sass, and Less files to ensure consistent code structure. ([source](https://github.com/ecomfe/spec/blob/master/css-style-guide.md))
- [Destructuring Style Enforcement](https://awesome-repositories.com/f/programming-languages-runtimes/destructuring-assignments/destructuring-style-enforcement.md) — Governs the use of object and array destructuring to reduce intermediate variables and nesting depth. ([source](https://github.com/ecomfe/spec/blob/master/es-next-style-guide.md))
- [JavaScript Transpilers](https://awesome-repositories.com/f/programming-languages-runtimes/javascript-transpilers.md) — Specifies the configuration of tools that transform modern JavaScript into browser-compatible versions. ([source](https://github.com/ecomfe/spec/blob/master/es-next-style-guide.md))
- [Formatting Standards](https://awesome-repositories.com/f/programming-languages-runtimes/language-features-paradigms/language-features/language-extensions/jsx-syntax/formatting-standards.md) — Applies specific rules for JSX tag closing and attribute formatting to ensure consistent UI code. ([source](https://github.com/ecomfe/spec/blob/master/react-style-guide.md))
- [Block-Scoped Variable Declarations](https://awesome-repositories.com/f/programming-languages-runtimes/language-features-paradigms/type-system-tools/type-definitions/variable-type-declarations/local-variable-declarations/block-scoped-variable-declarations.md) — Enforces the use of block-scoped declarations like let and const to improve scope clarity. ([source](https://github.com/ecomfe/spec/blob/master/es-next-style-guide.md))
- [Module Export and Import Systems](https://awesome-repositories.com/f/programming-languages-runtimes/module-export-and-import-systems.md) — Manages named and default exports to maintain modular consistency and organized import statements. ([source](https://github.com/ecomfe/spec/blob/master/es-next-style-guide.md))
- [Non-JavaScript Asset Imports](https://awesome-repositories.com/f/programming-languages-runtimes/module-importing/non-javascript-asset-imports.md) — Provides standards for integrating non-JavaScript assets like CSS and templates into the module dependency tree. ([source](https://github.com/ecomfe/spec/blob/master/module.md))
- [Package Dependency Management](https://awesome-repositories.com/f/programming-languages-runtimes/package-dependency-management.md) — Defines how to declare required and development dependencies using version range constraints. ([source](https://github.com/ecomfe/spec/blob/master/package.md))

### Testing & Quality Assurance

- [Web Accessibility Standards](https://awesome-repositories.com/f/testing-quality-assurance/accessibility-visual-testing/web-accessibility-standards.md) — Specifies the implementation of semantic HTML and accessible form controls to ensure a predictable user experience.
- [Semantic HTML Accessibility](https://awesome-repositories.com/f/testing-quality-assurance/accessibility-visual-testing/web-accessibility-standards/semantic-document-structures/accessibility-auditing/semantic-html-accessibility.md) — Enforces the use of semantic HTML tags according to their intended meaning to ensure web accessibility. ([source](https://github.com/ecomfe/spec/blob/master/html-style-guide.md))

### User Interface & Experience

- [Component Prop and Method Standards](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/rendering-models/ui-component-models/declarative-component-definitions/component-prop-and-method-standards.md) — Sets requirements for component types and prop definitions to maintain a consistent arrangement of methods. ([source](https://github.com/ecomfe/spec/blob/master/react-style-guide.md))
- [Typography Application Standards](https://awesome-repositories.com/f/user-interface-experience/android-typography-frameworks/typography-application-standards.md) — Defines font-family ordering and minimum sizes to ensure typographic consistency across platforms. ([source](https://github.com/ecomfe/spec/blob/master/css-style-guide.md))
- [Pure Components](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/rendering-models/composition-rendering-patterns/component-patterns/pure-components.md) — Implements logic to minimize browser updates by skipping rendering cycles when component data remains unchanged.
- [Performance Optimizations](https://awesome-repositories.com/f/user-interface-experience/css-selectors/performance-optimizations.md) — Defines rules for simplifying CSS selectors to speed up style calculations and improve maintainability. ([source](https://github.com/ecomfe/spec/blob/master/css-style-guide.md))
- [Markup Formatting Standards](https://awesome-repositories.com/f/user-interface-experience/graphical-user-interfaces/accessibility/accessible-content-structuring/semantic-markup-standards/markup-formatting-standards.md) — Enforces the use of lowercase tags and double-quoted attributes to ensure consistent HTML markup. ([source](https://github.com/ecomfe/spec/blob/master/html-style-guide.md))
- [Accessible Form Patterns](https://awesome-repositories.com/f/user-interface-experience/graphical-user-interfaces/accessibility/accessible-form-patterns.md) — Provides guidelines for associating form controls with labels and setting explicit button types for accessibility. ([source](https://github.com/ecomfe/spec/blob/master/html-style-guide.md))
- [Web Accessibility Compliance](https://awesome-repositories.com/f/user-interface-experience/graphical-user-interfaces/accessibility/web-accessibility-compliance.md) — Implements semantic HTML and accessible form controls to comply with web accessibility standards.
- [Media Asset Standards](https://awesome-repositories.com/f/user-interface-experience/media-asset-standards.md) — Manages image source requirements and establishes rules for using img tags versus CSS backgrounds. ([source](https://github.com/ecomfe/spec/blob/master/html-style-guide.md))
- [Stylesheet Maintainability Standards](https://awesome-repositories.com/f/user-interface-experience/stylesheet-maintainability-standards.md) — Applies encoding and organization rules to ensure maintainability across Less stylesheets. ([source](https://github.com/ecomfe/spec/blob/master/less-code-style.md))
- [Formatting Rules](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-utilities/conditional-style-queries/document-media-queries/formatting-rules.md) — Groups media queries with related rules and formats each condition on a new line for better readability. ([source](https://github.com/ecomfe/spec/blob/master/css-style-guide.md))
- [Template Formatting Standards](https://awesome-repositories.com/f/user-interface-experience/template-formatting-standards.md) — Defines indentation and syntax rules for templates to ensure HTML validity and readability. ([source](https://github.com/ecomfe/spec/blob/master/html-style-guide.md))
- [Visual Layering Systems](https://awesome-repositories.com/f/user-interface-experience/visual-layering-systems.md) — Implements a tiered z-index strategy to prevent element overlap conflicts in the UI. ([source](https://github.com/ecomfe/spec/blob/master/css-style-guide.md))

### Web Development

- [Response Structure Standardization](https://awesome-repositories.com/f/web-development/rest-apis/api-response-validation/response-structure-standardization.md) — Structures HTTP responses with mandatory status and data fields for predictable client-side processing. ([source](https://github.com/ecomfe/spec/blob/master/e-json.md))
- [Optimization Guides](https://awesome-repositories.com/f/web-development/web-performance-optimization-tools/optimization-guides.md) — Offers strategies for DOM manipulation, CSS animations, and resource loading to increase rendering speed.
- [Web Performance Optimizations](https://awesome-repositories.com/f/web-development/web-performance-optimizations.md) — Provides a holistic strategy for optimizing DOM manipulation, CSS animations, and resource loading.
- [Asynchronous Module Loading](https://awesome-repositories.com/f/web-development/asynchronous-module-loading.md) — Defines standards for managing dependencies using the Asynchronous Module Definition (AMD) pattern for portable code units.
- [CSS Animation Patterns](https://awesome-repositories.com/f/web-development/css-animation-patterns.md) — Establishes best practices for using high-performance CSS properties to ensure smooth animations. ([source](https://github.com/ecomfe/spec/blob/master/css-style-guide.md))
- [Property Declaration Ordering](https://awesome-repositories.com/f/web-development/css-property-management/property-declaration-ordering.md) — Groups CSS properties by layout, box model, and typography to improve stylesheet readability. ([source](https://github.com/ecomfe/spec/blob/master/css-style-guide.md))
- [Vendor Prefix and CSS Hack Standards](https://awesome-repositories.com/f/web-development/data-fetching-caching/data-fetching/browser-compatibility/vendor-prefix-and-css-hack-standards.md) — Defines the order of vendor-prefixed properties and the use of selector-based hacks for consistent browser rendering. ([source](https://github.com/ecomfe/spec/blob/master/css-style-guide.md))
- [Performance Optimizations](https://awesome-repositories.com/f/web-development/direct-dom-manipulation/performance-optimizations.md) — Provides strategies for increasing rendering speed by reducing page reflows and direct DOM manipulations. ([source](https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md))
- [Architecture Patterns](https://awesome-repositories.com/f/web-development/multi-page-entry-point-generation/architecture-patterns.md) — Organizes page entry files to support both single-page and multi-page application architectures. ([source](https://github.com/ecomfe/spec/blob/master/directory.md))
- [Component Update Optimizations](https://awesome-repositories.com/f/web-development/performance-optimizations/component-update-optimizations.md) — Implements pure component patterns and logic to reduce unnecessary UI re-renders. ([source](https://github.com/ecomfe/spec/blob/master/react-style-guide.md))
- [Render-Blocking Resource Optimization](https://awesome-repositories.com/f/web-development/render-blocking-resource-optimization.md) — Defines asset placement and URL strategies to prevent render-blocking and eliminate flashes of unstyled content. ([source](https://github.com/ecomfe/spec/blob/master/html-style-guide.md))

### Content Management & Publishing

- [Accessibility and Rendering Metadata](https://awesome-repositories.com/f/content-management-publishing/page-metadata-optimizations/accessibility-and-rendering-metadata.md) — Provides guidelines for configuring charset, title, viewport, and language attributes to optimize page rendering. ([source](https://github.com/ecomfe/spec/blob/master/html-style-guide.md))

### Graphics & Multimedia

- [Color Definitions](https://awesome-repositories.com/f/graphics-multimedia/color-definitions.md) — Standardizes the use of hexadecimal notation and shorthand forms for consistent color styling. ([source](https://github.com/ecomfe/spec/blob/master/css-style-guide.md))