关于前端:HTML和CSSJavaScript规范-第一部分CSS部分

3次阅读

共计 1550 个字符,预计需要花费 4 分钟才能阅读完成。

  • 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)严禁编写标记内代码,比方 <div style=”display:none;”> 就应该写成 <div class=”hide”>, 而后在样式表中去实现款式代码编写。
    3)严禁在文档中应用 <style type=”text/css”></style> 代码块
    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…..

    本文由博客一文多发平台 OpenWrite 公布!

正文完
 0