ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

2022-07-16 22:04:03  阅读:200  来源: 互联网

标签:style right bottom color top JavaScript HTML 命名 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.....

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

标签:style,right,bottom,color,top,JavaScript,HTML,命名,CSS
来源: https://www.cnblogs.com/zzxCode/p/16485363.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有