thoughtbit / it-note

:books: 琐碎的知识, I code it
315 stars 36 forks source link

CSS最佳实战 #51

Open moocss opened 8 years ago

moocss commented 8 years ago

https://github.com/jgthms/css-reference/ (可视化CSS 属性 👍 💯 ) https://github.com/jgthms/html-reference (可视化 HTML👍 💯 )

https://fvsch.com/code/css-locks/ (The math of CSS locks, CSS 数学计算函数) http://www.zcfy.cc/article/all-the-generic-css-data-types-2526.html (CSS通用数据类型) http://qianduan.guru/2016/04/17/How-to-work-with-SVG-icons/ (SVG 图标制作指南) https://fvsch.com/code/svg-icons/how-to/

https://github.com/teambition/standard/blob/master/css-style-guide.md ( :+1: :100: )

https://github.com/ayqy/CSS2-1 (W3C - CSS 2.1中文版 👍 💯 )

https://github.com/macbre/analyze-css (CSS选择器的复杂性和性能分析工具 :+1: :100: )

http://rscss.io/index.html (CSS 样式表逻辑,能够帮助你撰写出一份易于维护修改的CSS, 条理清楚的样式结构 :100: 👍 👍 , 推荐使用)

http://slides.com/colinhan/deck-2-3#/2 (深入CSS :+1: :100: ) http://slides.com/colinhan/deck#/ (HTML & CSS WORKSHOP 1) http://slides.com/colinhan/deck-1#/ (HTML & CSS WORKSHOP 2 )

https://github.com/TVVT/commonless/blob/master/common.less

https://github.com/benfrain/app-reset

重构

https://juejin.im/post/5ba234c85188255c38535a47 (探索 SMACSS:可扩展的模块化 CSS 框架)

https://www.sky.com/toolkit (👍 💯) https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ (工具类与关注点分离 👍 💯👍 💯) http://hao.jobbole.com/mediu-css/ (Medium的CSS 方案:简直完美) https://github.com/suitcss/suit (Style tools for UI components) https://gist.github.com/fat/a47b882eb5f84293c4ed ( Medium 的 CSS 写得真他妈的好 👍 💯 )

架构

https://github.com/shorthandcss/shorthand (Feature rich CSS framework for the new decade 👍 💯 推荐) https://tailwindcss.com/ (A utility-first CSS framework for rapidly building custom designs. 👍 💯推荐)

https://www.w3cplus.com/css/combining-the-powers-of-sem-and-bio-for-improving-css.html (结合SEM和BIO来改进CSS 👍 💯) https://github.com/iotacss/iotacss https://github.com/inuitcss/inuitcss https://github.com/suitcss/suit

https://github.com/trowel

深入理解CSS:font metrics, line-height 以及 vertical-align

http://www.zcfy.cc/article/deep-dive-css-font-metrics-line-height-and-vertical-align-vincent-de-oliveira-2616.html#user-evaluation-modal

原子类优先的库

https://github.com/tachyons-css/tachyons/ (postcss 👍 💯 )

https://github.com/basscss/basscss/ (postcss)

https://github.com/turretcss/turretcss ((postcss 👍 💯 )

https://github.com/tailwindcss/tailwindcss

https://github.com/monarkee/beard

https://github.com/daiyanze/rotala ( 基于tailwindcss 👍 💯 )

moocss commented 8 years ago

Modular CSS

https://github.com/rangle/intro-to-modular-css (学习:+1: :100: )

css module 和 postcss

http://elemefe.github.io/postcss-salad/index.html (沙拉是一个基于 PostCSS 的 CSS 解决方案,它提供了一系列快捷的 at-rule 和默认语法声明来帮助你快速地搭建项目样式与类库,它只在调用时才输出代码,而不是直接提供 CSS 类库。 :+1: :100: )

https://github.com/zhouwenbin/blog/issues/1 (我们如何在项目中使用sass) https://github.com/zhouwenbin/blog/issues/11 (目录结构和模块的一些思考) https://github.com/zhouwenbin/blog/issues/3 (sketch导出的svg如何用在网页上, inlinesvg图标如何兼容所有浏览器的) https://github.com/zhouwenbin/blog/issues/4 (使用postcss搭建面向未来的静态开发环境) https://github.com/zhouwenbin/blog/issues/12 (搭建css module和cssnext自动刷新开发环境 ) https://github.com/zhouwenbin/blog/issues/5 (如何写一份样式指南) https://github.com/zhouwenbin/blog/issues/6 (使用posthtml实现html和css模块化) https://github.com/zhouwenbin/blog/issues/15 (css modules的几种技术方案 )

http://codepen.io/zhouwenbin/pen/MKgoBm , http://www.fengqu.com/index.html (@styleguide , inlinesvg图标, b2c 网站 和 登录实战 :+1: :100: )

http://boke.io/tan-tan-css-modules/ (谈谈 CSS Modules)

https://github.com/zhouwenbin/css-modules-vue-demo

moocss commented 8 years ago

icon font

http://ionicons.com/ (Ionic Framework. 默认字体图标库)

moocss commented 8 years ago

CSS 技巧小库

http://mixinsless.com/ (基于 Less 的 CSS 代码片段复用和混入库 👍 💯 )

https://jonsuh.com/hamburgers/ (Tasty CSS-animated hamburgers) http://kazzkiq.github.io/balloon.css/ (Simple tooltips made of pure CSS)

https://github.com/chinchang/hint.css/ (css, accessible tooltips )

moocss commented 7 years ago

CSS 小工具

http://cssplant.com/ http://bennettfeely.com/clippy/

http://linxz.github.io/tianyizone/ (小 志的CSS工具)

moocss commented 7 years ago

CSS3 高级用法

http://razvancaliman.com/css-for-decoration/#/1 (CSS Shapes,CSS Regions,CSS Masking,CSS,Blend Modes,tools & prototypes 👍 )