Skip to content

CSS

[很棒的链接]：https://github.com/sindresorhus/awesome [真棒徽章]：https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg [特拉维斯链接]：https://travis-ci.org/awesome-css-group/awesome-css [特拉维斯徽章]：https://travis-ci.org/awesome-css-group/awesome-css.svg?branch=master

> / 精选的框架、样式指南和其他用于编写令人惊叹的 CSS 的很酷的金块. /

Introduction

Motivation

本文档是框架、样式指南和用于编写出色 CSS 的重要信息的精选列表. 它不包含学习 CSS 的资源.

Complementary Resources

如果您正在为 CSS 相关的问题苦苦挣扎，请在以下资源中寻找答案：

CSS Working Group

CSS 工作组创建和定义 CSS 规范. 这些规格被分配 maturity levels 当他们完成设计过程时. 如果您想了解更多信息，请访问 CSS Working Group Page.

Editor's Draft ✒️

CSS规范的编辑草稿

Parsers 🔍

  • CSSOM - 以纯 JavaScript 实现的 CSS 对象模型.
  • CSSTree - 带有语法验证器的详细 CSS 解析器.
  • Gonzales PE - 支持预处理器的 CSS 解析器.
  • Mensch - 一个不错的 CSS 解析器.
  • ParserLib - CSLint/解析器库.
  • PostCSS - 使用 JS 插件转换样式.
  • Rework - 用于 Node.js 中 CSS 预处理的插件框架.
  • Stylecow - 适用于所有浏览器的现代 CSS.

⇧ back to top

Preprocessors 💊

更快地编写 CSS

  • LESS - 向后兼容 CSS，它添加的额外功能使用现有的 CSS 语法.
  • PostCSS - 使用 JS 插件转换 CSS.
  • Sass - 成熟、稳定、强大的专业级CSS扩展语言.
  • STYLIS - 轻量级 CSS 预处理器.
  • Stylus - 为 NodeJs 构建的富有表现力、健壮、功能丰富的 CSS 语言.

⇧ back to top

Frameworks 🎨

  • AgnosticUI - 可访问的 CSS 组件原语，也适用于 React、Vue 3、Svelte 和 Angular.
  • Awsm.css - 用于语义 HTML 标记的简单 CSS 库.
  • Bonsai - 小于 50kb 的完整 Utility First CSS 框架.
  • Bootstrap - 最流行的 HTML、CSS 和 JS 框架.
  • Bulma - 基于 Flexbox 的现代 CSS 框架. 还有用于修改的 Sass 导入.
  • Butter Cake - 一种现代轻量级前端 CSS 框架，可实现更快、更轻松的 Web 开发.
  • Charts.css - CSS 数据可视化框架.
  • Chota - 具有实用实用程序和网格系统的响应式、可定制微框架 (3kb).
  • Cirrus - 一个完全响应和全面的 CSS 框架，具有漂亮的控件和简单的结构.
  • Foundation - 先进的响应式前端框架.
  • Gralig - 一个适度的灰色 CSS 库.
  • Halfmoon - 具有内置暗模式的响应式前端框架.
  • Hasser CSS - 轻量级（12k，未缩小）但有用的 CSS 框架，具有灵活的 Grid、Hero 等.
  • Inuit.css - 强大的、可扩展的、基于 Sass 的 BEM、OOCSS 框架.
  • Material-components-web - 用于网络的模块化和可定制的 Material Design UI 组件.
  • Materialize - 基于 Material Design 的现代响应式前端框架.
  • Milligram - 一个极简的 CSS 框架.
  • Numl - 基于 HTML 的语言和设计系统，可让您创建具有任何外观的响应迅速且可访问的高质量 Web 界面.
  • Pure.css - 一组小型、响应式 CSS 模块，您可以在每个 Web 项目中使用.
  • Semantic UI - 使用人性化 HTML 的强大框架.
  • Shorthand Framework - 为新的十年提供丰富的 CSS 框架.
  • Spectre.css - 轻量级、响应式和现代 CSS 框架.
  • Strawberry - 一组通用的 flexbox 实用程序，专注于使用嵌套的 flexbox 让您的生活更轻松、更快捷.
  • Tachyons - 人类的功能性 CSS.
  • Tacit - 平面设计零技能的傻瓜 CSS 框架.
  • Tailwindcss - 用于快速 UI 开发的实用程序优先 CSS 框架.
  • Tronic247 Material - 一个基于 CSS 和一些 JS 的响应式框架，同时遵循 Material Design 指南.
  • UIkit - 轻量级和模块化的前端框架.
  • Unsemantic - 适用于手机、平板电脑和台式机的流体网格.
  • Wing - 一个最小的、轻量级的、响应式的框架.

You can find more frameworks at "awesome-css-frameworks"

⇧ back to top

Toolkits 🔧

  • Bourbon - 一个简单轻量级的 Sass 混合库.
  • Susy - Sass 的响应式布局工具包.

⇧ back to top

Reset and Normalize

  • CSS Checker - 查找并减少相似和重复的 CSS 脚本.
  • MiniReset.css - 一个微小的现代 CSS 重置.
  • Normalize-OpenType - 向 Normalize.css 添加 OpenType 功能（连字、字距调整等）.
  • Normalize - 一组 CSS 规则，可在 HTML 元素的默认样式中提供更好的跨浏览器一致性.
  • Reset.css - CSS 工具：重置 CSS.
  • Reseter.css - 未来派的 CSS 重置/规范器. 重新定义而不是保留.
  • Sanitize.css - 一组 CSS 规则，采用当今开箱即用的最佳实践.
  • Unstyle.css - 用于删除用户代理样式的专用样式表，使用您的基线设计 Web 样式.

⇧ back to top

CSS Development at Large-Scale Websites

⇧ back to top

Code Style Guidelines 📖

⇧ back to top

Style Guide

查看更多风格指南，请访问 Website Style Guide Resources

⇧ back to top

Style Guide Generators 🎰

⇧ back to top

Naming conventions & Methodologies 💡

⇧ back to top

CSS in JS

这里有一个 CSS in JS techniques comparison

⇧ back to top

CSS Polyfills

  • Polyfill.js - 一个使创建 CSS polyfills 更容易的库.
  • Prefixfree - 摆脱 CSS 前缀地狱.
  • Fixed-sticky - 一个 CSS position:sticky polyfill.
  • Selectivizr - 在 Internet Explorer 6-8 中模拟 CSS3 伪类和属性选择器的 JavaScript 实用程序.
  • PIE - 允许 Internet Explorer 识别和呈现各种 CSS3 框装饰属性.

⇧ back to top

Miscellaneous

⇧ back to top

Podcasts 📻

编程时可以听的东西.

  • CSS Podcast - Una Kravets 和 Adam Argyle，以及开发.
  • Non Breaking Space Show - 在数字艺术、随附的博客和用户体验方面寻找最优秀、最聪明的创意人.
  • Shop Talk Show - 由 Anna Debenham 和 Brad Frost 主持的 Chris Coyier 和 Dave Rupert 关于前端网页设计的现场播客.
  • Syntax - 面向 Web 开发人员的美味播客.排版，网络技术
  • The Big Web Show - 像 Web 发布这样的主题，都是为了让您了解最新的开源技术.
  • The Changelog - Changelog 的标语说明了一切：“开源发展迅速. 赶上.” 这个播客，还有更多. 网络才是最重要的.
  • The Web Ahead - 与世界专家就不断变化的技术和网络的未来进行对话.

⇧ back to top

Twitter 📡

要关注的活跃账户.

  • Adam Morse - 倡导用户和开源.
  • Andrey Sitnik - @Autoprefixer、http://easings.net 和@PostCSS 的作者.
  • Ben Briggs - 最后一年的网络技术学生. node.js、javascript、开源模块、客户端优化、网络性能.
  • Brad Frost - 网页设计师、演讲者、作家、顾问、音乐家.
  • Chris Coyier - 设计师@CodePen. 作家@Real_CSS_Tricks.
  • Connor Sears - GitHub 的设计师.
  • CSS Animation
  • CSS Commits - 最新提交到@CSSWG 的公共 Mercurial 存储库.
  • Daniel Glazman - W3C CSS 工作组联合主席、企业家、软件工程师、极客、两个孩子的父亲、多语言、鸭子爱好者. 不. 推文完全属于我.
  • Dave McFarland - Web 开发人员，CSS 的作者：The Missing Manual, JavaScript & jQuery.
  • Donovan Hutchinson - 设计师、开发人员、作家. 偶尔在 http://Hop.ie 上写博客，目前正在构建@cssanimation.
  • Dudley Storey - Web 开发作家、教师和演讲者.
  • Eric Bidelman - 在谷歌从事 Chrome、网络组件和 Polymer 方面的工程师工作.
  • Evangelina Ferreira - 网站设计者. @multimedial_utn 教授 HTML5 & CSS Freak. 临时翻译.
  • Guy Routledge - 前端开发人员，@GA_London 老师，http://www.atozcss.com 上的 Screencaster，房地产势利小人，美食家.
  • Harry Roberts- 顾问前端架构师：@google、@Etsy、@kickstarter、@BBC、@Deloitte、@FT 等.
  • Heydon Pickering - 适度食用大米. 也是一名用户体验设计师、作家、@smashingmag 编辑和程序员.
  • Jonathan Snook - 设计师、开发人员、作家、演讲者. 我在网上制作东西. 我写了 SMACSS.
  • Kitty Giraudel - 非二进制可访问性和多样性倡导者、前端开发人员、作者.
  • L. David Baron - Mozilla 开发人员、CSS 和 W3C 标准外交官.
  • Lea Verou - 研究助理@MIT_CSAIL，@CSSWG IE，@OReillyMedia 作者，前@W3C 员工.
  • Manoela Ilic - ...aka Mary Lou @codrops ༶ CSS 和 HTML 是我的蜡笔 ༶ 对认知科学、AI、HCI、UI 设计和天体物理学感兴趣 ༶ 数字游牧民族.
  • Mark Otto - GitHub 和 Bootstrap. 以前在推特. 巨大的书呆子.
  • Maxime Thirouin - 自由前端义务警员、UI/UX 开发人员.
  • Natalie Weizenbaum - 转码器女士. @SassCSS 的首席设计师/开发人员，在@dart_lang 为@google 工作.
  • Nicolas Gallagher - @twitter 的软件工程师.
  • Nicole Sullivan - 极客.
  • Patrick Hamann - 山区、精酿啤酒和发现新食物的爱好者.
  • Paul Lewis - Googler who noodles with code and design.
  • Phil Walton - Google 工程师 • 开源倡导者 • 开发人员 • 设计师 • 作家.
  • Rachel Andrew - Web 开发人员，@grabaperch CMS 的一半，CSS 工作组特邀专家.
  • Remy Sharp - 所有关于 CSS 尺寸单位.
  • Sara Soueidan - Author of the @Codrops CSS Reference & Co-author of the Smashing Book #5.
  • Scott Jehl - @responsiblerwd 的作者，现在从@abookapart 发售.
  • Simon - UI 设计师，CSS 涂鸦者.
  • The Chris Eppstein - 热爱爱情. 讨厌讨厌. 有一个踢屁股的家庭. 写代码. 领导样式表技术@LinkedIn.
  • Una Kravets - 前端@IBMDesign. Sassvocate、社区建设者和手工艺者. STEMinist :) 开源所有东西.
  • Zoe M. Gillenwater - 专注于 CSS、RWD、UX 和可访问性的网页设计师/开发人员.
  • Zoltán Szőgyényi - Web 开发人员，Themesberg 的联合创始人. 我正在构建 Glass UI.
  • 앗킨스 탭 - 字面意思是 Jenn Schiffer 的妈妈.

⇧ back to top

Videos 📺

*来自 CSS 必看视频的优秀学习视频. 部分项目引用自 AllThingsSmitty/must-watch-css.

I told him on Twitter . 我感谢他的宝贵努力.*

2019

  1. Next-Generation Web Styling - Una Kravets 和 Adam Argyle @ Chrome Dev Summit 2019.

2016

  1. Component-Based Style Reuse 📄 transcript ⌚️ 37:24 - Pete Hunt @ CSS conf 2016.
  2. CSS4 Grid: True Layout Finally Arrives 📄 transcript ⌚️ 29:27 - Jen Kramer @ CSS conf 2016.
  3. Houdini: Demystifying the Future of CSS ⌚️ 36:58 @ Google I/O 2016.

2015

  1. Mdo-ular CSS ⌚️ 30:06 - Mark Otto @ jQuery UK.
  2. CSS Architecture with SMACSS ⌚️ 30:15 - Caleb Meredith @ DevTips 频道.
  3. CSS Workflow from the Ground Up ⌚️ 46:06 - Jonathan Snook @Generate conf 2015.

⇧ back to top

Books 📚

⇧ back to top

Tutorials 🎬

⇧ back to top

Maintainers

[sotayamashita]：https://github.com/sotayamashita [Rishabh04-02]：https://github.com/Rishabh04-02

[@sotayamashita][sotayamashita]、[@Rishabh04-02][Rishabh04-02] 还有你！

Contribute

[贡献者契约]：https://www.contributor-covenant.org/version/1/3/0/code-of-conduct/

随时潜入！ 打开一个问题或提交 PR.

Awesome CSS 遵循 [Contributor Covenant][contributor-covenant] 行为准则.