CSS语义化命名

从上图我们可以大概看出这里有两种CSS的命名方式:1、结构化命名法;2、语义化命名法。

结构化命名法:根据页面中板块的位置而命名,如上图中的content-left,这时如果我们想把侧边栏sidebar放在左边,那么这时content-left板块却在右边,板块位置与其命名完全不符,那么我们这时就要修改页面中的以及CSS样式中的选择器名字了,这样会很不方便,尤其是当页面结构复杂时,一会儿left,一会儿right,这样会很不容易维护。

语义化命名法:根据页面中模块的功能而命名,如页面头部header、导航栏nav、主体main、侧边栏sidebar、底部footer、新闻列表newsList等等,这样整个页面看起来就比较清晰了,维护起来也比较方便。

那么具体来说,应该怎么命名呢,驼峰命名法?下划线命名法?中华线命名法?首先我们需要做到的是要见名知义,最好是用英文单词或通用的缩写来命名,对于是用驼峰命名法还是划线命名法,笔者建议两种都使用,驼峰命名法用来区别不同的单词,划线用来表示从属关系,如主导航栏,我们可以这样命名,mainNav代表这个导航,mainNav-current表示导航处于焦点状态,如本站的导航:

html代码如下:

1

2

3

4

5

6

7

<ulclass="mainNav">

<liclass="mainNav-current"><ahref="#"title="首页">首页</a></li>

<li><ahref="#"title="HTML5">HTML5</a></li>

<li><ahref="#"title="CSS3">CSS3</a></li>

<li><ahref="#"title="Javascript">Javascript</a></li>

...

</ul>

另外,命名讲求的就是见名知义,并且还要注意避免命名冲突,尤其是一个项目由多个人完成时,对于这个问题我们可以通过在命名前面加组员代号或姓名简称来解决,具体还应根据不同团队的规范来实施。

常用的CSS命名规则

[1、文件命名]

主要的:main.css

模块:module.css

基本共用:base.css

布局,版面:layout.css

主题:themes.css

专栏:columns.css

文字:font.css

表单:forms.css

补丁:mend.css

打印:print.css

[2、注释的写法]

/* Footer */

 

内容区

/* End Footer */

[3、id的命名]

(1)页面结构

容器: container

页头:header

内容:content/container

页面主体:main

页尾:footer

导航:nav

侧栏:sidebar

栏目:column

页面外围控制整体布局宽度:wrapper

(2)导航

导航:nav

主导航:mainNav

子导航:subNav

顶导航:topNav

边导航:sideNav

菜单:menu

子菜单:subMenu

标题: title

摘要: summary

(3)功能

标志: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

友情链接:friendLink

版权:copyright

[4、class的命名]

(1)颜色:使用颜色的名称或者16进制代码,如

.red{color:red;}

.f60{color:#f60;}

.ff8600{color:#ff8600;}

(2)字体大小,直接使用"font+字体大小"作为名称,如

.font12px{font-size:12px;}

.font9pt{font-size:9pt;}

 

(3)对齐样式,使用对齐目标的英文名称或单词缩写,如

.fl{float:left;}

.mt20{margin-top:20px;}

(4)标题栏样式,使用"类别+功能/分类"的方式命名,如

.titleBar-news{ }/*新闻标题栏*/

.titleBar-product{ }/*产品标题栏*/

CSS语义化命名的更多相关文章

  1. 你应该了解的CSS语义化命名方式及常用命名规则

    CSS语义化命名 从上图我们可以大概看出这里有两种CSS的命名方式:1.结构化命名法:2.语义化命名法. 结构化命名法:根据页面中板块的位置而命名,如上图中的content-left,这时如果我们想把 ...

  2. css中标签,类名,id名的命名 语义化命名

    作为前端开发人,经常头疼于雷鸣,标签,id名的命名,不知道应该基于什么原则. 原则: 2 当命名的时候,问自己,这个元素是要来做什么?(根据使用目的).ad-banner 4 避免依靠位置和视觉效果命 ...

  3. HTML与CSS 开发常用语义化命名

    一.布局❤️ header 头部/页眉:index 首页/索引:logo 标志:nav/sub_nav 导航/子导航:banner 横幅广告:main/content 主体/内容:container/ ...

  4. 快速理解web语义化

    什么是Web语义化 Web语义化是指使用恰当语义的html标签.class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容.语义化的web页面一方面可以让机器在更少的人类干预 ...

  5. 【02】你是如何理解 HTML 语义化的,有什么好处

    [02]你是如何理解 HTML 语义化的   01,语义化,就是通过HTML标签来表示页面包含的信息. 02,其中有HTML标签的语义化和CSS命名的语义化. 03,HTML标签语义化的的含义是:   ...

  6. web语义化理解

    含义: Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解. 为什么要web语义化?如今互联网都到了web2.0的时代了,HTML语言在不断的进化并发 ...

  7. HTML 3-列表、表单、语义化

    有序列表.无序列表.自定义列表在语义上的区别 1.有序列表ol>li:列表有顺序编号(默认列表前加1.,2.,3.,...编号),适用于有逻辑顺序的排列项目,而且次序不能乱.2.无序列表ul&g ...

  8. CSS代码命名惯例语义化的方法

    CSS代码的命名惯例一直是大家热门讨论的话题.今天暴风彬彬想通过分析一个流行三栏布局中的必要元素,来为大家讲解关于使用语义化方法替代结构化方法来命名CSS类的建议和指导. 您还可以参考彬Go的相关文章 ...

  9. 智能选择器和语义化的CSS

    本文由白牙根据Heydon Pickering的<Semantic CSS With Intelligent Selectors>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之 ...

随机推荐

  1. Nginx、PCRE和中文URL(UTF8编码)rewrite路径重写匹配问题

    最近遇到了使用Nginx 重写中文UTF8编码路径的问题. 才发现默认情况下Nginx的rewrite是不支持UTF8匹配的. 比如: rewrite ^/(..)$ /2个字符文章.html bre ...

  2. python用time函数计算程序运行时间

    内置模块time包含很多与时间相关函数.我们可通过它获得当前的时间和格式化时间输出. time(),以浮点形式返回自Linux新世纪以来经过的秒数.在linux中,00:00:00 UTC, Janu ...

  3. C语言 · 数组查找及替换

    算法训练 数组查找及替换   时间限制:1.0s   内存限制:512.0MB      问题描述 给定某整数数组和某一整数b.要求删除数组中可以被b整除的所有元素,同时将该数组各元素按从小到大排序. ...

  4. 16C554在LINUX上的移植(AT91)

    16C554在LINUX上的移植(AT91) linux版本:3.14.17 AT91SAMa5d36   EINTA_0   ARM-IO5        PA14         14 EINTA ...

  5. ip: either "dev" is duplicate, or "type" is garbage

    Driver installation Nothing has to be done for the APF51Dev, the APF28Dev and the APF6Dev. For the A ...

  6. tomcat上

    1. Tomcat简介 Tomcat是一个web服务器 web服务器:httpd,nginx web 处理静态文件:html css.js.jpg,png Tomcat 处理 html文件 php软件 ...

  7. 以下web.xml片断( )正确地声明servlet 上下文参数。

    A <init-param> <param-name>MAX</param-name> <param-value>100</param-value ...

  8. 【BZOJ】2179: FFT快速傅立叶(fft)

    http://www.lydsy.com/JudgeOnline/problem.php?id=2179 fft裸题.... 为嘛我的那么慢....1000多ms.. #include <cst ...

  9. LoadRunner检查点实战之运行查看器

    一.为什么要使用检查点 为什么要使用检查点,那就要说明一下LR如何判断脚本是否执行成功.LR判断脚本是否执行成功是根据服务器返回的状态来确定的,如果服务器返回的HTTP状态为 200 OK ,那么Vu ...

  10. 如何用ChemFinder制作子表单

    通过使用ChemFinder这一插件,用户可以建立自己的ChemFinder数据库,数据库是由表单集合而成,所以建立数据库的前提是要制作表单.在之前的教程中已经介绍了制作表单的方法,本节ChemDra ...