《css命名3》由会员分享，可在线阅读，更多相关《css命名3（7页珍藏版）》请在金锄头文库上搜索。
1、CSS命名3CSS命名3 2011年06月22日CSS命名规则 头：header 内容：content/containe 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot 新闻：news 下载：download 子导航：subnav 菜单：menu 子菜单：submenu 搜索：search 友情链接：friendlink 页脚：footer 版权：copyright 滚动：scroll 内
2、容：content 标签页：tab 文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guild 服务：service 注册：regsiter 状态：status 投票：vote 合作伙伴：partner XHTML 文件中id的命名 (1)页面结构 容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center (2)导航 导航：na
3、v 主导航：mainbav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 标题: title 摘要: summary (3)功能 标志：logo 广告：banner 登陆：login 登录条：loginbar 注册：regsiter 搜索：search 功能区：shop 标题：title 加入：joinus 状态：status 按钮：btn 滚动：scroll 标签页：tab 文章列表：list 提示信息：msg 当前的: current 小技巧：tips 图标: i
4、con 注释：note 指南：guild 服务：service 热点：hot 新闻：news 下载：download 投票：vote 合作伙伴：partner 友情链接：link 版权：copyright XHTML文件中class的命名 (1)颜色:使用颜色的名称或者16进制代码,如(不建议以表现来命名) .red color: red; .f60 color: #f60; .ff8600 color: #ff8600; (2)字体大小,直接使用font+字体大小作为名称,如 .font12px font-size: 12px; .font9pt font-size: 9pt; (3)对齐样
5、式,使用对齐目标的英文名称,如 .left float:left; .bottom float:bottom; (4)标题栏样式,使用类别+功能的方式命名,如 .barnews .barproduct 其它相关注意事项 1.一律小写; 2.尽量用英文; 3.不加中杠和下划线; 4.尽量不缩写，除非一看就明白的单词. 主要的master.css 模块module.css 基本共用base.css 布局，版面layout.css 主题themes.css 专栏columns.css 文字font.css 表单forms.css 补丁mend.css 打印print.css 一、关于注释 在创建xh
6、tml+CSS网站时，CSS中的注释非常重要。在创建CSS样式时，应当保持随手注释的习惯。一般的，我习惯于使用/*注释内容*/的格式来写注释，因为在EditPlus等具有高亮功能的编辑器里，使用C语言中常用的“/*/”之类的注释是无意义的，没有必要填充大量无意义内容作为分隔。带有注释的文档作为网站的原始CSS文档，在发布网站的时候，可以使用CSS压缩工具压缩CSS，在输出的CSS中去掉注释以提高文件传输效率。 二、关于命名 在给CSS文件命名的时候，我比较喜欢使用符合语义的英文名或者缩写命名，在非常用部分也许会用部分拼音命名。另外，在某些有从属关系的class里，我可能会使用类似“list_b
7、anner”之类的命名，即父元素名加上“_”再加上元素名。关于命名，可以根据团队设计师的习惯进行协商。但最好在命名之后加上注释，以便将来生成文档备查。 三、关于继承性 在CSS中，要善用继承性。比如在两个嵌套的div中，父元素定义了background-color属性为黑色，如果子元素的背景同为黑色，则不需重复定义。善于利用CSS的继承性可以让代码更有效、更精简。 四、关于CSS定义的层次 在定义CSS中的class时，建议使用层次分明的方式来描述语句。 示例结构： 示例CSS： #menu . #menu .menulist . #menu .menulist .selectit . 在上例
8、中，从最终效果来看，#menu没有必要重复出现，但是实际上如果能够在前面加上#menu，将会让文档的层次更加明了，更利于阅读 五、关于样式排序 在设计CSS样式表时，我们大多是手写代码，这样很容易造成class中的样式排序混乱。比如有几个class中用到了padding、margin、background、color等样式，但是排序的时候，有的class是background比较靠前，有的是margin比较靠前。这样就造成了一定的混乱，容易让思路受挫。我建议个人或者团队的设计师协定一个大致顺序，这样从个别来说看不出太大差别，但从整体上将更加易于阅读和管理，整体效率会提高不少。比如，我默认将wi
9、dth、height和padding、margin、border等放在较靠前的位置，background其次，然后是控制文本的font、color、text-align等，接着是某些特殊标签才能用到的元素，像list-style等，最后是css滤镜。当遇到特殊情况时（比如CSS某些属性的优先级需要定义）可以灵活处理。 CSS网页布局经验：富有语义地类class和id标记命名 您应该明白为什么我会说到这个，选择合适的、有意义的元素去描述你的内容，确保您所选择的是富有语义的类class和id特征值。做正确的事情会使你的生活变得容易很多，如果你是某个团队的一分子，对团队其他成员来说也是如此。看一下下
10、面的这条规则： .l13k color: #369; 你可能立即知道这个类选择符是为左侧边栏的显示蓝色区块而创建的，这时它就正确的表达了一定的语义。正如我在上面提到的，一旦要你在在一周内要重新设计，但是在重构过程中，这个区块需要定位到右边，颜色变为红色，类的特征值就没有任何意义。所以你现在需要改变你所有的特征值，要不就什么都不改变，不过这样可能或导致重重的困惑。 因此解决上面问题的最好方法就是在类特征值的命名中避免使用颜色(包括颜色名称和十六进制值)或者宽度、高度的尺寸值；同时你也尽量的避免去使用任何表明表现形式的值，例如box、left、right。反之，将表现和内容分离的意义也就不复存在了。 最后，我们看一下最合适的命名规则： .product-description color: #369;
