

CSS

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

Awesome CSS [![Awesome][awesome-badge]][awesome-link] [![Travis Build Status][travis-badge]][travis-link]

> / *精选的令人敬畏的框架，样式指南和其他很棒的块的清单，用于编写出色的CSS. * /

Introduction

Motivation

该文档是精选的框架，样式指南和酷炫的信息清单，用于编写出色的CSS. 它不包含学习CSS的资源.

Complementary Resources

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

• CSS - MDN - Mozilla
• Reddit (CSS)
• StackOverflow (CSS)

CSS Working Group

CSS工作组创建并定义CSS规范. 这些规格已分配 maturity levels 随着他们在设计过程中的前进. 如果您想了解更多，请访问 CSS Working Group Page.

Editor's Draft

• CSS规范的编辑草稿*

• w3c/csswg-drafts -CSS WG编辑器草稿存储库的镜像.

• w3c/css-houdini-drafts -Houdini WG编辑器存储库的镜像.

Parsers

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

_{⇧ back to top}

Preprocessors

*更快地编写CSS *

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

_{⇧ back to top}

Frameworks

• 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 -实用程序优先的CSS框架，用于快速UI开发.
• UIkit -轻巧的模块化前端框架.
• unsemantic -手机，平板电脑和台式机的流体网格.
• Wing -最小，轻巧，响应迅速的框架.

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

_{⇧ back to top}

Toolkits

• Bourbon -用于Sass的简单轻量级的mixin库.
• Susy -适用于Sass的响应式布局工具包.

_{⇧ back to top}

CSS Structure

• RSCSS -CSS样式表结构的合理标准.
• ITCSS -适用于大型UI项目的健全，可扩展的托管CSS体系结构.

_{⇧ back to top}

Reset and Normalize

• Reseter.css -未来派CSS重置/规范化器. 重新定义而不是保留.
• Normalize -一组CSS规则，可在HTML元素的默认样式中提供更好的跨浏览器一致性.
• Normalize-OpenType -将OpenType功能（连字，字距调整等）添加到Normalize.css.
• MiniReset.css -小型的现代CSS重置.
• sanitize.css -一组CSS规则，可立即使用当今的最佳做法.
• unstyle.css -专门的样式表，用于删除用户代理样式，并以基线为网络样式.
• reset.css -CSS工具：重置CSS.

_{⇧ back to top}

CSS Development at Large-Scale Websites

• Bugsnag's CSS Architecture 经过 Max Luster
• CSS at BBC Sport 肖恩·本特（Shaun Bent）
• CSS AT HOOTSUITE 史蒂夫·迈内特（Steve Mynett）
• GitHub's CSS 经过 Mark Otto
• How we do CSS at Ghost 保罗·戴维斯（Paul Davis）
• Lonely Planet 经过 Ian Feather
• Medium’s CSS is actually pretty good. 经过 Jacob Thornton
• scalable-css-reading-list
• Refining The Way We Structure Our CSS At Trello 经过 Bob经过 Grace

_{⇧ back to top}

Code Style Guidelines

• idiomatic CSS 经过 Nicolas Gallagher
• CSS Styleguide 经过 Guilherme Rv Coelho
• CSS Guidelines 经过 Harry Roberts
• Sass Guidelines 经过 Hugo Giraudel
• Code Guide 经过 Mark Otto
• ThinkUp CSS Style Guide 通过ThinkUp
• Google HTML/CSS Style Guide 由Google
• WordPress CSS Coding Standards 通过WorldPress

_{⇧ back to top}

Style Guide

• AUI 由Atlassian Design设计
• Design Elements 由孤独的星球
• Dropbox (S)CSS Style Guide 通过Dropbox
• Fluent UI 由Microsoft
• GitHub CSS Style Guide 通过Github
• Official Trello CSS Guide 通过鲍比·格雷斯（Bobby Grace）
• Solid 通过BuzzFeed
• Patterns 通过MailChimp
• Lighting Design System 通过Salesforce
• SASS Style Guide 由Sass团队
• Style Guide 星巴克
• Website Style Guide Resources 很棒的人

查看更多样式指南，网址为 Website Style Guide Resources

_{⇧ back to top}

Style Guide Generators

• Hologram
• mdcss
• Source
• styledoc
• styledocco
• styledown
• sc5-styleguide

_{⇧ back to top}

Naming conventions & Methodologies

• Atomic OOBEMITSCSS
• BEM
• Point North
• ITCSS
• OOCSS
• Title CSS
• idiomatic-css
• Atomic Design
• SUIT CSS
• Kickoff CSS
• MaintainableCSS
• NCSS
• RSCSS

_{⇧ back to top}

CSS in JS

• aphrodite
• babel-plugin-css-in-js
• classy
• csjs
• css-loader
• JSS
• react-styled
• react-with-styles
• styled-jsx
• styled-components
• stylin

这里有一个 CSS in JS techniques comparison

_{⇧ back to top}

CSS Polyfills

• polyfill.js -一个使创建CSS polyfills更加容易的库.
• prefixfree -从CSS前缀地狱中挣脱出来.
• fixed-sticky -CSS位置：粘性polyfill.
• selectivizr -一个JavaScript实用程序，可在Internet Explorer 6-8中模拟CSS3伪类和属性选择器.
• PIE -允许Internet Explorer识别和呈现各种CSS3框装饰属性.

_{⇧ back to top}

Miscellaneous

• Single Div Project -一
  `. 许多可能性.
• Can I use -浏览器对CSS，HTML5和其他前端Web技术的支持.
• Live editor for CSS and LESS -适用于Chrome，Firefox和Edge的Magic CSS扩展.
• You Might Not Need JS -通用JS UI组件的CSS替代品.
• RevengeCSS -使用选择器查找错误标记的CSS小书签，无论您在何处编写错误的HTML，它都在喜剧无衬线中显示难看的粉红色错误消息
• xpath-to-selector -将xpath转换为CSS选择器.

_{⇧ back to top}

Podcasts

编程时要听的东西.

• CSS Podcast -来自Google的开发者倡导者Una Kravets和Adam Argyle高兴地将CSS的复杂方面分解为易于消化的情节，涵盖了从可访问性到z-index的所有内容.
• Shop Talk Show -与Chris Coyier和Dave Rupert进行的有关前端Web设计，开发和UX的实时播客.
• Style Guide Podcast -由安娜·德本纳姆（Anna Debenham）和布拉德·弗罗斯特（Brad Frost）主持的关于风格指南的一小批访谈.
• The Web Ahead -与世界专家就不断变化的技术和网络的未来进行对话.
• Non Breaking Space Show -在数字艺术，设计和开发中寻找最优秀，最聪明，最聪明的创造力人士.
• The Changelog -Changelog的标语说明了一切：“开源快速发展. 赶上.” 该播客以及随附的博客都是关于使您保持最新的开放源代码技术的最新信息.
• Syntax -Web开发人员的“美味佳肴”播客.

_{⇧ back to top}

Twitter

要跟踪的活跃帐户.

• CSS Animation
• Andrey Sitnik -@ Autoprefixer，http：//easings.net和@PostCSS的作者.
• Evangelina Ferreira - 网站设计者. @multimedial_utn HTML5和CSS Freak教授. 临时翻译.
• Sara Soueidan - Author of the @Codrops CSS Reference & Co-author of the Smashing Book #5.
• Hugo Giraudel -@edenspiekermann的CSS妖精和Sass黑客.
• Guy Routledge -前端开发人员，@ GA_London老师，http：//www.atozcss.com上的Screencaster，房地产势利者，Foodie.
• Heydon Pickering -适量的大米消费者. 还是UX设计师，作者，@ smashingmag编辑器和程序员.
• Adam Morse -倡导用户和开源.
• Donovan Hutchinson -设计师，开发人员，作家. 偶尔在http://Hop.ie上发布博客，目前正在构建@cssanimation.
• CSS Commits -最新提交到@CSSWG的公共Mercurial存储库.
• Scott Jehl - Author of @responsiblerwd, now on sale from @abookapart.
• Dudley Storey -网络开发作家，老师和演讲者.
• Zoe M. Gillenwater -专门从事CSS，RWD，UX和辅助功能的Web设计人员/开发人员.
• Ben Briggs -最后一年的网络技术专业学生. node.js，javascript，开源模块，客户端优化，网络性能.
• Paul Lewis -熟悉代码和设计的Googler.
• Nicolas Gallagher -@twitter的软件工程师.
• Harry Roberts-顾问前端架构师：@ google，@ Etsy，@ kickstarter，@ BBC，@ Deloitte，@ FT等.
• Phil Walton -Google的工程师•开源倡导者•开发人员•设计人员•作家.
• Lea Verou -研究助理@ MIT_CSAIL，@ CSSWG IE，@ OReillyMedia作者，例如@ W3C员工.
• Manoela Ilic -... aka Mary Lou @codrops ༶ CSS和HTML是我的蜡笔༶对认知科学，人工智能，人机交互，UI设计和天体物理学感兴趣༶数字游牧.
• Una Kravets -前端@IBMDesign. 提倡，社区建设者和手工匠. STEMinist :)开源所有事物.
• Chris Coyier -设计器@CodePen. 作家@Real_CSS_Tricks.
• Nicole Sullivan - 极客.
• Eric Bidelman -Google的工程师，负责Chrome，Web组件和Polymer.
• Patrick Hamann -山区的情人，精酿啤酒和发现新的食物.
• Dave McFarland -Web开发人员，CSS的作者：The Missing Manual，JavaScript和jQuery.
• L. David Baron -Mozilla开发人员，CSS和W3C标准外交官.
• Daniel Glazman -W3C CSS工作组联合主席，企业家，软件工程师，极客，两个孩子的父亲，通晓多国语言的人，爱鸭子的人. 没事推文严格是我的.
• The Chris Eppstein -爱的爱. 讨厌恨. 有一个踢屁股的家庭. 编写代码. 领导样式表技术@LinkedIn.
• 앗킨스 탭 -从字面上看，詹恩·希弗（Jenn Schiffer）的妈妈.
• Natalie Weizenbaum -转码器小姐. @SassCSS的首席设计师/开发人员，在@dart_lang上为@google工作.
• Brad Frost -网页设计师，演讲者，作家，顾问，音乐家.
• Maxime Thirouin -自由职业者前端警戒，UI / UX开发人员.
• Mark Otto -GitHub和Bootstrap. 以前在Twitter. 巨大的书呆子.
• Simon -UI设计师，CSS涂鸦者.
• Connor Sears -GitHub上的设计师.
• Remy Sharp -所有关于CSS尺寸调整单位的信息.
• Jonathan Snook -设计师，开发人员，作家，演讲者. 我在网上制作东西. 我写了SMACSS.
• Rachel Andrew -Web开发人员，@ grabaperch CMS的一半，CSS工作组邀请的专家.

_{⇧ back to top}

Videos

*来自CSS Must Watch视频的优质学习视频. 某些项目引用自 AllThingsSmitty/must-watch-css.

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

2019

1. Next-Generation Web Styling -Una Kravets和Adam Argyle @ Chrome开发者峰会2019.

2016

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

2015

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

_{⇧ back to top}

Books

• CSS Secrets –更好的解决方案，解决日常Web设计问题
• CSS: The Missing Manual –确实有助于将您的设计技能提升到一个全新的水平
• CSS: The Definitive Guide, 4^th Edition -Web的视觉呈现
• Every Layout: Relearn CSS Layout –使用算法设计解决响应式布局问题.

_{⇧ back to top}

Tutorials

• CSS Diner – Interactive gamified tutorial for learning selection with CSS.
• CSS Grid PlayGround -从Mozilla学习CSS网格的简单教程.
• Work With Animations -检查动画.
• Community Curated CSS Resources -热门推荐资源.
• 30 Seconds of CSS -精选的有用CSS片段集合，您可以在30秒或更短的时间内理解.
• Organize CSS with a Modular Architecture: OOCSS, BEM, SMACSS -深入介绍OOCSS，BEM，SMACSS，并提供示例.
• Flexbox video tutorial -Wes Bos提供的免费视频课程，用于学习flexbox.
• CSS Grids videos tutorial -Wes Bos提供的免费视频课程，用于学习CSS网格.

_{⇧ back to top}

Maintainers

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

[@sotayamashita] [sotayamashita]，[@ Rishabh04-02] [Rishabh04-02]和您！

Contribute

[contributor-covenant]：https://www.contributor-covenant.org/version/1/3/0/code-of-conduct/

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

很棒的CSS遵循[贡献者契约] [contributor-covenant]行为准则.