[前端] 命名规规范

个人在项目中经常使用的命名规范，在这里分享下。

js命名 (采用的是小驼峰命名法 —— 类型在前 名字在后 )        

    1、定义变量（类型首字母作为前缀） 小驼峰命名法 

    string sHello = '中华人民共和国'  

    int            iCount = 10  

    array        aList = []  

    object      oDate = new Date

    float         fCount = 1.22  

    null          dat = null ( 空类型 默认没有前缀 )

    boolean   bFlag = true

    element   eDiv = document.getElementById('tag')

    node        nDiv = $('#div')

    2、function say() {    // 默认表示函数

        alert('这是一个函数')

    }

    function cSay() {  // 表示类

        this.name = '张三'

    }

class、id命名

class采用"-"为分隔命名，如：header-top  

id采用小驼峰命名法，如：headerTop

html 标签属性顺序

    class

    id name

    type src href for

    title alt

    data-* aria-* role 

css样式顺序 (盒模型-字体)

    display: box;                        // 盒模型或是否显示

    position: absolute;         // 定位

    left: 0;

    top: 0;

    z-index: 9;

    float: left;                             // 浮动

    width: 100px;

    height: 100px;

    border: 1px solid #red;      // 先有轮廓后有背景填充

    border-radius: 5px;

    background: green;

    font-family: '宋体';              // 字体基本样式

    font-size: 14px;

    color: black;

    font-weight: normal;

    text-align: center;         // 对齐方式

    vertical-align: middle;  

    white-space: nowrap;        // 段落处理

    word-space: 5px;

    overflow: hidden;           // 超出处理

项目目录结构  

config

common

    function.php

controller

model

view

upload

    image

    doc

    sql

static

    js

        jquery.min.js

        html-shiv5.js

        plugin

            bdmap

                bdmap.js

                bdmap.css

        module

            index

                index.js

            artilce

                article.js

    css

        common.css

        module

            index

                index.css

            article

                article.css

    image(可以不分组)

        body-bg.jpg

        module

            index

                bg.jpg

            article

                bg.jpg

图片命名( 先类型，后命名 )

    背景图片

    bg-body    表示这张图片是背景图片

    bg-nav

    bg-banner

    bg-title

    引用图片

    img-body   表示这个图片是在页面中引用的

    img-demo1.jpg

    img-demo2.jpg

    img-demo3.jpg

    图标

    icon-user  表示这个图片用作图标

    图片组

    bg-group1.png

    bg-group2.png

本文章主在分享，希望对你有用！thanks 

谢谢关注！