CSS书写顺序:

  1. 位置属性(position, top, right, z-index,display, float等)  
  2. 大小(width, height, padding, margin)  
  3. 文字系列(font, line-height, letter-spacing,color- text-align等)  
  4. 背景(background, border等)  
  5. 其他(animation, transition等)

CSS命名规范(规则)常用的CSS命名规则

  • 头:header  
  • 内容:content/container  
  • 尾:footer  
  • 导航:nav  
  • 侧栏:sidebar  
  • 栏目:column  
  • 页面外围控制整体佈局宽度:wrapper  
  • 左右中:left right center  
  • 登录条:loginbar  
  • 标志:logo  
  • 广告:banner  
  • 页面主体:main  
  • 热点:hot  
  • 新闻:news  
  • 下载:download  
  • 子导航:subnav  
  • 菜单:menu  
  • 子菜单:submenu  
  • 搜索:search  
  • 友情链接:friendlink  
  • 页脚:footer  
  • 版权:copyright  
  • 滚动:scroll  
  • 内容:content  
  • 标签:tags  
  • 文章列表:list  
  • 提示信息:msg  
  • 小技巧:tips  
  • 栏目标题:title  
  • 加入:joinus  
  • 指南:guide  
  • 服务:service  
  • 注册:regsiter  
  • 状态:status  
  • 投票:vote  
  • 合作伙伴:partner

注释的写法:

/* Header */  
内容区  
/* End Header */

Id的命名:

  1. 页面结构  

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

    • 导航:nav  
    • 主导航:mainnav  
    • 子导航:subnav  
    • 顶导航:topnav  
    • 边导航:sidebar  
    • 左导航:leftsidebar  
    • 右导航:rightsidebar  
    • 菜单:menu  
    • 子菜单:submenu  
    • 标题: title  
    • 摘要: summary
  3. 功能  

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

注意事项::

  1. 一律小写;  
  2. 尽量用英文;  
  3. 不加中槓和下划线;  
  4. 尽量不缩写,除非一看就明白的单词。

CSS样式表文件命名

  • 主要的:master.css  
  • 模块:module.css  
  • 基本共用:base.css  
  • 布局、版面:layout.css  
  • 主题:themes.css  
  • 专栏:columns.css  
  • 文字:font.css  
  • 表单:forms.css  
  • 补丁:mend.css  
  • 打印:print.css

CSS 命名规则的更多相关文章

  1. 常用的css命名规则:

    关于团队合作的css命名规范 常用的css命名规则: 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制 ...

  2. 【转】常用css命名规则

    常用的css命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左 ...

  3. 一些CSS命名规则

    一些CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中 ...

  4. CSS命名规则常用的css命名规则

    CSS命名规则常用的css命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wr ...

  5. [转] 常用的CSS命名规则

    (一)常用的CSS命名规则  头:header  内容:content/container  尾:footer  导航:nav  侧栏:sidebar  栏目:column  页面外围控制整体布局宽度 ...

  6. CSS命名规范(规则)常用的CSS命名规则

    CSS命名规范(规则)常用的CSS命名规则   CSS命名规范(规则)常用的CSS命名规则   头:header   内容:content/container   尾:footer ...

  7. CSS命名规则和如何命名

    CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:l ...

  8. div+css命名规则

    作为一个前端菜鸟,进公司的第一个项目就是中途从外包公司接过来的公司网站,在别人写过了的基础上接着写,命名什么的,简直不要太痛苦. 目前,这个网站已经完成,但是被后台人员指出命名不规范.有心想解释一两句 ...

  9. 网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容如下:

    页头:header  如:#header{属性:属性值;}或.header{属性:属性值;},也许你需要了解class与id区别及用法登录条:loginBar         标志:logo      ...

随机推荐

  1. Spring4.0学习笔记(12) —— JDBCTemplate 操作数据库

    整体配置 1.配置xml文件 <beans:beans xmlns="http://www.springframework.org/schema/mvc" xmlns:xsi ...

  2. text-overflow:ellipsis 的应用(转载)

    关键字: text-overflow:ellipsis 语法:text-overflow : clip | ellipsis 取值: clip :默认值 .不显示省略标记(...),而是简单的裁切. ...

  3. [转]JS继承的5种实现方式

    参考链接: http://yahaitt.iteye.com/blog/250338 虽说书上都讲过继承的方式方法,但这些东西每看一遍都多少有点新收获,所以单独拿出来放着. 1. 对象冒充 funct ...

  4. phalcon的一些中文手册和帮助文档地址收集

    1:中文官方网站:http://phalconphp.com/zh/ 挺好可以好好看文档 可安装http://bullsoft.org/phalcon-docs/这个去查找,这是个部分中文的手册! P ...

  5. DNS递归和迭代原理

    11.3.7 DNS递归解析原理 “递归解析”(或叫“递归查询”,其实意思是一样的)是最常见,也是默认的解析方式.在这种解析方式中,如果客户端配置的本地名称服务器不能解析的话,则后面的查询全由本地名称 ...

  6. modern web application

    http://www.codeproject.com/Reference/597538/Modern-Web-Development http://www.west-wind.com/presenta ...

  7. Windows系统编程之进程间通信

    Windows系统编程之进程间通信作者:北极星2003来源:看雪论坛(www.pediy.com)Windows 的IPC(进程间通信)机制主要是异步管道和命名管道.(至于其他的IPC方式,例如内存映 ...

  8. VS2013下的Nmake编译链接成win XP的可执行程序

    nmake下没有指定toolset=vc120_xp等类似物.但是,可以指定Link.exe的链接参数,指定子系统就可以了,/SUBSYSTEM:[WINDOWS | CONSOLE],5.01 5. ...

  9. 【HDOJ】1474 Always On the Run

    普通DP.基本和floyd一个思路. /* 1474 */ #include <cstdio> #include <cstring> #include <cstdlib& ...

  10. Linux&shell之结构化命令

    写在前面:案例.常用.归类.解释说明.(By Jim)使用if-then语句如果命令的退出状态是0(成功执行命令),将执行then后面的所有命令.如果命令的退出状态是0以外的其他值,那么then后面的 ...