CSS注释、命名、继承性、样式排序等CSS技巧的小结_经验交流

一、关于注释

  在创建xhtml+CSS网站时,CSS中的注释非常重要。在创建CSS样式时,应当保持随手注释的习惯。一般的,我习惯于使用“/* 注释内容 */”的格式来写注释,因为在EditPlus等具有高亮功能的编辑器里,使用C语言中常用的“/***************/”之类的注释是无意义的,没有必要填充大量无意义内容作为分隔。带有注释的文档作为网站的原始CSS文档,在发布网站的时候,可以使用CSS压缩工具压缩CSS,在输出的CSS中去掉注释以提高文件传输效率。

二、关于命名

  在给CSS文件命名的时候,我比较喜欢使用符合语义的英文名或者缩写命名,在非常用部分也许会用部分拼音命名。另外,在某些有从属关系的class里,我可能会使用类似“list_banner”之类的命名,即父元素名加上“_”再加上元素名。
  关于命名,可以根据团队设计师的习惯进行协商。但最好在命名之后加上注释,以便将来生成文档备查。

三、关于继承性

  在CSS中,要善用继承性。比如在两个嵌套的div中,父元素定义了background-color属性为黑色,如果子元素的背景同为黑色,则不需重复定义。善于利用CSS的继承性可以让代码更有效、更精简。

四、关于CSS定义的层次

  在定义CSS中的class时,建议使用层次分明的方式来描述语句。
  示例结构:

 Example Source Code [www.52css.com]
<div id="menu">
  <div class="menulist">
    <div class="selectit"></div>
  </div>
</div>
  示例CSS:

 Example Source Code [www.52css.com]
#menu { ... }
#menu .menulist { ... }
#menu .menulist .selectit { ... }
  在上例中,从最终效果来看,#menu没有必要重复出现,但是实际上如果能够在前面加上#menu,将会让文档的层次更加明了,更利于阅读。

五、关于样式排序

  在设计CSS样式表时,我们大多是手写代码,这样很容易造成class中的样式排序混乱。比如有几个class中用到了padding、margin、background、color等样式,但是排序的时候,有的class是background比较靠前,有的是margin比较靠前。这样就造成了一定的混乱,容易让思路受挫。我建议个人或者团队的设计师协定一个大致顺序,这样从个别来说看不出太大差别,但从整体上将更加易于阅读和管理,整体效率会提高不少。

  比如,我默认将width、height和padding、margin、border等放在较靠前的位置,background其次,然后是控制文本的font、color、text-align等,接着是某些特殊标签才能用到的元素,像list-style等,最后是css滤镜。当遇到特殊情况时(比如CSS某些属性的优先级需要定义)可以灵活处理。 

时间: 2024-08-30 09:38:32

CSS注释、命名、继承性、样式排序等CSS技巧的小结_经验交流的相关文章

IE对CSS样式表的限制分析与解决方案_经验交流

HTML文档与CSS的关联常见有4种方式: 使用link标记 <link rel="stylesheet" type="text/css" href="sheet.css" /> 使用style元素 <style type="text/css"> body{background:#fff;} h1{font-size:2em;} </style> 使用@import指令 <style 

多浏览器css兼容分析小结_经验交流

CSS 兼容要点:  1. DOCTYPE 影响CSS 处理 . 2 .FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行.  3 .FF: body 设置text-align 时, div 需要设置margin: auto(主要是 margin-left,margin-right) 方可居中.  4 .FF: 设置padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 

推荐彻底弄懂CSS盒子模式(DIV布局快速入门)第1/3页_经验交流

作者:唐国辉 实例网页网址:http://www.hsptc.com/css2.html前言       如果你想尝试一下不用表格来排版网页,而是用CSS来排版你的网页,也就是常听的用DIV来编排你的网页结构,又或者说你想学习网页标准设计,再或者说你的上司要你改变传统的表格排版方式,提高企业竞争力,那么你一定要接触到的一个知识点就是CSS的盒子模式,这就是DIV排版的核心所在,传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容,改用CSS排版后,就是通过由CSS定义的大小不一的盒子和

大家看了就明白了css样式中类class与标识id选择符的区别小结_经验交流

你可以用类选择符class和标识选择符id来定义自己的选择符. 这样做的好处是,依赖于class或者id,你可以不同地表现相同的HTML元素. 在CSS中,类选择符在一个半角英文句点(.)之前,而id则在半角英文井号(#)之前. 看起来像这样: #top { background-color: #ccc; padding: 1em } .intro { color: red; font-weight: bold; }  HTML与CSS的连接用属性id和class.像这样: <div id=&quo

Web2.0下XHTML+CSS 设计需要注意的地方小结_经验交流

注意事项: 1.除选择DOCTYPE之外的语句必须使用小写英文字母书写.其中包括 Macromedia Dreamweaver 生成的鼠标动作,如 OnMouseOver 也必须修改成 onmouseover. 2.XHTML语法规要求所有的标识都必须有开始和结束.例如<body>和</body>.<p>和</p>等,对于不成对的标识,要求在标识最后加一个空格,然后跟一个"/".例如<br>写成<br />.<

DIV+CSS作网页容易犯的错误小结_经验交流

1. 检查HTML元素是否有拼写错误.是否忘记结束标记. 即使是老手也经常会弄错div的嵌套关系.可以用dreamweaver的验证功能检查一下有无错误.  2. 检查CSS是否正确.  检查一下有无拼写错误.是否忘记结尾的 } 等.可以利用CleanCSS来检查 CSS的拼写错误.CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误.  3. 确定错误发生的位置. 如果错误影响了整体布局,则可以逐个删除div块,直到删除某个div块后显示恢复正常,即可确定错误发生的位置.  4. 利用

使用CSS框架布局的缺点和优点小结_经验交流

现在好多网站都用了div+css来布局网页结构,优点是速度快了,可负面影响呢,来看下面的分析前端时间写了一篇<利用CSS框架进行高效率的站点开发>,有不少朋友问我相关的问题.很早5key就在公司进行CSS框架的架构,也对不少朋友提出CSS框架的建议.效果是很明显的.当然,CSS框架有利也有弊,最近也看了一些相关的文章.一些感想,与大家分享.  CSS框架之利:  1.开发效率的提高.          如果你是一个企业建站的前端开发,相信在大部分时间里进行着同类站点的代码工作.定义好的框架可以

css常见问题解决方法小结_经验交流

1. 检查HTML元素是否有拼写错误.是否忘记结束标记  即使是老手也经常会弄错div的嵌套关系.可以用dreamweaver的验证功能检查一下有无错误.  2. 检查CSS是否正确  检查一下有无拼写错误.是否忘记结尾的 } 等.可以利用CleanCSS来检查 CSS的拼写错误.CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误.  3. 确定错误发生的位置  如果错误影响了整体布局,则可以逐个删除div块,直到删除某个div块后显示恢复正常,即可确定错误发生的位置.  4. 利用b

css display:none使用注意事项小结_经验交流

1.如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏,载入页面后,在没有通过js设置样式使元素显示的前提下,使用js代码会无法正确获得该元素的一些属性,比如offSetTop,offSetLeft等,返回的值会为0,通过js设置style.display来使元素显示后才能正确获得这些值. 2.使用display:none隐藏的元素不会被百度等搜索网站检索,会影响到网站的SEO,某些情况下可以使用left:-100000px来达到同样效果. 3.如果是通过样式文件或<s