前端:规范1

在读了些的前端规范后,觉得有必要自我做下笔记。毕竟大神的代码简洁优雅,高效都有一定的规范化在里面的。以下选取了自认为有用的规范。

一、基本

1.关注点分离

基于前端的特殊性,一般要求结构(HTML)、样式(css)、行为(javascript)分离。
现在三大框架基本上都是这么做的,了解就好。

2.指定编码

在 HTML中指定编码 即添加


3.html标签一律用小写



4.外连接省略协议



注:其它协议(ftp 等)的 URL 不省略

二、html规范

1.对于标签

(1) 尽量用少的标签实现功能 ,原因:标签太多会导致你代码冗余,多写样式,js控制难度上升
(2) 可选闭合标签 。如div、li、ul 、p等标签

  • 对于自闭和标签,如 img input hr br等
    个人建议加上

    
     
    
    

    原因:如果可选闭合标签不闭合的话,在大型项目中,易丢失标签,查找bug是十分耗时耗力的,并且在三大框架中这类标签不闭合会报错的。

    2.class和id

    (1)class 应以功能或内容命名,不以表现形式命名 如:布局时的方向

    (ps:当然这种命名十分简单,而且快捷,但一旦要从新布局将原有的布局打乱就显得很无所适从)
    应该以功能或内容命名,如:这个div标签要包含一个导航栏

    
    
    

    (2)class 与 id 单词字母小写,多个单词组成时,采用中划线-分隔
    (3)使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class

    3.属性顺序

    id>class>name>data-XXX>src,for,type,href>title、alt>aria-xxx、role

    4.引号

    属性定义,统一用双引号,即

    
    

    5嵌套

    严格嵌套约束是在所有浏览器下必须的规范,否者报错,语义嵌套类似约定俗成

    1.语义嵌套约束

    • 用于
        或者
        1. 用于
        2. 、、、、用于下

          2.严格嵌套约束

          -inline-level元素,仅可包含文本以及其他inline-level元素
          -标签里不可以嵌套交互式元素如

          未完待续.........
          参考:
          W3Cschool前端开发规范
          2018前端开发规范
          Google HTML/CSS代码规范指南

          你可能感兴趣的:(前端:规范1)