我的前端编码习惯 —— css篇

ID和Class命名风格

1.id 和 class 的命名总规则为:内容优先,表现为辅。⾸先根据内容来命名,⽐如 main-nav。如 果根据内容找不到合适的命名,可以再结合表现来定,⽐如 skin-blue,present-tab,col-main。

2.使用有含义的 id 和 class 名称。

    /* Not recommended: meaningless */
    #yee-1901 {}

    /* Not recommended: presentational */
    .button-green {}
    .clear {}
    /* Recommended: specific */
    #gallery {}
    #login {}
    .video {}

    /* Recommended: generic */
    .aux {}
    .alt {}

3.应该尽量简短,同时要容易理解。

    /* Not recommended */
    #navigation {}
    .atr {}
    /* Recommended */
    #nav {}
    .author {}

4.除非需要,否则不要在 id 或 class 前加元素名,否则会使选择器效率变低。

    /* Not recommended */
    ul#example {}
    div.error {}
    /* Recommended */
    #example {}
    .error {}

5.尽量使用 CSS 中可以简写的属性 (如 font),可以提高编码效率以及代码可读性。

    /* Not recommended */
    border-top-style: none;
    font-family: palatino, georgia, serif;
    font-size: 100%;
    line-height: 1.6;
    padding-bottom: 2em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0;
    /* Recommended */
    border-top: 0;
    font: 100%/1.6 palatino, georgia, serif;
    padding: 0 1em 2em;

6.使用带前缀的命名空间可以防止命名冲突,同时提高代码可维护性。

    .adw-help {} /* AdWords */
    #maia-note {} /* Maia */
    ID 和 Class 命名分隔符
    选择器中使用连字符可以提高可读性。
    /* Not recommended: does not separate the words “demo” and “image” */
    .demoimage {}

    /* Not recommended: uses underscore instead of hyphen */
    .error_status {}
    /* Recommended */
    #video-id {}
    .ads-sample {}

7.id使⽤下划线进⾏连接,如 product_title。class使⽤连字符进⾏连接,如 product-lists。这样容易区分,同时对脚本 调试有帮助。

8.id和class名称中只能出现26个英⽂字母、数字、下划线'_'连接符'-' ,任何其它字符都是不被允许使⽤的。尽量⽤英⽂单词命名。对于某些产品特⾊词汇,也可以使⽤拼⾳,其它任何情况下都不使⽤拼⾳。

CSS格式规范

1.书写顺序:按照属性首字母顺序书写 CSS 易于阅读和维护,排序时忽略带有浏览器前缀的属性。

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

2.块级内容缩进:为了反映层级关系和提高可读性,块级内容都应缩进。

    @media screen, projection {
      html {
        background: #fff;
        color: #444;
      }
    }

3.声明结束:每行 CSS 都应以分号结尾。

/* Not recommended */
.test {
  display: block;
  height: 100px
}
/* Recommended */
.test {
  display: block;
  height: 100px;
}

4.属性名和值之间都应有一个空格。

/* Not recommended */
h3 {
  font-weight:bold;
}
/* Recommended */
h3 {
  font-weight: bold;
}

5.声明样式块的分隔:在选择器和 {} 之间用空格隔开。

/* Not recommended: missing space */
#video{
  margin-top: 1em;
}

/* Not recommended: unnecessary line break */
#video
{
  margin-top: 1em;
}
/* Recommended */
#video {
  margin-top: 1em;
}

6.每个选择器都另起一行。

/* Not recommended */
a:focus, a:active {
  position: relative; top: 1px;
}
/* Recommended */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

7.规则之间都用空行隔开。

html {
  background: #fff;
}

body {
  margin: auto;
  width: 50%;
}

8.属性选择器和属性值用单引号,URI 的值不需要引号。

/* Not recommended */
@import url("//www.google.com/css/maia.css");

html {
  font-family: "open sans", arial, sans-serif;
}
/* Recommended */
@import url(//www.google.com/css/maia.css);

html {
  font-family: 'open sans', arial, sans-serif;
}

9.不适用css expression,不使用复杂滤镜,尽量不设置容器的高度,保持容器高度可自适应。除某些并排的块需要高度等齐之外。height:100%;或height:1%;可能会遇到兼容性问题。
9.值为 0 时不用添加单位。

    margin: 0;
    padding: 0;

10.值在 -1 和 1 之间时,不需要加 0。

    font-size: .8em;

11.16进制表示法

    /* Not recommended */
    color: #eebbcc;
    /* Recommended */
    color: #ebc;

CSS 元规则

1.分段注释:用注释把 CSS 分成各个部分。

    /* Header */
    #adw-header {}
    /* Footer */
    #adw-footer {}
    /* Gallery */
    .adw-gallery {}

优化指南

浏览器对选择器读取的顺序是从右到左进行。选择器的最右边部分被称为“关键选择器”,它将决定你的选择器的效率如何。所以越具体的关键选择器,其性能越高。如果给选择器的效率排序,从高到低依次是:

  • id 选择器(#id)

  • 类选择器(.class)

  • 标签选择器(p)

  • 相邻选择器(h1 + p)

  • ⼦选择器(ul > li)

  • 后代选择器(li a)

  • 通配符选择器(*)

  • 属性选择器(a[rel='external'])

  • 伪类选择器(a:hover, li:nth-child)
    基于此原则,以下给出具体的样式优化指南:

1.用于CSS的选择器应尽量具体,避免效率低下的普遍规则,并保证尽可能应用到所有需要应用的元素又不能影响无关的现有元素或后加的元素

2.选择器不能过于依赖HTML结构,当其中一个模块的结构变换顺序或加入一个新功能时,不要影响到已有的样式。

3.CSS3的各种属性和位置选择器虽然方便,但是匹配性能很低,而且过于依赖HTML结构,尽量少用,应用类名代替

4.不要在类名或ID名前面加上标签名或类名,否则会使选择器效率变低。

5.如果确信HTML结构比较固定,且选择器之间是父子关系,在不考虑低版本IE浏览器情况下可以加 > (子元素选择器)

6.在CSS规则中尽可能使用较少层级的后代选择器,最好不要超过三层,因为层级越多匹配越慢,并且越依赖HTML结构。有些层级的选择器完全没有必要,如ul li,一般可省去前面的ul。

7.SCSS层级书写方式不是为了让你更方便的嵌套层级,而是为了更方便的使用父级命名空间。

8.CSS应该以模块化开发为主,尤其一个独立功能的组件,同一功能和模板的样式应写在一起,并继承同一父选择器,创造一个良好的命名空间,以便于此功能模块的代码拿出来可以独立使用

.panel{}
.panel-header{}
.panel-body{}
.panel-footer{}

9.虽然每个选择器的各种样式可以层叠,但是加样式时必须要考虑尽可能的少影响到已有样式, 尽量⽤各标签的默认样式,也不要重置并不存在的样式,使得重⽤性很差。举个简单的例⼦, h1-h6 默认的加粗样式不要⽤样式去除,以免下次要⽤时再⽤加粗样式覆盖回来。

10.可以借助原本的继承关系来少加样式,当需要重写样式时,⽤选择器的权重关系覆盖⽽不要 ⽤!important。

11.尽量不要使⽤!important打乱原有CSS继承关系,除⾮此样式功能单⼀并且你确信此样式不会被其它样式应⽤,更多时候需要合理使⽤选择器的权重以避免不希望有的样式覆盖。更多权重⽅⾯的⽂章可以参考http://www.w3cplus.com/css/cs...

12.如果你想展现不同状态的链接样式,⼀定要记住 link-visited-hover-active 的顺序,或者简写为 LVHA

  1. CSS 不要直接拿 div 标签当做选择器写样式,应该为其加类名。因为 div 属于⽆任何特殊意义 的标签,使⽤范围特别⼴,所以应特别注意对 div 应⽤样式。

14.不要写⽤不到的样式,应定期排查样式表中的样式,以免样式表越来越臃肿。

15.虽然 ID 选择器效率最⾼,但是建议在样式表中不⽤ ID 作为选择器,因为其权重很⾼,应留给⽤户去使⽤,以及更多的留给 JS 接口。

16.对于需要同时改变状态的⼀组元素,不要为每⼀个元素加样式,⽽是应该在⽗元素上加样式类统⼀处理。

 .parent-class .a.active {} 
 .parent-class .b.active {} 
 .parent-class .c.active {} 
 应改为:
 .parent-class.active .a {} 
 .parent-class.active .b {} 
 .parent-class.active .c {} 

17.任何时候不要⽤ html 和 body 选择器作为⽗选择器,除⾮⽤于 IE6 和 IE7 浏览器的 css hack。

CSS bug 排查⽅法

1.检查 CSS 是否正确

检查⼀下有⽆拼写错误、是否忘记结尾的 } 等。可以利⽤ CleanCSS 来检查 CSS 的拼写错误。 CleanCSS 本是为 CSS 减肥的⼯具,但也能检查出拼写错误。

2.利⽤ border 属性确定出错元素的布局特性

使⽤ float 或 position 属性布局⼀不⼩⼼就会出错。这时为元素添加 border 属性确定元素边界 或添加 background 属性,错误原因即⽔落⽯出。

3.利⽤各种虚拟机平台测试各 IE 版本中的效果

4.利⽤第三⽅测试⼯具或浏览器⾃带的调试⼯具调试

IE6、IE7 可以安装 IE developetoolbar V2/IE webdeveloper。Microsoft 有 script Editor,IE8+ 已经⾃带开发者⼯具,并且⾼版本的浏览器中可以模拟出低⾄ IE7 的效果。FF 上有著名的 Firebug, 以及 chrome 和 safari ⾃带的开发者⼯具

前端菜鸟-DodoMonster
大家猴,我是一只好菜好菜的前端菜鸟-DodoMonster

DodoMonster want to be an excellent Web Font-End Developer.Fighting!!!

2.1k 声望
629 粉丝
0 条评论
推荐阅读
Nuxt项目支持eslint+pritter+typescript
npx create-nuxt-app <项目名>,如:npx create-nuxt-app nuxt-ts,按照提示安装你想要的东西,本次项目预装: Universal模式下koa+PWA+linter+prettier+axios ,默认的项目目录如下:

dodomonster12阅读 8.3k评论 3

涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco20阅读 2.1k评论 2

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 1.9k

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan21阅读 1.6k评论 1

封面图
「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...

wuwhs17阅读 2.4k

封面图
学会这些 Web API 使你的开发效率翻倍
随着浏览器的日益壮大,浏览器自带的功能也随着增多,在 Web 开发过程中,我们经常会使用一些 Web API 增加我们的开发效率。本篇文章主要选取了一些有趣且有用的 Web API 进行介绍,并且 API 可以在线运行预览。C...

九旬13阅读 1.6k

封面图

DodoMonster want to be an excellent Web Font-End Developer.Fighting!!!

2.1k 声望
629 粉丝
宣传栏