CSS编写规范的相关建议

   避免过度约束

  作为一般规则,不添加不必要的约束。

  CSS Code复制内容到剪贴板

  // 糟糕

  ul#someid {..}

  .menu#otherid{..}

  // 好的

  #someid {..}

  #otherid {..}

  后代选择符最烂

  不仅性能低下而且代码很脆弱,html代码和css代码严重耦合,html代码结构发生变化时,CSS也得修改,这是多么糟糕,特别是在大公司里,写html和css的往往不是同一个人。

  CSS Code复制内容到剪贴板

  // 烂透了

  html div tr td {..}

  尽可能使用复合语法

  CSS Code复制内容到剪贴板

  // 糟糕

  .someclass {

  padding-top: 20px;

  padding-bottom: 20px;

  padding-left: 10px;

  padding-right: 10px;

  background: #000;

  background-image: url(../imgs/carrot.png);

  background-position: bottombottom;

  background-repeat: repeat-x;

  }

  // 好的

  .someclass {

  padding: 20px 10px 20px 10px;

  background: #000 url(../imgs/carrot.png) repeat-x bottombottom;

  }

  避免不必要的重复

  CSS Code复制内容到剪贴板

  // 糟糕

  .someclass {

  color: red;

  background: blue;

  font-size: 15px;

  }

  .otherclass {

  color: red;

  background: blue;

  font-size: 15px;

  }

  // 好的

  .someclass, .otherclass {

  color: red;

  background: blue;

  font-size: 15px;

  }

  组织好的代码格式

  代码的易读性和易维护性成正比。下面是我遵循的格式化方法。

  CSS Code复制内容到剪贴板

  // 糟糕

  .someclass-a, .someclass-b, .someclass-c, .someclass-d {

  ...

  }

  // 好的

  .someclass-a,

  .someclass-b,

  .someclass-c,

  .someclass-d {

  ...

  }

  // 好的做法

  .someclass {

  background-image:

  linear-gradient(#000, #ccc),

  linear-gradient(#ccc, #ddd);

  box-shadow:

  2px 2px 2px #000,

  1px 4px 1px 1px #ddd inset;

  }

时间: 2024-10-29 17:26:26

CSS编写规范的相关建议的相关文章

CSS编写指导规范和建议

CSS编写指导规范和建议 在参与规模庞大.历时漫长且参与人数众多的项目时,所有开发者遵守如下规则极为重要: 保持 CSS 易于维护 保持代码清晰易懂 保持 CSS 的可拓展性 为了实现这一目标,我们要采用诸多方法. 本文档第一部分将探讨语法.格式以及分析 CSS 结构:第二部分将围绕方法论.思维框架以及编写与规划 CSS 的看法. CSS 文档分析 无论编写什么文档,我们都应当维持统一的风格,包括统一的注释.统一的语法与统一的命名规范. 总则 将行宽控制在 80 字节以下.渐变(gradient

编写现代CSS代码的20个建议

明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较大值会被保留下来,可以从下面这个简单的例子来学习: .square {         width: 80px;         height: 80px;     }       .red {         background-color: #F44336;         margin-bo

简明HTML CSS开发规范

css|规范|开发规范 //总论 本规范既是一个开发规范,也是一个脚本语言参考,本规范并不是一个一成不变的必须严格遵守的条文,特殊情况下要灵活运用,做一定的变通.但是,请大家千万不要随意更改规范.如果有任何问题,请及时与我联系,我会及时更改本规范的相关代码样例和文档. /基 本 要 求 1. 在网站根目录中开设images common temp 三个子目录,根据需要再开设media 子目录,images目录中放不同栏目的页面都要用到的公共图片,例如公司的标志.banner 条.菜单.按钮等等:

简明 HTML CSS 开发规范

css|规范|开发规范 //总论 本规范既是一个开发规范,也是一个脚本语言参考,本规范并不是一个一成不变的必须严格遵守的条文,特殊情况下要灵活运用,做一定的变通.但是,请大家千万不要随意更改规范.如果有任何问题,请及时与我联系,我会及时更改本规范的相关代码样例和文档. /基 本 要 求 1. 在网站根目录中开设images common temp 三个子目录,根据需要再开设media 子目录,images目录中放不同栏目的页面都要用到的公共图片,例如公司的标志.banner 条.菜单.按钮等等:

JavaScript脚本编写规范

对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编码规范也往往被轻视,开发过程中修修补补,最终也就演变成为后续维护人员的恶梦.软件存在的长期价值直接与编码的质量成比例.编码规范能帮助我们降低编程中不必要的麻烦.而 JavaScript 代码是直接发送给客户浏览器的,直接与客户见面,编码的质量更应该受到关注.  本文浅谈 JavaScript 编程中

J2EE项目代码编写规范分享_java

码编写规范目的:能够在编码过程中实现规范化,为以后的程序开发中养成良好的行为习惯. 代码编写规范使用范围:J2EE项目开发. 包命名规范: 目的:包的命名规范应当体现出项目资源良好的划分 servlet类所在包命名规范:公司名称.开发组名称.项目名称.web.servlet 例如:net.linkcn.web.servlet 自定义标签类所在包命名规范:公司名称.开发组名称.项目名称.web.tags 例如:net.linkcn.web.tags 过滤器类所在包命名规范:公司名称.开发组名称.项

让你提前认识软件开发(28):数据库存储过程中的重要表信息的保存及相关建议

第2部分 数据库SQL语言 数据库存储过程中的重要表信息的保存及相关建议   1. 存储过程中的重要表信息的保存         在很多存储过程中,会涉及到对表数据的更新.插入或删除等,为了防止修改之后的表数据出现问题,同时方便追踪问题,一般会为一些重要的表建立一个对应的debug表.这个debug表中的字段要包括原表的所有字段,同时要增加操作时间.操作码和操作描述等字段信息.         例如,在某项目中,包括了如下一个重要的表tb_XXX: create table tb_XXX (  

CSS网页制作教程:CSS书写规范和书写顺序

文章简介:大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里我总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总结出来,我想对写CSS的前端用户来说是值得学习的. 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里我总结一个CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总结出来,我想对写CSS的前端用户来说是值得学习的. CSS书写顺

网页制作教程:CSS 命名规范

css|规范|教程|网页 XHTML-CSS写作建议 所有的xhtml代码小写 属性的值一定要用双引号("")括起来,且一定要有值 每个标签都要有开始和结束,且要有正确的层次 空元素要有结束的tag或于开始的tag后加上"/" 表现与结构完全分离,代码中不涉及任何的表现元素,如style.font.bgColor.border等 <h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询. 给每一个表格和表单加上一