CSS

[awesome-link]：https：//github.com/sindresorhus/awesome [awesome-badge]：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 [HitCounter-link]：http://hits.dwyl.io/awesome-css-group/awesome-css [HitCounter-徽章]：http://hits.dwyl.io/awesome-css-group/awesome-css.svg

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

Introduction

Motivation

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

Complementary Resources

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

CSS Working Group

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

Editor's Draft ✒️

Parsers 🔍

  • CSSOM -用纯JavaScript实现的CSS对象模型.
  • CSSTree -具有语法验证器的详细CSS解析器.
  • Gonzales -快速的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库.
  • Bootstrap -最受欢迎的HTML，CSS和JS框架.
  • Bulma -基于Flexbox的现代CSS框架. 还具有Sass导入以进行修改.
  • Butter Cake -现代轻量级前端CSS框架，可更快，更轻松地进行Web开发.
  • Chota -具有有用的实用程序和网格系统的响应式，可自定义的微框架（3kb）.
  • Cirrus -完全响应的，全面的CSS框架，具有精美的控件和简单的结构.
  • eFrolic -不使用JavaScript的CSS框架是交互式的且具有动画效果.
  • Foundation -先进的响应式前端框架.
  • inuit.css -强大，可扩展，基于Sass的BEM，OOCSS框架.
  • material-components-web -用于网络的模块化和可自定义的Material Design UI组件.
  • Materialize -基于Material Design的现代响应式前端框架.
  • Milligram -极简的CSS框架.
  • Pure.css -一组小型的自适应CSS模块，您可以在每个Web项目中使用.
  • Semantic UI -使用人类友好的HTML的强大框架.
  • Spectre.css -轻巧，响应迅速的现代CSS框架.
  • Strawberry -一组通用的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

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

⇧ 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位置：粘性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技术的支持.
  • cssfx -精美简单的点击复制CSS效果
  • Live editor for CSS and LESS -适用于Chrome，Firefox和Edge的Magic CSS扩展.
  • You Might Not Need JS -通用JS UI组件的CSS替代品.
  • RevengeCSS -使用选择器查找不良标记的CSS小书签，无论您在何处编写不良HTML，它都会在喜剧无衬线中显示难看的粉红色错误消息

⇧ back to top

Podcasts 📻

编程时要听的东西.

  • 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 -@responsiblerwd的作者，现已从@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是我的蜡笔༶对认知科学，AI，HCI，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 - Freelance front-end vigilante, UI/UX developer.
  • 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 . 我感谢他的宝贵努力.*

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 📚

⇧ back to top

Tutorials 🎬

⇧ back to top

Maintainers

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

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

Contribute

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

Feel free to dive in! Open an issue or submit PRs.

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

}