Skymvc是一款简洁、快速、高效的php开发框架,是敏捷开发必备工具。支持多模板机制,一套程序可以同时开发PC端、wap端、和app接口。
下载地址:github下载
查看 0 | 回复 0
1
主题
4
帖子
0
积分
   发表于2016-05-17

CSS约定

1.文件引用

  • 一律使用link的方式调用外部样式

  • 不允许在页面中使用 <style> 块;

  • 不允许在 <style> 块中使用 @import

  • 不允许使用 style 属性写行内样式。

一般情况下,在页面中只允许使用 <link /> 标签来引用CSS文件,

2.命名-组成元素

  • 命名必须由单词、中划线①或数字组成;

  • 不允许使用拼音(约定俗成的除外,如:youku, baidu),尤其是缩写的拼音、拼音与英文的混合。

不推荐:

.xiangqing { sRules; }
.news_list { sRules; }
.zhuti { sRules; }

推荐:

.detail { sRules; }
.news-list { sRules; }
.topic { sRules; }

①我们使用中划线 “-” 作为连接字符,而不是下划线 "_"。

我们知道2种方式都有不少支持者,但 "-" 能让你少按一次shift键,并且更符合CSS原生语法,所以我们只选一种目前业内普遍使用的方式

3.命名-词汇规范

  • 不依据表现形式来命名;

  • 可根据内容来命名;

  • 可根据功能来命名。

不推荐:

left, right, center, red, black

推荐:

nav, aside, news, type, search

4.命名-缩写规范

  • 保证缩写后还能较为清晰保持原单词所能表述的意思;

  • 使用业界熟知的或者约定俗成的。

不推荐:

navigation   =>  navi
header       =>  head
description  =>  des

推荐:

navigation   =>  nav
header       =>  hd
description  =>  desc

5.命名-前缀规范

前缀说明示例
g-全局通用样式命名,前缀g全称为global,一旦修改将影响全站样式g-mod
m-模块命名方式m-detail
ui-组件命名方式ui-selector
js-所有用于纯交互的命名,不涉及任何样式规则。JSer拥有全部定义权限js-switch
  • 选择器必须是以某个前缀开头

不推荐:

.info { sRules; }
.current { sRules; }
.news { sRules; }

因为这样将给我们带来不可预知的管理麻烦以及沉重的历史包袱。你永远也不会知道哪些样式名已经被用掉了,如果你是一个新人,你可能会遭遇,你每定义个样式名,都有同名的样式已存在,然后你只能是换样式名或者覆盖规则。

推荐:

.m-detail .info { sRules; }
.m-detail .current { sRules; }
.m-detail .news { sRules; }

所有的选择器必须是以 g-, m-, ui- 等有前缀的选择符开头的,意思就是说所有的规则都必须在某个相对的作用域下才生效,尽可能减少全局污染。

js- 这种级别的className完全交由JSer自定义,但是命名的规则也可以保持跟重构一致,比如说不能使用拼音之类的

6.id与class

重构工程师只允许使用class(因历史原因及大家的习惯做出妥协)。

7.书写格式

  • 选择器与大括号之间保留一个空格;

  • 分号之后保留一个空格;

  • 逗号之后保留一个空格;

  • 所有规则需换行;

  • 多组选择器之间需换行。

不推荐:

main{
    display:inline-block;
}
h1,h2,h3{
    margin:0;
    background-color:rgba(0,0,0,.5);
}

推荐:

main {
    display: inline-block;
}
h1,
h2,
h3 {
    margin: 0;
    background-color: rgba(0, 0, 0, .5);
}

8.规则与分号

每条规则结束后都必须加上分号

不推荐:

body {
    margin: 0;
    padding: 0;
    font-size: 14px
}

推荐:

body {
    margin: 0;
    padding: 0;
    font-size: 14px;
}

9.0与单位

如果属性值为0,则不需要为0加单位

不推荐:

body {
    margin: 0px;
    padding: 0px;
}

推荐:

body {
    margin: 0;
    padding: 0;
}

10.0与小数

如果是0开始的小数,前面的0可以省略不写

不推荐:

body {
    opacity: 0.6;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

推荐:

body {
    opacity: .6;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

11.去掉uri中引用资源的引号

不要在url()里对引用资源加引号

不推荐:

body {
    background-image: url("sprites.png");
}
@import url("global.css");

推荐:

body {
    background-image: url(sprites.png);
}
@import url(global.css);

12.HEX颜色值写法

  • 将所有的颜色值小写;

  • 可以缩写的缩写至3位。

不推荐:

body {
    background-color: #FF0000;
}

推荐:

body {
    background-color: #f00;
}

13.属性书写顺序

  • 遵循先布局后内容的顺序。

.g-box {
   display: block;
   float: left;
   width: 500px;
   height: 200px;
   margin: 10px;
   padding: 10px;
   border: 10px solid;
   background: #aaa;
   color: #000;
   font: 14px/1.5 sans-serif;
}

这个应该好理解,比如优先布局,我们知道布局属性有 display, float, overflow 等等;内容次之,比如 color, font, text-align 之类。

  • 组概念。

拿上例的代码来说,如果我们还需要进行定位及堆叠,规则我们可以改成如下:

.g-box {
   display: block;
   position: relative;
   z-index: 2;
   top: 10px;
   left: 100px;
   float: left;
   width: 500px;
   height: 200px;
   margin: 10px;
   padding: 10px;
   border: 10px solid;
   background: #aaa;
   color: #000;
   font: 14px/1.5 sans-serif;
}

从代码中可以看到,我们直接将z-index, top, left 紧跟在 position 之后,因为这几个属性其实是一组的,如果去掉position,则后3条属性规则都将失效。

  • 私有属性在前标准属性在后

.g-box {
   -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
   -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
   -o-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
   box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

当有一天你的浏览器升级后,可能不再支持私有写法,那么这时写在后面的标准写法将生效,避免无法向后兼容的情况发生。

14.注释规范

保持注释内容与星号之间有一个空格的距离

普通注释(单行)

/* 普通注释 */

区块注释

/**
 * 模块: m-detail
 * 描述:酒店详情模块
 * 应用:page detail, info and etc...etc
 */

有特殊作用的规则一定要有注释说明 应用了高级技巧的地方一定要注释说明

15.hack规范

  • 尽可能的减少对Hack的使用和依赖,如果在项目中对Hack的使用太多太复杂,对项目的维护将是一个巨大的挑战;

  • 使用其它的解决方案代替Hack思路;

  • 如果非Hack不可,选择稳定且常用并易于理解的。

.test {
   color: #000;       /* For all */
   color: #111\9;     /* For all IE */
   color: #222\0;     /* For IE8 and later, Opera without Webkit */
   color: #333\9\0;   /* For IE8 and later */
   color: #444\0/;    /* For IE8 and later */
   *color: #666;      /* For IE7 and earlier */
   _color: #777;      /* For IE6 and earlier */
}
  • 严谨且长期的项目,针对IE可以使用条件注释作为预留Hack或者在当前使用

IE条件注释语法:

<!--[if <keywords>? IE <version>?]>
<link rel="stylesheet" href="*.css" />
<![endif]-->

语法说明:

<keywords>
if条件共包含6种选择方式:是否、大于、大于或等于、小于、小于或等于、非指定版本
是否:指定是否IE或IE某个版本。关键字:空
大于:选择大于指定版本的IE版本。关键字:gt(greater than)
大于或等于:选择大于或等于指定版本的IE版本。关键字:gte(greater than or equal)
小于:选择小于指定版本的IE版本。关键字:lt(less than)
小于或等于:选择小于或等于指定版本的IE版本。关键字:lte(less than or equal)
非指定版本:选择除指定版本外的所有IE版本。关键字:!
<version>
目前的常用IE版本为6.0及以上,推荐酌情忽略低版本,把精力花在为使用高级浏览器的用户提供更好的体验上,另从IE10开始已无此特性

16.避免低效率选择器

  • 避免类型选择器

不允许:

div#doc { sRules; }
li.first { sRules; }

应该:

#doc { sRules; }
.first { sRules; }

CSS选择器是由右到左进行解析的,所以 div#doc 本身并不会比 #doc 更快

  • 避免多id选择器

不允许:

#xxx #yyy { sRules; }

应该:

#yyy { sRules; }

17.属性缩写与分拆

  • 无继承关系时,使用缩写

不推荐:

body {
   margin-top: 10px;
   margin-right: 10px;
   margin-bottom: 10px;
   margin-left: 10px;
}

推荐:

body {
   margin: 10px;
}
  • 存在继承关系时,使用分拆方式

不推荐:

.m-detail {
   font: bold 12px/1.5 arial, sans-serif;
}
.m-detail .info {
   font: normal 14px/1.5 arial, sans-serif;
}

要避免错误的覆盖:

.m-detail .info {
   font: 14px sans;
}

如果你只是想改字号和字体,然后写成了上面这样,这是错误的写法,因为 font 复合属性里的其他属性将会被重置为 user agent 的默认值,比如 font-weight 就会被重置为 normal

推荐:

.m-detail {
   font: bold 12px/1.5 arial, sans-serif;
}
.m-detail .info {
   font-weight: normal;
   font-size: 14px;
}

在存在继承关系的情况下,只将需要变更的属性重定义,不进行缩写,避免不需要的重写的属性被覆盖定义

  • 根据规则条数选择缩写和拆分

不推荐:

.m-detail {
   border-width: 1px;
   border-style: solid;
   border-color: #000 #000 #f00;
}

推荐:

.m-detail {
   border: 1px solid #000;
   border-bottom-color: #f00;
}

18.模块化

  • 每个模块必须是一个独立的样式文件,文件名与模块名一致;

  • 模块样式的选择器必须以模块名开头以作范围约定;

假定有一个模块如前文 HTML模块化,那么 m-detail.scss 的写法大致如下:

.m-detail {
    background: #fff;
    color: #333;
    &-hd {
        padding: 5px 10px;
        background: #eee;
        .title {
            background: #eee;
        }
    }
    &-bd {
        padding: 10px;
        .info {
            font-size: 14px;
            text-indent: 2em;
        }
    }
    &-ft {
        text-align: center;
        .more {
            color: blue;
        }
    }
}

编译之后代码如下:

.m-detail {
    background: #fff;
    color: #333;
}
.m-detail-hd {
    padding: 5px 10px;
    background: #eee;
}
.m-detail-hd .title {
    background: #eee;
}
.m-detail-bd {
    padding: 10px;
}
.m-detail-bd .info {
    font-size: 14px;
    text-indent: 2em;
}
.m-detail-ft {
    text-align: center;
}
.m-detail-ft .more {
    color: blue;
}

任何超过3级的选择器,需要思考是否必要,是否有无歧义的,能唯一命中的更简短的写法

转自https://github.com/doyoe/html-css-guide#css