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 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 -完整的Utility First CSS框架，少于50kb.
  • Bootstrap -最受欢迎的HTML，CSS和JS框架.
  • Bulma -基于Flexbox的现代CSS框架. 还具有Sass导入以进行修改.
  • Butter Cake -现代轻量级前端CSS框架，可更快，更轻松地进行Web开发.
  • Chota -具有有用的实用程序和网格系统的响应式，可自定义的微框架（3kb）.
  • Cirrus -完全响应的，全面的CSS框架，具有精美的控件和简单的结构.
  • eFrolic -不使用JavaScript的CSS框架是交互式的且具有动画效果.
  • Foundation -先进的响应式前端框架.
  • Gralig -适度的灰色CSS库.
  • Hasser CSS -轻量级（12k，未缩小），但有用的CSS框架以及灵活的Grid，Hero等.
  • inuit.css -强大，可扩展，基于Sass的BEM，OOCSS框架.
  • material-components-web -用于网络的模块化和可自定义的Material Design UI组件.
  • Materialize -基于Material Design的现代响应式前端框架.
  • Milligram -极简的CSS框架.
  • Pure.css -一组小型的自适应CSS模块，您可以在每个Web项目中使用.
  • Semantic UI -使用人类友好的HTML的强大框架.
  • Shorthand Framework -面向新十年的功能丰富的CSS框架.
  • 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技术的支持.
  • Live editor for CSS and LESS -适用于Chrome，Firefox和Edge的Magic CSS扩展.
  • You Might Not Need JS - CSS alternatives for common JS UI components.
  • 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是我的蜡笔༶对认知科学，人工智能，人机交互，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 📚

⇧ 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

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

很棒的CSS遵循贡献者契约行为准则.