前端工程师必须收藏的CSS资源大全
发布时间:2017-07-05 | 流量次数:183次
一键分享:
 预处理器

更快地编译 CSS

 

  • GCSS:一个用GO语言编写的CSS预处理器。
  • LESS:向下兼容CSS并为当前的CSS增加额外的功能。
  • Myth:只用写纯CSS而不用担心浏览器加载缓慢。
  • PCSS:一个用Python语言编写的CSS预处理器。
  • PostCSS:通过JS插件来转换CSS。PostCSS
  • Sass:成熟、稳定且强力的专业CSS扩展语言。
  • Stylus:用于nodejs的直观、强健、极具特色的CSS语言。
  • YACP:另一种CSS预处理器。

 

 

框架

 

  • 960 Grid System:简化了web开发工作流程。
  • Blueprint:这个CSS框架为你提供易用的栅格系统、符合直觉的排版功能、有用的插件以及可打印的样式
  • Bootstrap:最流行的HTML、CSS、JS框架
  • inuit.css :强力的、可扩展的、基于Sass的、采用BEM命名的面向对象CSS框架
  • Foundation:一个高级响应式前端框架。
  • Material Design Lite:很好的用于制作Material Design风格网站的框架。
  • Materialize:基于Material Design的现代响应式前端框架。
  • Pure.css:一套可用于所有web项目的小型响应式CSS模块。
  • Semantic UI:使用人性化html的强力框架。
  • Skeleton:一个超简单的响应式模板。
  • UIkit:适用于手机、平板以及电脑端的栅格系统。

 

工具集

 

  • Basscss:一个基本元素样式与不可修改工具轻量级集合。
  • Bourbon:用于Sass的简单且轻量的混合库。
  • Corpus:另一个CSS工具集。
  • Susy:用于Sass的响应式工具集。

 

CSS结构

 

  • RSCSS:CSS样式结构的合理标准。
  • ITCSS:用于大型UI项目的稳定、可扩展、可控制的CSS架构。

 

CSS标准化

 

  • Normalize:一套提供较好的多浏览器默认样式一致性的CSS规范。
  • Normalize OpenType:为Normalize.css添加了OpenType特性,如连字、字间距等等。
  • Reset:一套CSS标准,将全部的HTML元素调整到一致的基准线。
  • sanitize.css:一套可立即使用的,符合当今最优实践的CSS规范。

 

大型网站的CSS开发

 

  • Github的CSS方案 by Mark Otto
  • CodePen的CSS方案 by Chris Coyier
  • Lonely Planet的CSS方案 by Ian Feather
  • Groupon的CSS方案 by Mike Aparicio
  • Buffer的CSS方案 by Brian Lovin
  • HOOTSUITE的CSS方案 by Steve Mynett
  • 如何精简TrelloCSS架构 by Bobby Grace
  • Bugsnag的CSS架构 by Max Luster
  • Ghost的CSS方案 by Paul Davis
  • Medium的CSS方案 by Jacob Thornton

 

代码风格指导

 

  • 编写符合语言习惯的 CSS by Nicolas Gallagher.
  • CSS 指南 by Harry Roberts.
  • Sass 指南 by Hugo Giraudel.
  • Mark Otto 编写的风格指南,受「GitHub 风格」和「编写符合语言习惯的 CSS」所激发 by Mark Otto.
  • ThinkUp 的 CSS 风格指导,作者ThinkUp
  • Google 的 HTML/CSS 风格指导
  • WordPress的CSS代码标准

 

风格指导

 

  • Atlassian 官方 UI 文档;
  • 设计元素 by lonely planet.
  • GitHub 的 CSS 风格指导
  • Patterns by MailChimp 的风格指南.
  • Lighting Design System by Salesforce 的风格指南.
  • SASS 风格指南 by Sass team.
  • 星巴克的风格指南 by Starbucks.
  • 关于网站风格指导的一些资源 by Awesome people.

 

命名习惯和方式

 

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