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. hdu1428(记忆化搜索)

    题意:“他考虑从A区域到B区域仅当存在一条从B到机房的路线比任何一条从A到机房的路线更近(否则可能永远都到不了机房了…”这句话一定要理解清楚.就是说,对于当前位置,如果下一个状态与终点的最短距离大于或 ...

  2. 匈牙利命名法、骆驼命名法、帕斯卡(pascal)命名法 C#命名规范

    匈牙利命名法.骆驼命名法.帕斯卡(pascal)命名法 C#命名规范 一.匈牙利命名法:广泛应用于象Microsoft Windows这样的环境中. Windows 编程中用到的变量(还包括宏)的命名 ...

  3. 常用vim编辑器命令行

    按ESC键 跳到命令模式,然后: :w 保存文件但不退出vi:w file 将修改另外保存到file中,不退出vi:w! 强制保存,不推出vi:wq 保存文件并退出vi:wq! 强制保存文件,并退出v ...

  4. cocos2dx3.2升级Android5的坑

    虽然已经转到服务端,但是对客户端的事情,偶尔还看看.公司的游戏用的是cocos2dx 3.2的版本, 然而在Android 5 上却无法运行. 先是没有触摸事件. 在stackoverflow上看到, ...

  5. per-cpu

    What is percpu data? percpu data 是内核为smp系统中不同CPU之间的数据保护方式,系统为每个CPU维护一段私有的空间,在这段空间中的数据只有这个CPU能访问.但是这种 ...

  6. EasyUI DataGrid合并单元

    <table id="tt"></table> $('#tt').datagrid({     title:'Merge Cells',     iconC ...

  7. android sdk屏幕截图工具

    调用android sdk中的工具,在开发板上截图. 使用usb线连接android设备,打开adb调试. 进入目录 sdk/tools/ 运行 traceview.bat 运行 uiautomato ...

  8. php如何优化压缩的图片

    php程序开发中经常涉及到生成缩略图,利用php生成缩略图这个过程本身没难度,但是你知道php能够优化调节生成的缩略图的质量吗?也就是说php能够控制生成缩略图的清晰度以及生成后的缩略图的体积.下面我 ...

  9. Linux服务器的最大内存和CPU数

    从网上查了很多资料.总算把linux下的内存和cpu个数搞清楚了.个人觉得使用linux系统的朋友都应该了解下.先公布如下,如有错误,请反馈给我.谢谢!! Linux系统/服务器能够支持的最大内存和C ...

  10. 复习及总结--.Net线程篇(1)

    老是没耐心写这些东西,最近想想也工作两年了,该对自己的东西做个整理了,不知道这次能坚持写几篇,总得来说尽量督促自己吧 言归正传,.net中的多线程主要可以使用两种方法进行调用 1,异步调用 2,Thr ...