GitHub倡导的CSS编写风格及文件目录部署指南

所属分类: 网页制作 / CSS 阅读数: 442
收藏 0 赞 0 分享

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

编码风格:

1.用两个空格的“soft-tabs”来缩进
2.在属性声明的“:”后加上空格
3.在规则声明后的“{”前加上空格
4.使用十六进制颜色代码#000,如果不使用RGBA
5.使用//来做注释块(而不是/**/)
6.文档风格与KSS相同
7.这里有个好的语法示例:

CSS Code复制内容到剪贴板
  1. // This is a good example!   
  2. .styleguide-format {   
  3.   border1px solid #0f0;   
  4.   color#000;   
  5.   background: rgba(0,0,0,0.5);   
  6. }  

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复制内容到剪贴板
  1. //= require_tree ./plugins   
  2. //= require my_awesome_styles   
  3.     
  4. @import "../globals/basic";   
  5.     
  6. .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复制内容到剪贴板
  1. <ul class="category-list">  
  2.   <li class="item">Category 1</li>  
  3.   <li class="item">Category 2</li>  
  4.   <li class="item">Category 3</li>  
  5. </ul>  
CSS Code复制内容到剪贴板
  1. ul.category-list {// element + class namespace   
  2.     
  3.   &>li {// direct descendant selector > for list items   
  4.     list-style-typedisc;   
  5.   }   
  6.     
  7.   a {// minimal specificity for all links   
  8.     color#ff0000;   
  9.   }   
  10. }  

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复制内容到剪贴板
  1. <div class="notifications">  
  2.   <ul class="navigation">  
  3.     <li><a href="#">Notifications</a></li>  
  4.     <li><a href="#">Messages</a></li>  
  5.   </ul>  
  6.   <div class="notifications-listing">  
  7.     <a href="#">dragon commented on Issue #551</a>  
  8.     <a href="#">mojombo commented on Issue #91</a>  
  9.     <a href="#">defunkt uploaded a new file to defunkt/resque</a>  
  10.   </div>  
  11. </div>  
CSS Code复制内容到剪贴板
  1. // Deprecated: Existing notifications + messages design. To be removed when   
  2. // notifications-next ships.   
  3. //   
  4. // Styleguide 4.5.1   
  5. .notifications {   
  6.   ul.navigation {   
  7.     floatleft;   
  8.     width200px;   
  9.     background#eee;   
  10.   }   
  11.     
  12.   .notification-listing {   
  13.     &>a {   
  14.       displayblock;   
  15.       font-weightbold;   
  16.     }   
  17.   }   
  18. }  

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

更多精彩内容其他人还在看

2013年五大主流浏览器 HTML5 与 CSS3 兼容性大比拼

这篇文章主要介绍了2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼,需要的朋友可以参考下
收藏 0 赞 0 分享

前端设计师需要了解的9个问题

这篇文章主要介绍了前端设计师需要了解的9个问题以及注意事项,非常的实用,是篇非常不错的文章,这里推荐给大家
收藏 0 赞 0 分享

CSS强制性换行的方法区别详解

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
收藏 0 赞 0 分享

CSS语义化命名方式及常用命名规则

本文搜集了一些CSS语义化命名方式以及命名规则。如有错误或不妥之处,敬请指出,欢迎你提出更好的建议,加插更多的命名规范。
收藏 0 赞 0 分享

ul li内容宽度的问题的解决方案

在IE6下只要我设置LI的宽度为auto,不论LI里面的内容多长,LI的宽度始终是100%,即UL的宽度(这里我已经写死了UL的宽度)。设置max-width也没用。高手们,在IE系列浏览器中如何使LI的宽度真正的随着内容增长而增长呢?像FF那样。
收藏 0 赞 0 分享

html5+css3气泡组件的实现

本文是html5+css3系列教程的第一篇,给大家讲述html5+css3实现气泡组件,讲解的十分的详细,这里推荐给大家,希望对大家能有所帮助
收藏 0 赞 0 分享

html5+css3之CSS中的布局与Header的实现

本文从CSS3的布局(CSS的布局的演化、CSS3盒模型-box-sizing、float布局中的bfc、Flexbox简介)Header布局的实现(float实现布局、Header js的实现)向我们展示了HTML5与CSS3的魅力。
收藏 0 赞 0 分享

一款恶搞头像特效的制作过程 利用css3和jquery

今天给大家介绍一款恶搞头像特效的制作过程,你可以把任意一张照片放到跳舞的漫画中,为他带上不同的帽子,让他翩翩起舞,下面我们一起来看一下制作过程和效果
收藏 0 赞 0 分享

大图片根据分辨率自适应宽度仍居中显示

一个1920*900的大图,在1024*768的分辨率下仍居中显示,如何做到这一点,下面是一个可行的解决方案
收藏 0 赞 0 分享

CSS3提交意见输入框样式代码

这个提交意见输入框,结构使用到了table,样式用的css3,包含了多方面的知识,比较适合新手朋友们
收藏 0 赞 0 分享
查看更多