技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> CSS/HTML --> Github 的 CSS 风格指南

Github 的 CSS 风格指南

浏览:1975次  出处信息

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

编码风格:

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

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

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

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

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

  • 文档风格与KSS相同

这里有个好的语法示例:

  1. // This is a good example!

  2. .styleguide-format {

  3.  border:1px solid #0f0;

  4.  color:#000;

  5.  background: rgba(0,0,0,0.5);

  6. }

SCSS 风格:

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

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

文件组织:

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

  1. styles

  2. ├── components

  3.   ├── comments.scss

  4.   └── listings.scss

  5. ├── globals

  6.   ├── browser_helpers.scss

  7.   ├── responsive_helpers.scss

  8.   ├── variables.scss

  9. ├── plugins

  10.   ├── jquery.fancybox-1.3.4.css

  11.   └── reset.scss

  12. ├── sections

  13.   ├── issues.scss

  14.   ├── profile.scss

  15. └── shared

  16.    ├── forms.scss

  17.    └── markdown.scss

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

//= require_tree ./plugins//= require my_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。

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

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

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

  1. <ulclass="category-list">

  2.  <liclass="item">Category 1</li>

  3.  <liclass="item">Category 2</li>

  4.  <liclass="item">Category 3</li>

  5. </ul>

  1. ul.category-list {// element + class namespace

  2.  &>li {// direct descendant selector > for list items

  3.    list-style-type: disc;

  4.  }

  5.  a {// minimal specificity for all links

  6.    color:#ff0000;

  7.  }

  8. }

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变量替换根命名空间和弃用现有根节点。一般来说,最好重复样式实验块而不是试图和扩展现有的样式。

一个现有功能的:

  1. <divclass="notifications">

  2.  <ulclass="navigation">

  3.    <li><ahref="#">Notifications</a></li>

  4.    <li><ahref="#">Messages</a></li>

  5.  </ul>

  6.  <divclass="notifications-listing">

  7.    <ahref="#">dragon commented on Issue #551</a>

  8.    <ahref="#">mojombo commented on Issue #91</a>

  9.    <ahref="#">defunkt uploaded a new file to defunkt/resque</a>

  10.  </div>

  11. </div>

  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.    float: left;

  8.    width:200px;

  9.    background:#eee;

  10.  }

  11.  .notification-listing {

  12.    &>a {

  13.      display: block;

  14.      font-weight: bold;

  15.    }

  16.  }

  17. }

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

建议继续学习:

  1. GitHub中的README.MD文件编写语法    (阅读:4211)
  2. 各浏览器的默认CSS    (阅读:3702)
  3. github 上 Fork 别人的项目后的常用的操作指南    (阅读:3760)
  4. CSS的未来:明智的布局工具终于到来    (阅读:3138)
  5. CSS 忍者:安全的 CSS hacks 秘籍    (阅读:2820)
  6. 使用CSS框架的优点和缺点    (阅读:2638)
  7. 12个很少被人知道的CSS事实    (阅读:2619)
  8. 移动网站开发――CSS    (阅读:2229)
  9. CSS 设计理念    (阅读:1908)
  10. 你必须收藏的Github技巧    (阅读:2152)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1