命名规范

前面的话

  由历史原因及个人习惯引起的 DOM 结构、命名不统一,导致不同成员在维护同一页面时,效率低下,迭代、维护成本极高。所以,使用统一的命名规范非常必要。本文将详细介绍命名规范

 

目录命名

  1、项目文件夹:projectname

  2、样式文件夹:css

  3、脚本文件夹:js

  4、样式类图片文件夹:img

 

图片命名

  图片命名建议以以下顺序命名:

  (m_)图片功能类别(必选) 图片模块名称(可选) 图片精度(可选)

  m_表示是否公共,可选

【图片功能类别】

  icon:模块类固化的图标

  logo:LOGO类

  spr:单页面各种元素合并集合

  btn:按钮

  bg:可平铺或者大背景

  pic :表示当前内容或业务的图片

【图片模块名称】

  goodslist:商品列表

  goodsinfo:商品信息

  userportrait:用户头像

【图片精度】

  普清:@1x

  Retina:@2x | @3x

//公共模块:
m_btn_goodlist@2x.png
m_btn_goodlist.png
//非公共模块:
wx_btn_goodlist@2x.png
wx_btn_goodlist.png
btn_goodlist.png

 

文件命名

  确保文件命名总是以字母开头而不是数字,且字母一律小写,以下划线连接且不带其他标点符号,如

<!-- HTML -->
connect.html
connect_list.html
connect_detail.html
<!-- SASS -->
connect.scss
connect_list.scss
connect_detail.scss

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368861.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

fis pure开发php,50个精品网站鉴赏

50个精品网站鉴赏介绍给大家的是几千个世界优秀网站中的精中之精的作品&#xff0c;都有非常不错的创意&#xff0c;推荐给众多网站的设计人员&#xff0c;好好借鉴一下别人是怎么设计网站的。这些网站主要的制作工具为FLASH&#xff0c;因为它有较好、较强的动态效果&#xff…

js实现一键复制

方法一&#xff1a; 使用插件 引入clipboard.js 使用如下 <script>copyFn function() {var clipboard new Clipboard(.copy-btn, {text: function(trigger) {return $(.copy-txt).text();}});clipboard.on(success, function() {alert(复制成功&#xff01;);});clipbo…

Maven的Spring Security

1.概述 本文将说明如何使用Maven设置Spring Security&#xff0c;并介绍使用Spring Security依赖项的特定用例。 最新的Spring Security版本可以在Maven Central上找到。 这是上一篇有关Maven的Spring的后续文章 &#xff0c;因此对于非安全性Spring依赖项&#xff0c;这是开始…

(转)Babel-现在开始使用 ES6

在 2 月 20 号 ECMAScript 第六版就正式推出了&#xff0c;这门语言一直保持稳定快速的发展而且新功能也在慢慢被现在主流的 JavaScript 引擎所接受。不过要想在浏览器端或者 Node 端直接运行 ES6 代码还得等上一些日子。幸好 TC39 (负责研究开发 EMCAScript 规格的组织) 做了大…

微信公众平台——被动回复用户消息

微信公众平台——被动回复用户消息 开发模式下的回复信息基础接口&#xff0c;可用来向用户回复文本消息、图片消息、语音消息、视频消息、小视频消息、地理位置消息、链接消息。 1、回复文本消息 function ReplyText(Msg: TMessage; MsgText: String): RawByteString; varX: I…

Java EE CDI bean范围

Java EE平台的上下文和依赖注入&#xff08;CDI&#xff09;是一项功能&#xff0c;可帮助将Java EE平台的Web层和事务层绑定在一起。 CDI是一组服务&#xff0c;可以一起使用&#xff0c;使开发人员可以轻松地在Web应用程序中使用企业bean和JavaServer Faces技术。 在CDI中&a…

利用shell脚本进行代码备份和数据库备份

1、实际并不是进行代码备份&#xff0c;而是对上传的附件备份&#xff0c; 毕竟代码在我这边主要是通过svn管控的&#xff0c;不需要进行备份了&#xff0c;但是为了偷懒&#xff0c;还是将整个文件夹直接打包了。 name"your code file name" #你代码文件夹的名称# t…

php强类型 vscode,VSCode + WSL 2 + Ruby环境搭建图文详解

vscode配置ruby开发环境vscode近年来发展迅速&#xff0c;几乎在3年之间就抢占了原来vim、sublime text的很多份额&#xff0c;犹记得在2015-2016年的时候&#xff0c;ruby推荐的开发环境基本上都是vim和sublime text&#xff0c;然而&#xff0c;随着vscode的发展&#xff0c;…

关于网页导航栏制作的几种方法与常见问题解决(新人向)

无序列表是html页面排版经常用到的非常实用的标签&#xff0c;但是新手在使用无序列表时&#xff0c;经常会在横向排版上出现问题&#xff0c;笔者在这里提供了笔者在使用无序列表制作网页导航栏时的几种方法与常见问题的解决问题。&#xff08;以css内部样式为例&#xff09; …

JPA – Querydsl投影

在我的上一篇文章中&#xff1a; JPA –基本投影 –我已经提到了构建JPA投影的两种基本可能性。 这篇文章为您带来了更多示例&#xff0c;这次基于Querydsl框架。 注意&#xff0c;这里我指的是Querydsl版本3.1.1。 重塑构造函数表达式 看下面的代码&#xff1a; ... import …

3n+1问题中的几个小的注意点

3038 3n1问题 时间限制: 1 s空间限制: 32000 KB题目等级 : 白银 Silver题解题目描述 Description3n1问题是一个简单有趣而又没有解决的数学问题。这个问题是由L. Collatz在1937年提出的。克拉兹问题&#xff08;Collatz problem&#xff09;也被叫做hailstone问题、3n1问题、Ha…

Mysql函数访问oracle,Oracle与MySql函数

Oracle:1. 截取字符串中字符前的字符串(不包括字符)select Substr(P.SCHEDULE_CODE, 1, Instr(P.SCHEDULE_CODE, (, 1)-1) from M_SUB_TASK_SCHEDULE_LOG P;2. 截取字符串中字符前的字符串(包括字符)select Substr(P.SCHEDULE_CODE, 1, Instr(P.SCHEDULE_CODE, (ret, 1)) fr…

html 语义化标签拾遗

1、del和ins标签 兼容性&#xff1a;浏览器全部支持 del&#xff1a;定义文档中已被删除的文本。 ins&#xff1a;定义已经被插入文档中的文本。 <!DOCTYPE html><html lang"zh"><head><meta charset"UTF-8" /><title>ht…

Spring MVC表单教程

本教程将展示如何在Spring MVC中处理表单提交。 我们将定义一个控制器来处理页面加载和表单提交。 您可以在GitHub上获取代码。 先决条件&#xff1a; 您应该有一个运行中的Spring MVC应用程序。 如果尚未设置正常的Spring MVC应用程序&#xff0c;请按照本教程进行操作 。 对…

一个跳转提示页面---JS

//一个跳转提示页面 <script type"text/javascript"> var s5; function go(){ document.getElementById("chan").innerHTMLs; ss-1; if (s0){ window.location.href"http://www.imooc.com/"; …

理解Flexbox弹性盒子

http://www.w3cplus.com/css3/understanding-flexbox-everything-you-need-to-know.html参考文档 1&#xff1a;要开始使用Flexbox&#xff0c;必须先让父元素变成一个Flex容器。 你可以在父元素中显式的设置 display:flex或者 display:inline-flex。就这么的简单&#xff0c…

php安装dat,PHP Parsing a .dat file

问题I have a .dat file that is essentially ; delimited file and Im trying to convert it to a tab delimited .txt. The problem that I am not sure about is that each row of the new file will be a combination of 3 of the original files rows, each original row …

[转]Bing Maps Tile System 学习

原文链接&#xff1a;Bing Maps Tile System 学习 转载于:https://www.cnblogs.com/rainbow70626/p/8992322.html

Spring休眠3

1.概述 本文将重点介绍通过Spring设置Hibernate 3 –我们将研究如何同时使用XML和Java配置通过Hibernate 3和MySQL设置Spring 3。 2. Hibernate 3的Java Spring配置 使用Spring和Java配置来设置Hibernate 3很简单&#xff1a; import java.util.Properties; import javax.sql…

我们十组的cantool装置的使用

十组的cantool装置的使用 下图是连接好的示意图&#xff0c;灯亮。 如果在串口关闭的时候输入C&#xff0c;cantool装置就会报错&#xff0c;因为串口是关闭的。正如需求文档里写的&#xff0c;当串口关闭&#xff0c;输入C要有返回\BEL的,关闭串口的前提是串口打开。 正确发送…