zoukankan      html  css  js  c++  java
  • css命名规范

     头部注释

    /*
    * @description: 中文说明
    * @author: name
    * @update: name (2013-04-13 18:32)
    */

    首尾注释

    /* Footer */ 
    内容区 
    /* End Footer */ 

    注意事项 

    1、一律采用小写加中划线的方式,不允许使用大写字母或 _
    2、尽量用英文
    3、id唯一
    4、规则名称中不应该包含颜色(red/blue)、定位(left/right)等与具体显示效果相关的信息。应该用意义命名,而不是样式显示结果命名。
    5、不允许通过1、2、3等序号进行命名
    6、使用单引号,不允许使用双引号;
    7、每个声明结束都应该带一个分号,不管是不是最后一个声明;
    8、除16进制颜色和字体设置外,CSS文件中的所有的代码都应该小写;
    9、除了重置浏览器默认样式外,禁止直接为html tag添加css样式设置;
    10、每一条规则应该确保选择器唯一,禁止直接为全局.nav/.header/.body等类设置属性;

    11、每一条规则的大括号 { 前添加空格;
    12、每一条规则结束的大括号 } 必须与规则选择器的第一个字符对齐 ;
    13、属性名冒号之前不加空格,冒号之后加空格;
    14、属性值之后添加分号;

    属性编写顺序:

    显示属性:display/list-style/position/float/clear …
    自身属性(盒模型):width/height/margin/padding/border
    背景:background
    行高:line-height
    文本属性:color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…
    其他:cursor/z-index/zoom/overflow
    CSS3属性:transform/transition/animation/box-shadow/border-radius
    如果使用CSS3的属性,如果有必要加入浏览器前缀,则按照 -webkit- / -moz- / -ms- / -o- / std的顺序进行添加,标准属性写在最后。
    链接的样式请严格按照如下顺序添加: a:link -> a:visited -> a:hover -> a:active

    性能优化:

    合并margin、padding、border的-left/-top/-right/-bottom的设置,尽量使用短名称。
    选择器应该在满足功能的基础上尽量简短,减少选择器嵌套,查询消耗。但是一定要避免覆盖全局样式设置。
    注意选择器的性能,不要使用低性能的选择器。
    禁止在css中使用*选择符。
    除非必须,否则,一般有class或id的,不需要再写上元素对应的tag。
    0后面不需要单位,比如0px可以省略成0,0.8px可以省略成.8px。
    如果是16进制表示颜色,则颜色取值应该大写。
    如果可以,颜色尽量用三位字符表示,例如#AABBCC写成#ABC 。
    如果没有边框时,不要写成border:0,应该写成border:none 。
    尽量避免使用AlphaImageLoader 。
    在保持代码解耦的前提下,尽量合并重复的样式。
    background、font等可以缩写的属性,尽量使用缩写形式 。

    常用命名:

    容器: container
    页头:header
    内容:content/container
    页面主体:main
    页尾:footer
    导航:nav
    侧栏:sidebar
    栏目:column
    页面外围控制整体布局宽度:wrapper
    左右中:left right center

    导航:nav
    主导航:mainbav
    子导航:subnav
    顶导航:topnav
    边导航:sidebar
    左导航:leftsidebar
    右导航:rightsidebar
    菜单:menu
    子菜单:submenu
    标题: title
    摘要: summary

    标志:logo
    广告:banner
    登陆:login
    登录条:loginbar
    注册:regsiter
    搜索:search
    功能区:shop
    标题:title
    加入:joinus
    状态:status
    按钮:btn
    滚动:scroll
    标签页:tab
    文章列表:list
    提示信息:msg
    当前的: current
    小技巧:tips
    图标: icon
    注释:note
    指南:guild
    服务:service
    热点:hot
    新闻:news
    下载:download
    投票:vote
    合作伙伴:partner
    友情链接:link
    版权:copyright

     

  • 相关阅读:
    2 爬虫 requests模块
    http协议
    JAVA提高篇
    Java三大特性(封装、继承、多态)
    JavaScript对json对象数组排序(按照某个属性升降序排列)
    js中的闭包
    Java WebService 简单实例
    Quartz 入门详解
    web弹框/层 (layer )的使用
    Shiro
  • 原文地址:https://www.cnblogs.com/tinyphp/p/3654845.html
Copyright © 2011-2022 走看看