GitHub提倡的CSS撰写设计风格及文档文件目录布署

2021-01-20 06:26 jianzhan

这个CSS设计风格指南是在GitHub內部用于运用程序流程的指南。大家激励您创建1个合适你自身精英团队的设计风格指南。在你阅读文章这个以前,你必须大概掌握SCSS英语的语法和KSS文本文档。尽管大家根据KSS文本文档把设计风格移殖到了SCSS上,但请尽量马上升級全部元素的CSS。不必混和小量SCSS和无文件格式的CSS。

编号设计风格:

1.用两个空格的“soft-tabs”来缩进
2.在特性申明的“:”后再加空格
3.在标准申明后的“{”前再加空格
4.应用106进制色调编码#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/下。别的的应当放在应用它的文档的顶部。
做为1个工作经验规律,不必应用超出3层的嵌套循环。假如你发现你即将应用超出3层,想一想再次机构你的标准。
文档机构:

1般来讲,CSS文档机构应当想下面这样:

styles
├── components
│   ├── comments.scss
│   └── listings.scss
├── globals
│   ├── browser_helpers.scss
│   ├── responsive_helpers.scss
│   ├── variables.scss
├── plugins
│   ├── jquery.fancybox⑴.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):
在网页页面中明确出現1次的元素应当应用IDs.不然应用Class.在不确定性时应用Class。

1.应当应用ID的:header,footer,弹窗
2.不可该应用ID的:导航栏,目录元素等
当在给1个组件加款式的情况下,从元素+类名(更趋向于类名)刚开始,在默认设置状况下更趋向于应用立即子孙后代挑选器(>)。耗尽将会少的独特的。下面是个事例:

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特异性指南:

假如你务必应用1个id挑选器,保证在你的标准申明中仅有1个。像#header .search #quicksearch { … }这样的被觉得是不太好的。
当在改动1个现有元向来独特应用,试着应用类名。应用.listings-layout.listings-bigger而并不是.listings-layout.bigger。想一想ack/grep在你将来的编码中。
像disabled, mousedown, danger, hover, selected,active这些类名应当有1个类做为取名室内空间(button.selected是个好的事例)
试验性作用:
大家要想內部应用和试验性作用。在撰写css的情况下必须1些组织纪律性由于现有的作用和试验性作用的css可能被另外出示。自始至终铭记这些总体目标:

1.给新作用写款式的情况下不必危害已有功功率能的款式
2.当试验性作用不工作中的情况下能够很非常容易的移除
3.当新作用上线的情况下能够很非常容易移除旧的作用的css
4.在开发设计beta或试验性作用时,用-experimental自变量更换根取名室内空间和弃用现有根连接点。1般来讲,最好是反复款式试验块而并不是尝试和拓展现有的款式。

1个现有功功率能的:

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