想玩转css 就得先玩好cs(counter-strike)到超人(superman)的境界.
飞鱼:以上纯属扯蛋,我也就会玩点cs,不过还没到超人境界,也不说玩转,只能说是浅谈哈哈.

好了归入正题.

这几天在52css上看了几篇好文章. 蠢蠢欲动.
也分享一下我的一些css经验.

首先从52css上的六个CSS习惯讲起.

一.关于命名

很多人对命名很感冒,不知道怎么命名,我也是,但是我知道 一个好的css命名,可以增加 xhtml的可读性. 这就是 CSS也要语义化. 很多人,会在div 上下加上注释,以提高阅读性, 我觉得 好的css命名 可以不需要注释, 当然 在样式表内 请做好 注释 以提高 查找.

原先我一直都用class_name 下划线方式来命名.后来听说js 在获取class名时会出现,找不到带下划线class. 后来看了一篇文章div css布局命名时尽量避免下划线,后来就开始尝试用 驼峰式(className)和减号(-)做分隔(class-name).
飞鱼:某男说不知道驼峰式是啥东西, 就像骆驼背上的峰一样有起伏,比如:headLogo. head和logo是两个词汇,如果都用小写可能会混淆词义,所以每个词的首字母大写来提高识别率,当然,会有人问,第一个字母为什么不大写, 这个…. 都大写 就成地名了,这是我的理解哈哈…^_^
当然 为了区分 class 和 id 命名方式最好也区分开, 不然当出现 class名跟id 名一样的时候 会搞不灵清.

我的命名规范是:
class 用 驼峰式 (className)
id 用 减号(-)做分隔 (class-name)

这点 跟 上面52css那几点习惯的第一点刚好相反, 这个看个人习惯吧. 差不多.

关于命名还有一点就是尽量避免 常用词单用. 如: title, content, more ; 可以用 .header .title 等层叠(Cascading)来写.这样就不会冲突了.

常用的命名: 这个我有空整理一下我自己的命名,放出来.

二.关于class和id的取舍

貌似, 52css上说的也不太人性化, 样式都用class而不用id, 有class 有 id 总有它的可取之处.
记得最近的 漫谈前端开发中的团队合作 里说到的 面向对象.
网页html 和css 也是可以 组件化的.
class就像OOP(面向对象思想) 的类一样,可以重用,并且继承.
比如: blog 侧边栏组件 用.panel 类命名.
然后利用id 的优先级和 唯一性, 如用#panel-category来定义 分类panel的 特定部分.
如 CSS也要语义化 下面部分的代码段(class为mode那段).
他的代码思想跟我不谋而合, 就是把网页上的区块组件化. 给个通用class名.mode 以及唯一的id名#index_news.
该组件有几个固定的class 如:title content bottom more 等. 这样做的好处是一,代码规范,第二能够很轻松的代码重用.
可能有人会问: 这样怎么体现代码的优势. 这么说吧,如果写完一个组件后要写另外一个组件,的时候,只要ctrl+c这段代码,然后修改class和id是不是就搞定啦.. 这样可以很大提高效率,而且使代码也变得很整洁

三.关于样式的书写顺序,以及优化

发现 很少人 讨论 书写顺序, 虽然不太必要, 但很容易被忽视.
如:a 的 伪类一样 一定要遵循lvha(:link,:visited,:hover,:active)的顺序一样
当然样式里同样有顺序 会让样式更加规范.
我一般都是 以下面的顺序来的.
1.位置 float display margin padding
2.大小 width height
3.背景 background
4.字体 font

还有就是记得缩进,看一个人的代码功底,很大一部分是看命名跟缩进.

四.关于编辑器

我的使用编辑器之路是: 记事本(notepade) – DreamWeaver – 小记事本(notepad++)
DW适合初学者, 代码提示 会给你很大的帮助, notepad++也不错,我比较喜欢他的配色,以及打开速度,不过没有项目管理功能,还是比较麻烦的.

今天就到这里了. 等想到一点在说.

您可能还对这些日志感兴趣

• dom属性 contenteditable=”true” 容器里的一些表现特性心得
• position:absolute 的一些兼容心得。
• IE6 reflow bug 经验因素收集
• zoom:1 引起的bug 一则
• vertical-align 图片文字水平对齐分析