要想成为前端大神,那些你不得不知晓的web前端命名规范。
一、Web语义化
1.1 H5的语义化
对于经验资深的前端er,在给web布局时,相信都会很注重标签和命名的规范。尤其是随着html5的普及发展,更是把web前端语义化推向一个新的台阶上。比如html5给我们新增的语义标签:header、nav、main、aside、footer、section、article等等。那么对于web语义化,有什么优势呢?
1.2 语义化优势
可以让人一目了然代码结构块,对于项目的维护或者优化都是非常有意义的。
语义化能提高页面SEO。如:
<header></header>
可以很好的代替传统的<div id="header"></div>
。
1.3 语义化使用规则
- 标签语义化,如在合适的地方用合适的语义化标签,如头部可用
<header>
、尾部可用<footer>
; - 命名语义化,包括html的id和class的命名,javascript相关命名;如#header{}、.footer{}、等。
二、命名规范
2.1 常见的命名参考规范
在开发的时候,经常会因为元素命名而头疼,无论是CSS样式命名还是现在很经常接触到的自定义组件命名. 下面整理一些常用的命名参考规范:
头部:header
内容:content/container
尾部:footer
导航:nav
侧栏:sidebar
栏目:column
整体布局:wrapper
左右中:left / right / center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:join
指南:guild
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner
...
2.2 id的命名规范
页面结构类
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
导航类
导航:nav
主导航:mainnav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
标题: title
摘要: summary
功能类
标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:regsiter
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright
2.3 class/css的命名
- 颜色:使用颜色的名称或者16进制代码,如:
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
- 字体大小,直接使用“font+字体大小”作为名称,如:
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
- 对齐样式,使用对齐目标的英文名称,如:
.left { float:left; }
.bottom { float:bottom; }
- 标题栏样式,使用“类别+功能”的方式命名,如:
.navnews { } //导航栏: 新闻
.navproduct { } //导航栏: 产品
2.4 其他
- 一律小写;
- 尽量用英文;
- 尽量不加中杠和下划线;
- 尽量不缩写,除非一看就明白的单词,如:wrapper可以写成wrap。
- css文件命名规范:
主要的 master.css;
模块 module.css;
基本共用 base.css;
布局/版面 layout.css;
主题 themes.css;
专栏 columns.css;
文字 font.css;
表单 forms.css;
补丁 mend.css;
打印 print.css
但是我们经常在SPA开发过程中, 会在命名好的(组件)文件夹里直接通过index.js
index.less
表示
文章内容源自:https://mp.weixin.qq.com/s/_tC2R2o4wkeoP39AtfmlkA
要想成为前端大神,那些你不得不知晓的web前端命名规范。的更多相关文章
- 为何你跟着滴滴D8级前端大神撸代码,技术却依旧原地踏步?
引子 听说最近有很多小伙伴,热衷于在慕课网上学习各种前端实战教程,并以完成项目为奋斗目标.比如本文接下来要提到的<Vue2.0高级实战之开发移动端音乐App>,这门课程的传授者是来自滴滴D ...
- 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...
- 转:【前端福利】用grunt搭建自动化的web前端开发环境-完整教程
原文地址:http://blog.csdn.net/wangfupeng1988/article/details/46418203 jQuery在使用grunt,bootstrap在使用grunt,百 ...
- 耐克的定制页用canvas如何实现....跪求前端大神指点。
选择鞋子的鞋底 鞋底会变色,也可以添加自己定制的id,这个东西看的是用canvas做的,但是小弟确实不知道怎么去做,求大神指点一二,不胜感激! nike的定制页地址:http://store.nike ...
- web开发菜鸟应该如何向前端大神提问题(一次性把问题描述清楚)
1. 问题的环境和背景这里的背景一般包括,是针对桌面浏览器还是移动端开发?如果是桌面浏览器,则兼容性要求如何?比方说,你来咨询父级是百分比高度的垂直居中效果,你就要说明,你这个效果是需要兼容IE7+还 ...
- 想成为Git大神?从学会reset开始吧
大家好,今天我们来着重介绍一个非常关键的功能就是reset.在上一篇文章介绍修改历史记录的时候曾经提到过,当我们需要拆分一个历史提交记录的时候需要使用reset.估计很多小伙伴不明白,reset究竟做 ...
- WEB前端大神之路之基础篇
CSS篇: 1.CSS权重: 不重复造轮子啦,直接传送门(CSS选择器的权重与优先规则) JavaScript篇: 1.this关键字: 它是一种引用(referent).指向的是当前上下文(cont ...
- 前端大神讲解,初级程序与高级程序写表格变色的区别,dom 0 与dom 1
我们在遇到表格行数太多时,往往会眼花缭乱,下一行看成对应上一行.就要遇到写鼠标移动那行,那行高亮显示. 这里用到一个this关键字: 在面向对象里,this代表对象本身. 在这里只要记住,谁调用这个函 ...
- 转: 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程
http://blog.csdn.net/wangfupeng1988/article/details/46418203
随机推荐
- elk-插件(head、X-pack)(五)
一.修改ES配置,允许REST跨源操作ES服务器,添加以下2个配置,并重启ES. http.cors.enabled: true #如果启用了 HTTP 端口,那么此属性会指定是否允许跨源 REST ...
- Linux基础:用tcpdump抓包(转)
https://segmentfault.com/a/1190000012593192 https://segmentfault.com/a/1190000009691705
- 20175320 2018-2019-2 《Java程序设计》第4周学习总结
20175320 2018-2019-2 <Java程序设计>第4周学习总结 教材学习内容总结 本周学习了教材的第五章的内容.在这章中介绍了子类与继承,着重讲了子类继承的规则以及使用sup ...
- 前端的重要部分js
js用来实现页面的动态效果. js的特点:1.是客户端语言,客户端进行解释执行. 2.是一种脚本语言 3.是一种基于对象的语言,不用定义类和实例化对象,直接使用类即可 4.js前端和后端都可以做 js ...
- 自动重置Language level 5 与 Java Complier 1.5
Intellij IDEA用Maven来构建项目,若pom.xml没有指定版本,总是默认Language level 5 与 Java Compiler 1.5. 以下是两种修改方式: 1. 手动进行 ...
- MongoDB "$" 字符 下标位置
我们可以修改列表里面元素的名字 例如: 修改age=34的数据,hobby里面的"足球"改为"网球" }) { "_id" : Object ...
- java框架之Hibernate(4)-几种检索方式
准备 模型及映射文件 package com.zze.bean; import java.util.HashSet; import java.util.Set; public class Class ...
- vue-cli 搭建的项目关闭 eslint
一般不会关闭eslint,基于接手的代码用eslint的时候报错太多,强迫症的人实在忍受不了报错,先实行关闭: 1.在build 下面的 webpack.base.conf.js 找到 module- ...
- Linux的is not in the sudoers file 解决
https://blog.csdn.net/hxpjava1/article/details/79566822
- ASP.NET Core 之 Identity
Claims:声明(证件单元)Identity:身份Principal:当事人Authentication :认证Authorization:授权 http://www.cnblogs.com/sav ...