Github 的 CSS 风格指南
这个CSS风格指南是在GitHub内部用于应用程序的指南。我们鼓励您建立一个适合你自己团队的风格指南。在你阅读这个之前,你需要大致了解SCSS语法和KSS文档。虽然我们通过KSS文档把风格移植到了SCSS上,但请务必立刻升级整个元素的CSS。不要混合少量SCSS和无格式的CSS。
编码风格:
用两个空格的“soft-tabs”来缩进
在属性声明的“:”后加上空格
在规则声明后的“{”前加上空格
使用十六进制颜色代码#000,如果不使用RGBA
使用//来做注释块(而不是/**/)
文档风格与KSS相同
这里有个好的语法示例:
SCSS 风格:
任何会在多个文件中使用的$variable 或者 @mixin应该放在globals/下。其他的应该放在使用它的文件的顶部。
作为一个经验法则,不要使用超过3层的嵌套。如果你发现你将要使用超过三层,想想重新组织你的规则。
文件组织:
一般来说,CSS文件组织应该想下面这样:
使用Spockets来获取文件。但是,你应该明确地导入任何在特定的SCSS文件中不会产生样式(globals/)的SCSS。下面是个好的例子:
Pixels vs. Ems:
在font-size上使用px,因为它提供了在文字上的绝对控制。此外,更倾向于使用无单位的line-height,因为它不会继承父元素的百分比值,而是基于字体大小的倍数。
Class的命名惯例:
不要在css文件中引用js-前缀的类名。js-只由js文件使用。在css和js共享的状态规则使用is-前缀。
特异性(classes vs. ids):
在页面中确定出现一次的元素应该使用IDs.否则使用Class.在不确定时使用Class。
应该使用ID的:header,footer,弹窗
不应该使用ID的:导航,列表元素等
当在给一个组件加样式的时候,从元素+类名(更倾向于类名)开始,在默认情况下更倾向于使用直接后代选择器(>)。用尽可能少的特殊的。下面是个例子:
CSS特异性指南:
如果你必须使用一个id选择器,确保在你的规则声明中只有一个。像#header .search #quicksearch { … }这样的被认为是不好的。
当在修改一个现有元素来特殊使用,试着使用类名。使用.listings-layout.listings-bigger而不是.listings-layout.bigger。想想ack/grep在你未来的代码中。
像
disabled
,mousedown
,danger
,hover
,selected
,active这些类名应该有一个类作为命名空间(button.selected是个好的例子)
实验性功能:
我们想要内部使用和实验性功能。在编写css的时候需要一些纪律因为现有的功能和实验性功能的css将会被同时提供。始终牢记这些目标:
给新功能写样式的时候不要影响已有功能的样式
当实验性功能不工作的时候可以很容易的移除
当新功能上线的时候可以很容易移除旧的功能的css
在开发beta或实验性功能时,用-experimental变量替换根命名空间和弃用现有根节点。一般来说,最好重复样式实验块而不是试图和扩展现有的样式。
一个现有功能的:
在这里查看完整的版本:https://github.com/styleguide/css
建议继续学习:
- GitHub中的README.MD文件编写语法 (阅读:4211)
- 各浏览器的默认CSS (阅读:3702)
- github 上 Fork 别人的项目后的常用的操作指南 (阅读:3760)
- CSS的未来:明智的布局工具终于到来 (阅读:3138)
- CSS 忍者:安全的 CSS hacks 秘籍 (阅读:2820)
- 使用CSS框架的优点和缺点 (阅读:2638)
- 12个很少被人知道的CSS事实 (阅读:2619)
- 移动网站开发――CSS (阅读:2229)
- CSS 设计理念 (阅读:1908)
- 你必须收藏的Github技巧 (阅读:2152)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:天涯孤雁 来源: WEB前端开发
- 标签: css Github
- 发布时间:2015-01-11 23:41:02
- [46] IOS安全–浅谈关于IOS加固的几种方法
- [45] 图书馆的世界纪录
- [45] 如何拿下简短的域名
- [45] Oracle MTS模式下 进程地址与会话信
- [42] 【社会化设计】自我(self)部分――欢迎区
- [42] android 开发入门
- [41] 读书笔记-壹百度:百度十年千倍的29条法则
- [41] 界面设计速成
- [39] 视觉调整-设计师 vs. 逻辑
- [35] Go Reflect 性能