1、css样式命名:
1.总的原则要语义化,避免结构化。例如:一个导航条,可以分配ID为rightHandNav,因为你希望他出现在右边。但是,如果以后将他的位置改在左边,那么css和(x)html就会不同步。所以将这个元素命名为subNav或者secondNav更合适。
2.样式名称可由贴近语义的英文词组、规范易懂可接受的英文简称、数字、中杠(-)和下划线(_)来命名,减少用中文拼音的习惯,杜绝使用中文(虽然可以支持)。
2、css名称书写原则:
1.单个词全部小写。例如:外容器,可用container或者wrapper;
2.多个词组有两种写法:第一种是全部小写,并用中杠(-)或下划线(_)将词组隔开,例如:主版块新闻,可以用main_news或main-news(个人推荐前者);另一种方法叫“驼峰命名法”。多个单词组合在一起,第一个单词小写,第二个单词首字母大写,如:newRelease(最新产品/new+Release)。
3.尽量避免太多单词的组合,记忆和维护都不方便。
3、css属性分类:
纵观css常用属性,大致可以分为四类:自身属性、文本属性、布局定位属性和其他属性。自身属性主要包括:width(宽)、height(高)、background(背景)、border(边框);文本属性主要包括:font(字体)、color(颜色)、text-align(对齐方式)、text-decoration(文本修饰)、text-indent(缩进)等;布局定位属性主要包括:margin(外补丁)、padding(内间距)、float(浮动,包括clear)、position(定位,相应的top,right,bottom,left)、display、visibility 、overflow(溢出)等;其他属性包括:list-style(列表样式)、vertical-vlign(垂直对齐方式)、cursor(光标类型)、z-index(层叠顺序)、zoom等。我所列出的这些属性只是最常用到的,不代表全部。
4、css属性书写顺序。
这个问题可能有的人觉的没有必要讨论,每个人都各有习惯,不好强求。但我觉得,系统的,有规则的排列还是很有必要的。而我的样式书写顺序,恰恰用到了上面提到的属性分类。基本顺序是:自身属性->布局定位属性->文本属性->其他。我所理解的这个顺序,主要是通过视觉而进行定位的,比如看到一台电视机,首先是他的大小、颜色外观性的东西;然后才会关注他的位置,究竟是在电视柜上还是沙发?接下来打开电视,欣赏精彩的节目。。。至于每个分类里具体属性的顺序,则可以按照首字母的顺序,也可以根据自己的习惯。
5、css属性的排列。
是单个样式一行到底还是逐行短句?多层结构样式是继承还是缩进?
从可读性和维护性角度考虑,逐行短句更好,对于初学者也容易读懂;但对于一个大站来说,会有很多的样式,如果都采用这样的书写,会对页面空间造成极大的浪费,而且太多行找起来也不是很容易。对css掌握比较熟练后其实可以试着单行书写,这样不用总是换行,也提高了工作效率。或者有种折中的方法:利用我上面讲到的属性书写顺序,每类属性写一行,这样对于有很多属性的样式也只有4行,如果少的话就直接写在一行。
至于第二个疑问,从个人角度讲,如果是多层结构,继承要比缩进好。因为继承可以直观的表现出各个样式的关系,而且可以通过不同结构的优先级来控制样式的显示效果。有个小问题,理论上讲,样式嵌套不易太多层,因为会影响样式的读取速度,建议嵌套不要超过5层。所以,在采用这种结构时,一定要灵活的把控机构,相信这点对于你一定是游刃有余。
===========================
接触css已经很长时间了。
现在想起来,最初是在DW里直接添加修饰,然后在页面中就自动生成一些STYLE1、STYLE2的东东,当时还看不懂,只晓得那个可以实现自己想要的效果也就不管了;
后来,懂得了那叫css,在旁边一个做页面的老兄的指点下,懂得了怎样建css。于是一边翻书一边在DW的css面板上添加一个个属性,当看到自己可以添加个背景、边框、字体什么的,甭提多高兴了。。。
记得当时的难点,最头痛的就是搞不懂怎么定义链接的样式,那几个顺序总是颠倒,出来的不是自己要的效果,于是网上找资料,好像是找到了蓝色,进入了经典(倒现在都有个很大的疑问,我的蓝色帐号显示的是2004年注册的,但我实在是没有记忆了。。。惭愧ing),开始比较系统的学习,但有一段失意阶段想不起自己在那段时间干了些什么,总之,慢慢的学会了怎么定义,怎么引用。
再后来开始注重css的命名、书写格式。自己也学着向规范靠近,在工作中、在论坛里,不停的向高手们学习,让自己充实起来。。。
直到今天,想着总结整理这些东西,将自己脑海中现有的东西做个梳理,记得初中时一位老师说过一句话:“没有总结就没有提高!”。总之,为了自己,也为了能让更多需要这些内容的朋友看到,或许可以起到微薄的作用,但总聊胜于无。如果有朋友觉得这些有什么错误或者有不同的意见,欢迎奉言献策,不胜感激!!
发表评论有 4 位朋友发表了评论
楼主上面的第4条的我不是很赞同!我们来假设网络的速度为1KB/s,代码的渲染的的顺序是从上而下的,从左到右的,所以,当你当你前台显示的对应的布局先显示自身属性,而CSS还没有渲染到位置属性的时候,你页面里面对应的结构可能本来在右边的东西跑到左边去了。当然网络的条件只是个理想中的假设,我个人觉得还是布局定位属性->自身属性->文本属性->其他,这个顺序比较好!欢迎大家讨论!
非常感谢朋友的讨论,你的想法很不错,不过我觉得这样的情况发生的可能性很小,而且css样式文件对这两个位置渲染速度的差别应该是微乎其微的。
博主的blog模板 css代码写得还不够简洁..
谢谢分享你的经验。正在学习css的途中….