前端css编写规范

谭佳成
2016-05-26
(82)

css书写顺序

  1. 位置属性(position, top, right, z-index, display, float等)

  2. 大小(width, height, padding, margin)

  3. 文字系列(font, line-height, letter-spacing, color- text-align等)

  4. 背景(background, border等)

  5. 其他(animation, transition等)

css-written-order.png

css书写规范


使用CSS缩写属性

CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。

abbreviation.png


去掉小数点前的“0”

del-zero.png


简写命名

很多用户都喜欢简写类名,但前提是要让人看懂你的命名才能简写哦!

name.png


16进制颜色代码缩写

有些颜色代码是可以缩写的,我们就尽量缩写吧,提高用户体验为主。

color-abb.png


连字符CSS选择器命名规范

1.长名称或词组可以使用中横线来为选择器命名。

2.不建议使用“_”下划线来命名CSS选择器,为什么呢?

  • 输入的时候少按一个shift键;

  • 浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的)

  • 能良好区分JavaScript变量命名(JS变量命名是用“_”)

这里有一篇破折号与下划线的详细讨论,英文:点击查看 中文篇:点击查看

underline.png


不要随意使用id

id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。

css-id.png


为选择器添加状态前缀

有时候可以给选择器添加一个表示状态的前缀,让语义更明了,比如下图是添加了“.is-”前缀。

status-select.png


css命名规范(规则)

1)、所有的命名最好都小写

  2)、属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5"

  3)、每个标签都要有开始和结束,且要有正确的层次,排版有规律工整

  4)、空元素要有结束的tag或于开始的tag后加上"/"

  5)、表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等

  6)、定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询。

  7)、给每一个表格和表单加上一个唯一的、结构标记id

  8)、给图片加上alt标签

  9)、尽量使用英文命名原则

  10)、尽量不缩写,除非一看就明白的单词

  相对网页外层重要部分CSS样式命名:

  外套wrap------------------用于最外层头部

      header----------------用于头部主要内容 

      main------------用于主体内容(中部)

      左侧main-left-------------左侧布局

      右侧main- right-----------右侧布局

      导航条nav-----------------网页菜单

      导航条内容 content---------------用于网页中部主体

      底部footer-----------------用于底部

常用的CSS命名规则

头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体佈局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content
标签:tags
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guide
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner

注释的写法:

/* Header */
内容区
/* End Header */

id的命名:

1)页面结构

容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体佈局宽度:wrapper
左右中:left right center

(2)导航

导航:nav
主导航:mainnav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary

(3)功能

标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:register
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标籤页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright

注意事项::

1.一律小写;
2.尽量用英文;
3.不加中槓和下划线;
4.尽量不缩写,除非一看就明白的单词。

 

CSS样式表文件命名

主要的 master.css
模块 module.css
基本共用 base.css
布局、版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css

高效的CSS代码编写规范


  1. 使用Reset但并非全局Reset

不同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容。但需要注意的是,请不要使用全局Reset:

*{ margin:0; padding:0; }

这不仅仅因为它是缓慢和低效率的方法,而且还会导致一些不必要的元素也重置了外边距和内边距。在此建议参考YUI Reset和Eric Meyer的做法。我跟Eric Meyer的观点相同,Reset并不是一成不变的,具体还需要根据项目的不同需求做适当的修改,以达到浏览器的兼容和操作上的便利性。我使用的 Reset如下:

/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td, /* table elements 表格元素 */
img/* img elements 图片元素 */{
  border:medium none;
  margin: 0;
  padding: 0;
}
/** 设置默认字体 **/
body,button, input, select, textarea {
  font: 12px/1.5 '宋体',tahoma, Srial, helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em{font-style:normal;}
/** 重置列表元素 **/
ul, ol { list-style: none; }
/** 重置超链接元素 **/
a { text-decoration: none; color:#333;}
a:hover { text-decoration: underline; color:#F40; }
/** 重置图片元素 **/
img{ border:0px;}
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }

2.良好的命名习惯

无疑乱七八糟或者无语义命名的代码,谁看了都会抓狂。就像这样的代码:

.aaabb{margin:2px;color:red;}

我想即使是初学者,也不至于会在实际项目中如此命名一个class,但有没有想过这样的代码同样是很有问题的:

<h1>Mine website is <span class="red blod">93jc.pw</span>

问题在于如果你需要把所有原本红色的字体改成蓝色,那修改后就样式就会变成:

.red{color:bule;}

这样的命名就会很让人费解,同样的命名为.leftBar的侧边栏如果需要修改成右侧边栏也会很麻烦。所以,请不要使用元素的特性(颜色,位置,大 小等)来命名一个class或id,您可以选择意义的命名 如:#navigation{...},.sidebar{...},.postwrap{...}

这样,无论你如何修改定义这些class或id的样式,都不影响它跟HTML元素间的联系。

另外还有一种情况,一些固定的样式,定义后就不会修改的了,那你命名时就不用担忧刚刚说的那种情况,如:

.alignleft{float:left;margin-right:20px;}  
.alignright{float:right;text-align:right;margin-left:20px;}    
.clear{clear:both;text-indent:-9999px;}

那么对于这样一个段落

<p class="alignleft">我是一个段落!</p>

如果需要把这个段落由原先的左对齐修改为右对齐,那么只需要修改它的className就为alignright就可以了。

3.代码缩写

CSS代码缩写可以提高你写代码的速度,精简你的代码量。在CSS里面有不少可以缩写的属性,包括margin,padding,border,font,background和颜色值等,如果您学会了代码缩写,原本这样的代码:

li{
    font-family:Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    line-height: 1.4em;
    padding-top:5px;
    padding-bottom:10px;
    padding-left:5px;
}

就可以缩写为:

li{
    font: 1.2em/1.4em Arial, Helvetica, sans-serif;
    padding:5px 0 10px 5px;
}

如果您想更了解这些属性要怎么缩写,可以参考《常用CSS缩写语法总结》或者下载CSS-Shorthand-Cheat-Sheet.pdf 。

4.利用css继承

如果页面中父元素的多个子元素使用相同的样式,那最好把他们相同的样式定义在其父元素上,让它们继承这些CSS样式。这样你可以很好的维护你的代码,并且还可以减少代码量。那么本来这样的代码:

#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }

就可以简写成:

#container{ font-family:Georgia, serif; }

5.使用多重选择器

你可以合并多个CSS选择器为一个,如果他们有共同的样式的话。这样做不但代码简洁且可为你节省时间和空间。如:

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

可以合并为

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

6.适当的代码注释

代码注释可以让别人更容易读懂你的代码,且合理的组织代码注释,可使得结构更加清晰。你可以选择做的样式表的开始添加目录:

/*------------------------------------
    1. Reset
    2. Header
    3. Content
    4. SideBar
    5. Footer
  ----------------------------------- */

如此你代码的结构就一目了然,你可以容易的查找和修改代码。

而对于代码的主内容,也应适当的加以划分,甚至在有必要的地方在对代码加以注释说明,这样也有利于团队开发:

/***    Header  ***/
#header{ height:145px; position:relative; }
#header h1{ width:324px; margin:45px 0 0 20px; float:left;  height:72px;}
 
/***    Content ***/
#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}
#content h1{color:#F00}/* 设置字体颜色 */
#content .posts{ overflow:hidden; }
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }
 
/***    Footer  ***/
#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }

7.给你的CSS代码排序

如果代码中的属性都能按照字母排序,那查找修改的时候就能更加快速:

/*** 样式属性按字母排序 ***/
div{
    background-color:#3399cc;
    color:#666;
    font:1.2em/1.4em Arial, Helvetica, sans-serif;
    height:300px;
    margin:10px 5px;
    padding:5px 0 10px 5px;
    width:30%;
    z-index:10;
}

8.保持CSS的可读性

书写可读的CSS将会使得更容易查找和修改样式。对于以下两种情况,哪种可读性更高,我想不言而明。

/*** 每个样式属性写一行 ***/
div{
    background-color:#3399cc;
    color:#666;
    font: 1.2em/1.4em Arial, Helvetica, sans-serif;
    height:300px;
    margin:10px 5px;
    padding:5px 0 10px 5px;
    width:30%;
    z-index:10;
}
 
/*** 所有的样式属性写在同一行 ***/
div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif;  height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }

对于这个规则并非硬性规定,但无论您采用哪种写法,我的建议是始终保持代码一致。属性多的分行写,属性少于3个可以写一行。

9.选择更优的样式属性值

CSS中有些属性采用不同的属性值,虽然达到的效果差不多,当性能上却存在着差异,如:

区别在于border:0把border设为0px,虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值。

而border:none把border设为“none”即没有,浏览器解析“none”时将不作出渲染动作,即不会消耗内存值。所以建议使用border:none;

同样的,display:none隐藏对象浏览器不作渲染,不占用内存。而visibility:hidden则会。


10.使用<link>代替@import

首先,@import不属于XHTML标签,也不是Web标准的一部分,它对于较早期的浏览器兼容也不高,并且对于网站的性能有某些负面的影响。具体可以参考《高性能网站设计:不要使用@import》。所以,请避免使用@import


11.使用外部样式表

这个原则始终是一个很好的设计实践。不单可以更易于维护修改,更重要的是使用外部文件可以提高页面速度,因为CSS文件都能在浏览器中产生缓存。内置在 HTML文档中的CSS则会在每次请求中随HTML文档重新下载。所以,在实际应用中,没有必要把CSS代码内置在HTML文档中:

<style type="text/css" >
    #container{ .. }
    #sidebar{ .. }
</style>

<li style="font-family:Arial, helvetica, sans-serif; color:#666; " >

而是使用<link>导入外部样式表

<link rel="stylesheet" type="text/css" href="css/styles.css" />

12.避免使用CSS表达式(Expression)

CSS表达式是动态设置CSS属性的强大(但危险)方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中,使用CSS表达式可以实现隔一个小时切换一次背景颜色:

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

如上所示,expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。

表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

如果必须使用CSS表达式,一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。所以,在非不得已,请避免使用CSS表达式。


13.压缩代码

当你决定把网站项目部署到网络上,那你就要考虑对CSS进行压缩,出去注释和空格,以使得网页加载得更快。压缩您的代码,可以采用一些工具,如YUI Compressor 利用它可精简CSS代码,减少文件大小,以获得更高的加载速度。


如无说明,本站文章均为原创,转载或引用注明来源:https://93jc.cn/article/49.html


上一篇:初探linux

下一篇:git版本控制介绍