Detailed introduction to html naming conventions

Previous words

Due to historical reasons and personal habits, the DOM structure and naming are not uniform, resulting in low efficiency when different members maintain the same page, and extremely high iteration and maintenance costs. Therefore, it is very necessary to use unified naming conventions. This article will introduce the naming convention in detail

Directory naming

1. Project folder: projectname

2. Style folder: css

3. Script folder: js

4. Style image folder: img

Picture naming

It is recommended to name pictures in the following order Naming:

　(m_) Picture function category (required) + picture module name (optional) + picture precision (optional)

　m_ indicates whether it is public, optional

[Picture function category]

icon: module type solidified icon

logo: LOGO type

spr: a combined collection of various elements on a single page

btn: button

bg: tileable or large background

pic: picture representing the current content or business

[Picture module name]

Goodslist: Product list

Goodsinfo: Product information

Userportrait: User avatar

[Picture accuracy]

General clear: @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

File naming

Make sure the file name always starts with a letter and not a number, and the letter Always lowercase, connected by underscores and without other punctuation marks, such as

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

The above is the detailed content of Detailed introduction to html naming conventions. For more information, please follow other related articles on the PHP Chinese website!