美文网首页
前端命名

前端命名

作者: 书十一 | 来源:发表于2020-11-24 15:56 被阅读0次

一、HTML文件命名

header.html----头部页面

footer.html------底部页面

userManage.html------------用户管理

特殊作用页面

pop_register.html---------注册弹框

pop_login.html------------登录弹框

pop_video.html-----------视频弹框 

二、CSS文件命名

1.layout.css ----- 布局,版面

2.base.css   ------共用

3.index.css  ------首页

4.其他页面依实际模块需求命名.

关于团队合作常用的CSS命名规范

1)注意事项:

 1、代码一律小写;

 2、尽量用英文;

 3、尽量不加中杠和下划线,如果需要统一使用中杠;

 4、尽量不缩写,除非一看就明白的单词;

    5、不写JS的地方不要加ID,一律用class;

 6、坚持以字母开头命名选择器,这样可保证在所有浏览器下都能兼容。

2)常用的css命名规则

(1)页面结构

  页面外围控制整体布局宽度:wrapp们习惯简写成wrap)

        容器: container

  页头:header

  内容:content/container

  页面主体:main

  页尾:footer

  导航:nav

  侧栏:sidebar 栏目:column

       左右中:left right center

 (2)导航

  导航:nav

  主导航:mainnav

  子导航:subnav

  顶导航:topnav

  边导航:sidebar

  菜单:menu

  子菜单:submenu

        标题: title

        摘要: summary

 (3)功能

  标志:logo

  广告:banner

  登录:login

  登录条:loginbar

  注册:regsiter

     搜索:search

  功能区:shop

  标题:title

  加入:joinus

  状态:status

  按钮:btn

  滚动:scroll

  标签页:tab

  文章列表:list

  提示信息:msg

  当前的: current

  小技巧:tips

  图标: icon

  注释:note

  指南:guide

  服务:service

  热点:hot

     新闻:news

  下载:download

        投票:vote

        合作伙伴:partner

       友情链riendLink

       版权:copyright

      当前:current 

*命名全部使用小写字母,如果、需要多个单词,单词间使用“_”分隔,比如sidebar_list;

3)其他规范:

1、开发过程中严格按分工完成页面, 以提高CSS复用率, 避免重复开发;

2、减小沉冗代码, 书写所有人都可以看的懂的代码. 简洁易懂是一

美德. 为用户着想, 为服务器着想.

三、js文件命名

1.common.js ---公用

2.index.js-------首页

3. 其他依实际模块需求命名.

四、图片命名

1.命名全部用小写英文字母 || 数字 || _ 的组合,其中不得包含汉字 || 空格 || 特殊字符;尽量用易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.gif;

相关文章

  • 前端命名

    一、基础命名页头:header登录条:loginBar标志:logo侧栏:sideBar广告:banner导航:n...

  • 前端命名

    (一 元素的命名 主体头:header内容:content/container尾:footer导航:nav侧栏:s...

  • 前端命名

    一、HTML文件命名 header.html----头部页面 footer.html------底部页面 user...

  • Web前端编码及注释规范

    一、命名规范 Web前端开发中的命名包括,项目命名、目录命名、JS文件命名、CSS文件命名、HTML文件命名等,详...

  • 【译】前端BEM命名方法论之二:BEM中的重要概念

    【译】前端BEM命名方法论之一:BEM 官方简介文档【译】前端BEM命名方法论之三:命名惯例 重要概念 Block...

  • 【译】前端BEM命名方法论之一:BEM 官方简介

    【译】前端BEM命名方法论之二:BEM中的重要概念【译】前端BEM命名方法论之三:命名惯例 Yandex 发明 B...

  • 前端人员必看CSS命名规范

    作为前端的设计人员,对于CSS的接触,就像吃饭一样。所以CSS命名规范命名是前端人员必看的。文章整理了Web前端开...

  • [知识点滴]Div+CSS命名规范大全

    Div+CSS命名规范(前端web开发命名规范)Div+CSS命名规范(一)窗体头:header内容:conten...

  • 前端命名技巧

    命名规范 1.所有命名都使用英文小写推荐: 不推荐: 2.命名用引号包裹推荐: 不推荐: 3.用中横线连接推荐: ...

  • 前端命名规范

    一、文件命名 文件名不得含有空格文件名建议只使用小写字母,不使用大写字母。( 为了醒目,某些说明文件的文件名,可以...

网友评论

      本文标题:前端命名

      本文链接:https://www.haomeiwen.com/subject/riniiktx.html