awesome-repositories.com
博客
awesome-repositories.com

通过 AI 驱动的搜索,发现最优秀的开源仓库。

探索精选搜索开源替代品自托管软件博客网站地图
项目关于排名机制媒体报道MCP 服务器
法律隐私政策服务条款
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·
bendc avatar

bendc/frontend-guidelines

0
View on GitHub↗
9,089 星标·680 分支·9 次浏览

Frontend Guidelines

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.

Features

  • Web Accessibility Standards - Establishes structural conventions and marking standards to support assistive technologies through alt attributes and form labeling.
  • CSS Style Guides - Provides a standardized framework for managing CSS specificity, layouts, and efficient styling.
  • Semantic Document Structuring - Guides the creation of logical hierarchies using semantic HTML5 elements to ensure accessible document structures.
  • Functional Programming Concepts - Guides the application of functional programming principles like immutability and pure functions in JavaScript.
  • Frontend Development Guides - Serves as a comprehensive collection of standards for writing semantic HTML, efficient CSS, and functional JavaScript.
  • Flexbox and Grid Layouts - Recommends using Flexbox and Grid layout engines to maintain flexible and responsive document flows.
  • Pure Functions - Advocates for the use of pure functions that return new values instead of modifying original inputs.
  • Pure Functional Logic Implementations - Promotes the use of deterministic pure functions and functional composition to improve code reliability.
  • Frontend Architecture Best Practices - Establishes a comprehensive set of best practices for scalable and maintainable frontend architecture.
  • CSS Architecture Patterns - Outlines methodologies for structuring CSS using Flexbox, Grid, and specificity management for maintainable layouts.
  • Composable Logic Patterns - Defines patterns for building complex behavior through the composition of small, reusable, single-purpose functions.
  • Function Composition - Outlines patterns for combining small, single-purpose pure functions to build complex application behavior.
  • Web Accessibility - Provides comprehensive guidelines for ensuring web content is perceivable and operable for all users.
  • Semantic Document Structures - Provides standards for using semantic HTML5 elements to ensure accessibility and search engine indexing.
  • Accessibility Standards - Implements accessibility standards using semantic HTML5 and ARIA patterns to ensure inclusive usability.
  • Efficiency Patterns - Implements efficient CSS writing techniques using shorthand properties and relative units to avoid redundancy.
  • Stylesheet Maintainability Standards - Provides standards for box-modeling and positioning to ensure stylesheet maintainability and consistency.
  • Style Specificity Resolution - Provides a strategy for specificity resolution by restricting the use of IDs and important flags.
  • CSS Specificity Management - Establishes standards for controlling selector specificity to ensure a predictable and overridable style hierarchy.
  • Frontend Performance Optimization - Offers techniques for optimizing script loading, style isolation, and image compression to improve page speed.
  • Modern CSS Best Practices - Provides a curated collection of modern CSS techniques for creating maintainable and predictable layouts.
  • Page Speed Optimizations - Provides techniques to reduce page load times and improve rendering performance through asset optimization.
  • Render-Blocking Resource Optimization - Provides strategies for deferring non-critical assets to prevent render-blocking and accelerate initial page paint.
  • Pure Function Patterns - Provides patterns for using pure functions and composition to eliminate state mutation and reduce dependency bloat.
  • Web Performance Optimizations - Offers a detailed manual for accelerating page loads through script deferral, asset compression, and reducing render-blocking resources.
  • Web API Substitutions - Provides patterns for substituting heavy external libraries with lightweight native browser implementations.
  • Computational Caching - Implements caching for expensive computations and feature tests to reduce JavaScript execution time.
  • Dependency Minimizers - Encourages reducing dependency bloat by replacing third-party libraries with native language features.
  • GPU-Accelerated UI Rendering - Guides the use of GPU acceleration for rendering UI elements via opacity and transform properties.
  • Browser API Implementations - Encourages replacing heavy third-party libraries with lightweight custom code using built-in browser functionality.
  • Memoization Caches - Implements memoized caching of expensive functions and feature tests to eliminate redundant processing.
  • CSS Transform Animations - Optimizes animation performance by limiting CSS transitions to opacity and transform properties.
  • Hardware Acceleration Optimization - Provides guidelines for offloading CSS animations to the GPU by limiting properties to opacity and transform.
  • Initial Page Load Optimizations - Provides strategies for deferring non-critical assets to prevent render-blocking and accelerate initial page loads.
  • Execution Optimization Patterns - Recommends using pure functions, functional composition, and native APIs to optimize JavaScript execution.
  • Platform and API Guidelines - Best practices for HTML, CSS, and JavaScript.

Star 历史

bendc/frontend-guidelines 的 Star 历史图表bendc/frontend-guidelines 的 Star 历史图表

AI 搜索

探索更多 awesome 仓库

用简单的语言描述您的需求 —— AI 将根据相关性为您从数千个精选开源项目中进行排序。

Start searching with AI

常见问题解答

bendc/frontend-guidelines 是做什么的?

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.

bendc/frontend-guidelines 的主要功能有哪些?

bendc/frontend-guidelines 的主要功能包括:Web Accessibility Standards, CSS Style Guides, Semantic Document Structuring, Functional Programming Concepts, Frontend Development Guides, Flexbox and Grid Layouts, Pure Functions, Pure Functional Logic Implementations。

bendc/frontend-guidelines 有哪些开源替代品?

bendc/frontend-guidelines 的开源替代品包括: csswizardry/css-guidelines — CSS Guidelines is a comprehensive style guide and reference for writing maintainable, scalable, and modular CSS in… north/north — North is a responsive web design methodology and Sass-based CSS architecture framework. It provides a system for… thoughtbot/guides — This project is a software engineering style guide and a curated collection of architectural patterns and coding… airbnb/css — This project is a CSS architecture framework and style guide providing formal coding standards for CSS and Sass. It… angus-c/just — Just is a collection of JavaScript utility libraries designed for data manipulation, functional programming,… ecomfe/spec — Spec is a comprehensive set of frontend coding standard specifications and project architecture guides. It provides a…

Frontend Guidelines 的开源替代方案

相似的开源项目,按与 Frontend Guidelines 的功能重合度排序。
  • csswizardry/css-guidelinescsswizardry 的头像

    csswizardry/CSS-Guidelines

    3,648在 GitHub 上查看↗

    CSS Guidelines is a comprehensive style guide and reference for writing maintainable, scalable, and modular CSS in large-scale web projects. It provides a set of professional standards for organizing stylesheets and implementing consistent naming patterns to improve long-term codebase health and reduce technical debt. The project centers on a strict methodology for scoping classes to create isolated and predictable components, preventing style leakage between independent parts of a user interface. It emphasizes a flat selector hierarchy to avoid specificity conflicts and encourages the separa

    在 GitHub 上查看↗3,648
  • north/northN

    north/north

    4,798在 GitHub 上查看↗

    North is a responsive web design methodology and Sass-based CSS architecture framework. It provides a system for building mobile-first user interfaces using fluid grids and progressive enhancement techniques to ensure a consistent experience across different browser capabilities and screen sizes. The project features a standardized CSS naming system that uses Sass mixins to programmatically generate class names, distinguishing between components, layouts, and states. It also functions as a frontend project scaffolding tool, providing a generator to bootstrap new environments with pre-configur

    CSS
    在 GitHub 上查看↗4,798
  • thoughtbot/guidesthoughtbot 的头像

    thoughtbot/guides

    9,556在 GitHub 上查看↗

    This project is a software engineering style guide and a curated collection of architectural patterns and coding standards. It provides a multi-language coding standard to ensure maintainable software across Ruby, Python, JavaScript, and Swift. The project establishes a development workflow specification for version control, continuous integration, and peer review to maintain a linear project history. It also includes a web accessibility framework based on ARIA and WCAG standards, using design tokens and semantic HTML patterns to build inclusive interfaces. The guides cover a broad range of

    Ruby
    在 GitHub 上查看↗9,556
  • airbnb/cssairbnb 的头像

    airbnb/css

    6,980在 GitHub 上查看↗

    This project is a CSS architecture framework and style guide providing formal coding standards for CSS and Sass. It establishes a structured approach to naming conventions, property organization, and selector management to ensure consistency across large-scale projects. The framework focuses on decoupling visual styles from JavaScript behavior through specific naming prefixes and utilizes a block element modifier system for component naming. It defines strict guidelines for Sass usage, emphasizing the efficient application of variables and mixins to prevent bloated output and complex dependen

    在 GitHub 上查看↗6,980
  • 查看 Frontend Guidelines 的所有 30 个替代方案→