大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

GitHub倡导的CSS编写风格及文件目录是怎样的

今天就跟大家聊聊有关GitHub倡导的CSS编写风格及文件目录是怎样的,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

创新互联是一家集网站建设,新华企业网站建设,新华品牌网站建设,网站定制,新华网站建设报价,网络营销,网络优化,新华网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

编码风格:

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

CSS Code复制内容到剪贴板

  1. // This is a good example!   
    .styleguide-format {   
      border: 1px solid #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   
//= 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。

1.应该使用ID的:header,footer,弹窗
2.不应该使用ID的:导航,列表元素等
当在给一个组件加样式的时候,从元素+类名(更倾向于类名)开始,在默认情况下更倾向于使用直接后代选择器(>)。用尽可能少的特殊的。下面是个例子:

XML/HTML Code复制内容到剪贴板

  1.   
      Category 1
  2.      Category 2     Category 3  

CSS Code复制内容到剪贴板

  1. ul.category-list {// element + class namespace   
        
      &>li {// direct descendant selector > for list items   
        list-style-type: disc;   
      }   
        
      a {// minimal specificity for all links   
        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复制内容到剪贴板

  1.   
        
        
  2. Notifications
  3.        
  4. Messages
  5.                  dragon commented on Issue #551       mojombo commented on Issue #91       defunkt uploaded a new file to defunkt/resque     
  

CSS Code复制内容到剪贴板

  1. // Deprecated: Existing notifications + messages design. To be removed when   
    // notifications-next ships.   
    //   
    // Styleguide 4.5.1   
    .notifications {   
      ul.navigation {   
        float: left;   
        width: 200px;   
        background: #eee;   
      }   
        
      .notification-listing {   
        &>a {   
          display: block;   
          font-weight: bold;   
        }   
      }   
    }

看完上述内容,你们对GitHub倡导的CSS编写风格及文件目录是怎样的有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。


分享名称:GitHub倡导的CSS编写风格及文件目录是怎样的
网页链接:http://dzwzjz.com/article/jogsii.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP