手记

HTML和CSS、JavaScript规范 第二部分(CSS部分)

  • 2.1 规范
    1)样式类名全部用小写,首字符必须是字母,禁止数字或其他特殊字符。由以字母开头的小写字母(a–z)、数字(0–9)、下划线(_)组成。
    2)可以是单个单词,也可以是组合单词,要求能够描述清楚模块和元素的含义,使其具有语义化。避免使用123456…red,blue,left,right之类的(如颜色、字号大小等)矢量命名。
    3)尽量用单个单词简单描述class名称。
    4)双单词或多单词组合方式:形容词_名词、命名空间_名次、命名空间_形容词_名词。
  • 2.2Class和ID的使用方法
    把id留给后台开发和JS使用,除此之外页面的page id(如首页的外层需要一个ID id=“page_index”),页面结构(header main footer)允许用id命名。其他禁止id使用在样式表CSS命名中,一律使用class命名。
  • 2.3命名空间
    在编码思想上,我们可以将页面拆分成不同的层级(布局、模块、元件)。
  • 2.4添加文档样式
    1)引用外部文件方式添加样式
    2)严禁编写标记内代码,比如
    就应该写成
    ,然后在样式表中去完成样式代码编写。
    3)严禁在文档中使用代码块
    4)分割样式表,降低代码复杂性,方便管理和维护。但不分割的太细碎,应考虑以后的维护和管理。
  • 2.5属性简写
    为了节省字节数及文件大小,以下属性请使用简写方式:
    padding :top right bottom left; margin : top right bottom right;
    border : style width color; border-top :style width color;
    Border-bottom :style width color; Border-left :style width color;
    Border-color :top right bottom left; Border-style :top right bottom left;
    Border-width :top right bottom left; Background :color url(image)repeat posotion;
    List-style :type position url(image); Font-weight:400/700;
  • 2.6缩写16进制色值
    Color和background-color的属性值如果使用的是16进制色值,当6个数字两两相等时,使用缩写方式编写。如:#996600缩写成#960
  • 2.7字体
    1)全局定义字体:body{font:12px arial,helvetica,sans-serif;line-height:1.5;}
    2)font-family:
    A)等宽字体组合:Arial,Helvetica,sans-serif;
    B)不等宽(宽扁)字体组合:Verdana,Trebuchet MS,sans-serif;
    C)中文字体:除非内容文本需要,不推荐强制定义
  • 2.8页面采用固定流式布局,使用像素(px)固定元素尺寸。
  • 2.9添加必须的注释
    可根据全局、布局、区块、功能等进行分类和添加注释,方便维护和代码搜索。
  • 2.10CSS通用命名
    (1)页面框架命名,一般具有唯一性,推荐用ID命名
    (2)模块结构命名
    (3)导航结构命名
    (4)一般元素命名
  • 2.11.图片命名
    1)背景图片:bg001,bg002,bg003…
    2)一般图片:img001,img002,img003…
    3)特定图片:如banner,logo按照具体情况命名
    4)按钮图片:btn_submit,btn_cancel…
0人推荐
随时随地看视频
慕课网APP