前端开发命名规范

1.HTML文件命名

1. 小写命名
2. 首页一般为index.html或者home.html(一般用index.html)
3. 优先用英文,英文太长可用拼音简写
4. 团队开发应该统一命名规则
5. 尽量不要使用驼峰命名(驼峰命名语义性不高,html文件一般不分大小写,大小写切换有点麻烦,'-'连字符可以更好的表现出层次感)   *建议JavaScript使用驼峰,html和css使用'-'连字符
6. 不要中英混用

2.ID/Class命名

<div class="container">
    <div class="left-content">
        <div class="left-container-logo"><img class="logo-img" src="logo.jpg" alt=""></div>
        <div class="left-container-text"><p class="text-intr">介绍信息</p></div>
    </div>
    <div class="right-container">
        <div class="right-container-table">
            <table class="table-info">
                <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                </tr>
                >
                </thead>
                <tbody>
                <tr>
                    <td>前端开发</td>
                    <td>男</td>
                    <td>23岁</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="right-container-form">
            <form action="" class="form-info">
                <lable>姓名:</lable>
                <input type="text" class="info-name">
                <lable>性别</lable>
                <input type="radio" name="sex" class="info-sex" vlaue="男">男
                <input type="radio" name="sex" class="info-sex" value="女">女
                <lable>年龄</lable>
                <input type="text" class="info-age">23
            </form>
        </div>
    </div>
</div>

1. 小写命名
2. 模块_元素_修饰符 

3.js命名

1. 变量与函数使用驼峰命名法则    如:getInfo、propertyName
2. 私有变量     _propertyName
3. 文件名使用小写英文
4. 公共js使用common.js

4.图片命名

1. 主体-具体        logo-img(logo图标)、logo-text(logo文字)

5.常用的命名英文

1. 页面结构　　

   容器:container

   页头：header

   内容：content/container 

   页面主体：main

   页尾：footer

   导航：nav 

   侧栏：sidebar

   栏目：column

2. 导航　　

   导航：nav

   菜单：menu

   子菜单：submenu 

   标题: title

3. 功能　　

   标志：logo

   广告：banner

   登陆：login

   注册：regsiter

   搜索：search

   标题：title

   按钮：btn 

   滚动：scroll

   标签页：tab

   文章列表：list

   提示信息：msg 

   小技巧：tips

   注释：note 

   友情链接：link

   版权：copyright

第一次写博客,纯属个人记录学习,有参照别人的博客,也有自己的想法

目前就想到那么多(更多内容在今后的工作中记录与补充...)