GitHub倡导的CSS编写风格及文件目录部署指南
GitHub倡导的CSS编写风格及文件目录部署指南
发布时间:2016-12-27 来源:查字典编辑
摘要:这个CSS风格指南是在GitHub内部用于应用程序的指南。我们鼓励您建立一个适合你自己团队的风格指南。在你阅读这个之前,你需要大致了解SCS...

这个CSS风格指南是在GitHub内部用于应用程序的指南。我们鼓励您建立一个适合你自己团队的风格指南。在你阅读这个之前,你需要大致了解SCSS语法和KSS文档。虽然我们通过KSS文档把风格移植到了SCSS上,但请务必立刻升级整个元素的CSS。不要混合少量SCSS和无格式的CSS。

编码风格:

1.用两个空格的“soft-tabs”来缩进

2.在属性声明的“:”后加上空格

3.在规则声明后的“{”前加上空格

4.使用十六进制颜色代码#000,如果不使用RGBA

5.使用//来做注释块(而不是/**/)

6.文档风格与KSS相同

7.这里有个好的语法示例:

CSS Code复制内容到剪贴板 //Thisisagoodexample! .styleguide-format{ border:1pxsolid#0f0; color:#000; background:rgba(0,0,0,0.5); }

SCSS 风格:

任何会在多个文件中使用的$variable 或者 @mixin应该放在globals/下。其他的应该放在使用它的文件的顶部。

作为一个经验法则,不要使用超过3层的嵌套。如果你发现你将要使用超过三层,想想重新组织你的规则。

文件组织:

一般来说,CSS文件组织应该想下面这样:

styles

├── components

│ ├── comments.scss

│ └── listings.scss

├── globals

│ ├── browser_helpers.scss

│ ├── responsive_helpers.scss

│ ├── variables.scss

├── plugins

│ ├── jquery.fancybox-1.3.4.css

│ └── reset.scss

├── sections

│ ├── issues.scss

│ ├── profile.scss

└── shared

├── forms.scss

└── markdown.scss

使用Spockets来获取文件。但是,你应该明确地导入任何在特定的SCSS文件中不会产生样式(globals/)的SCSS。下面是个好的例子:

CSS Code复制内容到剪贴板 //=require_tree./plugins //=requiremy_awesome_styles @import"../globals/basic"; .rule{...}

Pixels vs. Ems:

在font-size上使用px,因为它提供了在文字上的绝对控制。此外,更倾向于使用无单位的line-height,因为它不会继承父元素的百分比值,而是基于字体大小的倍数。

Class的命名惯例:

不要在css文件中引用js-前缀的类名。js-只由js文件使用。在css和js共享的状态规则使用is-前缀。

特异性(classes vs. ids):

在页面中确定出现一次的元素应该使用IDs.否则使用Class.在不确定时使用Class。

1.应该使用ID的:header,footer,弹窗

2.不应该使用ID的:导航,列表元素等

当在给一个组件加样式的时候,从元素+类名(更倾向于类名)开始,在默认情况下更倾向于使用直接后代选择器(>)。用尽可能少的特殊的。下面是个例子:

XML/HTML Code复制内容到剪贴板 <ulclass="category-list"> <liclass="item">Category1</li> <liclass="item">Category2</li> <liclass="item">Category3</li> </ul> CSS Code复制内容到剪贴板 ul.category-list{//element+classnamespace &>li{//directdescendantselector>forlistitems list-style-type:disc; } a{//minimalspecificityforalllinks color:#ff0000; } }

CSS特异性指南:

如果你必须使用一个id选择器,确保在你的规则声明中只有一个。像#header .search #quicksearch { … }这样的被认为是不好的。

当在修改一个现有元素来特殊使用,试着使用类名。使用.listings-layout.listings-bigger而不是.listings-layout.bigger。想想ack/grep在你未来的代码中。

像disabled, mousedown, danger, hover, selected,active这些类名应该有一个类作为命名空间(button.selected是个好的例子)

实验性功能:

我们想要内部使用和实验性功能。在编写css的时候需要一些纪律因为现有的功能和实验性功能的css将会被同时提供。始终牢记这些目标:

1.给新功能写样式的时候不要影响已有功能的样式

2.当实验性功能不工作的时候可以很容易的移除

3.当新功能上线的时候可以很容易移除旧的功能的css

4.在开发beta或实验性功能时,用-experimental变量替换根命名空间和弃用现有根节点。一般来说,最好重复样式实验块而不是试图和扩展现有的样式。

一个现有功能的:

XML/HTML Code复制内容到剪贴板 <divclass="notifications"> <ulclass="navigation"> <li><ahref="#">Notifications</a></li> <li><ahref="#">Messages</a></li> </ul> <divclass="notifications-listing"> <ahref="#">dragoncommentedonIssue#551</a> <ahref="#">mojombocommentedonIssue#91</a> <ahref="#">defunktuploadedanewfiletodefunkt/resque</a> </div> </div> CSS Code复制内容到剪贴板 //Deprecated:Existingnotifications+messagesdesign.Toberemovedwhen //notifications-nextships. // //Styleguide4.5.1 .notifications{ ul.navigation{ float:left; width:200px; background:#eee; } .notification-listing{ &>a{ display:block; font-weight:bold; } } }

在这里查看完整的版本:https://github.com/styleguide/css

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类