吵吵   2012-06-26  阅读:2,405

吵吵现在修改自己的主题的时候都必须要借助于chrome的审查元素功能了,因为这个我做的第一个主题很是杂乱,css命名与兼容做的很不好,整个看起来就是乱糟糟的。前些时候把css代码格式都去掉成了一行了,本想着能够减小文件大小,以加快下载速度,现在看来纯粹是多此一举了,对于这样一个小小的个人博客而言,易于维护的代码远比效率要重要的多。

对于一个网站开发者来说,虽然语言格式并不难,比传统的桌面程序开发要少去如内存分配等很多的问题,但是依旧不让我们省心的就是这蛋碎的浏览器兼容问题了。往往浏览器的兼容性除了要考虑IE,chrome,firefox,safri等等各种不同厂家做的外,还有各种版本不兼容的问题,如IE6就总是扮演着一个黄昏老人,手里却握着匕首。很多程序员也许不屑于兼容IE6了,但是你的老板不会管什么浏览器,他只关心为什么用不了。

命名规范

常用类/ID命名规范
  页 眉:header
  内 容:content
  容 器:container
  页 脚:footer
  版 权:copyright 
  导 航:menu
  主导航:mainMenu
  子导航:subMenu
  标 志:logo
  标 语:banner
  标 题:title
  侧边栏:sidebar
  图 标:Icon
  注 释:note
  搜 索:search
  按 钮:btn
  登 录:login
  链 接:link
……

常用类的命名应尽量以常见英文单词为准,做到通俗易懂,并在适当的地方加以注释。对于二级类/ID命名,则采用组合书写的模式,至于是驼峰命名法还是其它就看个人习惯了。如一个单词的首字母应大写:诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn”……当然,它也可以使search_input,search_icon,search_btn… …

书写规范

页面CSS文档都应采用结构化的书写方式,逻辑清晰易于阅读

#idname , .classname {
width: %或px\em;
height: %或px\em;
margin:
border:
padding:
———————————————————容器长宽确定
background: #fff url() repeat left bottom fixed 1px 2px;
color:
“FONT-SIZE: 9.5pt;”>宋体”, Arial, Helvetica,sans-serif;
font-size:
line-height:
———————————————————容器内容格式
display:
visibility:
overflow:
position:
top:
right:
bottom:
left:
float:
clear:
———————————————————容器布局
}
每一个属性结尾都必须写分号,其中有的值如果不需要,可以不写,大体上是这样的顺序,也符合思考的顺序。

有几点注意事项:
a) “FONT-SIZE: 9.5pt;”>必须以sans-serif字体做结尾;
b) 减少样式数量,尽量重复使用;
c) 必须清除float(后文论述);
d) 单位:使用像素(px);
e) 颜色值:使用#RRGGBB格式

float与clear在不同流浪器中的兼容问题

在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。看下面的例子:


TEST DIV
TEST DIV
TEST DIV
TEST DIV
TEST DIV

显示的结果如下:

要解决这个问题有以下两种方法:

1、一般的方法,使用clear:both通常的解决办法是在浮动层后面添加一个额外元素,例如一个div或者一个br,并且定义它的样式为clear: both,即我们上文所说的需要clear掉float。

2、直接兼容多浏览器的css方法,使用after来增加一个元素:

CSS的方法–使用:after这种方法在在文章《How To Clear Floats Without Structural Markup》中被提到。
/*需要用到的CSS样式表的最初设想*/
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/*实际用到的CSS样式表(针对不同浏览器做了优化)*/
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/ *
html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

在浏览器混战的年代,各种浏览器层出不穷,但是从后出的浏览器来看,并非是越来越不兼容,反而后出的浏览器兼容性要好的多,主要原因一是w3c标准的规范,二是开源的影响力,这不,基于chrome内核的浏览器也越来越多了。附上以前写的两篇文章,今日看来,多有纰漏了。

float网页布局在不同浏览器中的兼容性

js改变不同浏览器透明属性

吵吵微信朋友圈,请付款实名加入:

吵吵 吵吵

3条回应:“那些令人蛋碎的css代码的经验之谈”

  1. 标语大全说道:

    讲解得很详细,会细看

  2. java编程网说道:

    师兄,我的域名很久之前就该咯,你貌似还没改….新域名是http://www.haohaoblog.com现在都有更新哦…欢迎指教

  3. CO2说道:

    關於瀏覽器兼容的問題,我覺得其實可以做到分級 支持的;先進的瀏覽器實現最多的效果,老舊的瀏覽器實現基本效果;btw做了兩年發現前端開發不會比做後端輕鬆到哪去,有點java那種一次編譯到處調試的味道

发表评论

电子邮件地址不会被公开。 必填项已用*标注