一、Web语义化

1.1 H5的语义化

对于经验资深的前端er,在给web布局时,相信都会很注重标签和命名的规范。尤其是随着html5的普及发展,更是把web前端语义化推向一个新的台阶上。比如html5给我们新增的语义标签:header、nav、main、aside、footer、section、article等等。那么对于web语义化,有什么优势呢?

1.2 语义化优势

  1. 可以让人一目了然代码结构块,对于项目的维护或者优化都是非常有意义的。

  2. 语义化能提高页面SEO。如:<header></header>可以很好的代替传统的<div id="header"></div>

1.3 语义化使用规则

  1. 标签语义化,如在合适的地方用合适的语义化标签,如头部可用<header>、尾部可用<footer>
  2. 命名语义化,包括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的命名

  1. 颜色:使用颜色的名称或者16进制代码,如:
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
  1. 字体大小,直接使用“font+字体大小”作为名称,如:
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
  1. 对齐样式,使用对齐目标的英文名称,如:
.left { float:left; }
.bottom { float:bottom; }
  1. 标题栏样式,使用“类别+功能”的方式命名,如:
.navnews { }        //导航栏: 新闻
.navproduct { } //导航栏: 产品

2.4 其他

  1. 一律小写;
  2. 尽量用英文;
  3. 尽量不加中杠和下划线;
  4. 尽量不缩写,除非一看就明白的单词,如:wrapper可以写成wrap。
  5. 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前端命名规范。的更多相关文章

  1. 为何你跟着滴滴D8级前端大神撸代码,技术却依旧原地踏步?

    引子 听说最近有很多小伙伴,热衷于在慕课网上学习各种前端实战教程,并以完成项目为奋斗目标.比如本文接下来要提到的<Vue2.0高级实战之开发移动端音乐App>,这门课程的传授者是来自滴滴D ...

  2. 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...

  3. 转:【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

    原文地址:http://blog.csdn.net/wangfupeng1988/article/details/46418203 jQuery在使用grunt,bootstrap在使用grunt,百 ...

  4. 耐克的定制页用canvas如何实现....跪求前端大神指点。

    选择鞋子的鞋底 鞋底会变色,也可以添加自己定制的id,这个东西看的是用canvas做的,但是小弟确实不知道怎么去做,求大神指点一二,不胜感激! nike的定制页地址:http://store.nike ...

  5. web开发菜鸟应该如何向前端大神提问题(一次性把问题描述清楚)

    1. 问题的环境和背景这里的背景一般包括,是针对桌面浏览器还是移动端开发?如果是桌面浏览器,则兼容性要求如何?比方说,你来咨询父级是百分比高度的垂直居中效果,你就要说明,你这个效果是需要兼容IE7+还 ...

  6. 想成为Git大神?从学会reset开始吧

    大家好,今天我们来着重介绍一个非常关键的功能就是reset.在上一篇文章介绍修改历史记录的时候曾经提到过,当我们需要拆分一个历史提交记录的时候需要使用reset.估计很多小伙伴不明白,reset究竟做 ...

  7. WEB前端大神之路之基础篇

    CSS篇: 1.CSS权重: 不重复造轮子啦,直接传送门(CSS选择器的权重与优先规则) JavaScript篇: 1.this关键字: 它是一种引用(referent).指向的是当前上下文(cont ...

  8. 前端大神讲解,初级程序与高级程序写表格变色的区别,dom 0 与dom 1

    我们在遇到表格行数太多时,往往会眼花缭乱,下一行看成对应上一行.就要遇到写鼠标移动那行,那行高亮显示. 这里用到一个this关键字: 在面向对象里,this代表对象本身. 在这里只要记住,谁调用这个函 ...

  9. 转: 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

    http://blog.csdn.net/wangfupeng1988/article/details/46418203

随机推荐

  1. java JDK环境的配置

    1.  在Administrator用户变量中新建: 变量名:JAVA_HOME 变量值:C:\Program Files (x86)\Java\jdk1.7.0_01 2.  在Administra ...

  2. 解决键盘输入被JDB占用的问题

    解决键盘输入被JDB占用的问题 本周的任务"迭代和JDB"在使用JDB调试时需要键盘输入数据,但我在正确的位置输入数据后发现JDB提示如图所示的错误. 上网查找后得知该错误的产生是 ...

  3. .NET Core 2.1 源码学习:看 SocketsHttpHandler 如何在异步方法中连接 Socket

    在 .NET Core 2.1 中,System.Net.Sockets 的性能有了很大的提升,最好的证明是 Kestrel 与 HttpClient 都改为使用 System.Net.Sockets ...

  4. ES6中Set 和 Map用法

    JS中Set与Map用法 一.Set 1.基本用法 ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. ...

  5. day5_函数的参数

    http://www.nnzhp.cn/archives/154 一.函数在调用的时候,可以传入参数,有形参和实参 形参: 形参变量只有在被调用时才分配内存单元,在调用结束时,即刻释放所分配的内存单元 ...

  6. caffe报错:cudnn.hpp:86] Check failed: status == CUDNN_STATUS_SUCCESS (3 vs. 0) CUDNN_STATUS_BAD_PARAM 原因

    在实际项目中出现的该问题,起初以为是cudnn版本的问题,后来才定位到在网络进行reshape操作的时候 input_layer->Reshape({(), input_layer->sh ...

  7. opencv 进行图像的花屏检测(模糊检测)

    参考: https://www.pyimagesearch.com/2015/09/07/blur-detection-with-opencv/ https://www.cnblogs.com/ark ...

  8. git中设置http代理和取消http代理

    设置http代理 git config --global https.proxy https://127.0.0.1:1080 取消http代理git config --global --unset ...

  9. 一:window环境,LaTex快速安装(简单易懂)

    一.    下载 清华开源软件镜像:点我下载 在线安装很容易失败,所以咱们选择ISO的~ 二.    安装 解压texlive2018.iso文件,并使用管理员权限打开install-tl-windo ...

  10. Mybatis(二)总结

    1. 输入映射(就是映射文件中可以传入哪些参数类型) 1)基本类型 2)pojo类型 3)Vo类型2. 输出映射(返回的结果集可以有哪些类型) 1)基本类型 2)pojo类型 3)List类型3. 动 ...