CSS和HTML命名规范有哪些

发布时间:2021-06-24 15:03:38 作者:Leah
来源:亿速云 阅读:134

今天就跟大家聊聊有关CSS和HTML命名规范有哪些,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

1. 面向属性的命名方法,是什么属性就写什么名。

2. 精简高效CSS命名之“三无原则”,此“三无原则”就是:无ID,无层级,无标签,CSS命名就应该最简单、最直接,直捣黄龙。没有HTML标签,没有层级,原因有三:

1. 限制重用  2. CSS文件大小  3. 降低了渲染效率,CSS的渲染方式是“从右往左”渲染的,

“三无原则”遗留之样式冲突问题

正如上面讲的,层级,标签可以避免样式冲突,虽然“面向属性的命名”不存在冲突问题,但是,页面上很多样式是无法分离使用“面向属性的命名”的,此时,一不能有层级,二不能有标签,如果避免冲突呢?

首先,规范。项目组所有人的命名方法,习惯都要统一。其次,也是实际的做法,同一内容,使用同一前缀。就如上面的那张图片所示,所有class同一使用od前缀,这样,就绝不会与其他页面的CSS产生冲突了。

我们通常会根据三类情况给定一个 class 名:

功能性 class 名

内容性 class 名

展示性 class 名

http:/ /www.iis7.com/b/wzjk/

这几类 class 名是趋向于稳定特质的。如果我们遵循这些命名原则,就会显得更明智,而且我们的 CSS 会更好的适应未来的改变。

功能性 class 名通常是你的最佳选择。当你能够使用它们的时候就尽量使用。如果你无法提取出完全功能性的名字,可以考虑你的项目的本质及其发展。原则上,内容性 class 名更适合小型站点;而展示性 class 名更适合大型站点。

开发者会很在意这种用法。没有人希望一个项目变得难以维护,但是每个人都有不同的 想法通过 class 名来应对这些特殊情况。这时不妨思考一下我们使用的不同类型 class 名的本质,问问自己这样做是否更好的帮助你的项目达成目标。

命名规则说明:

1)、所有的命名最好都小写

2)、属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5"

3)、每个标签都要有开始和结束,且要有正确的层次,排版有规律工整

4)、空元素要有结束的tag或于开始的tag后加上"/"

5)、表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等

6)、<h2>到<h6>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询。

7)、给每一个表格和表单加上一个唯一的、结构标记id

8)、给图片加上alt标签

9)、尽量使用英文命名原则

10)、尽量不缩写,除非一看就明白的单词

相对网页外层重要部分CSS样式命名: 

外套 wrap ------------------用于最外层

头部 header ----------------用于头部

主要内容 main ------------用于主体内容(中部)

左侧 main-left -------------左侧布局

右侧 main-right -----------右侧布局

导航条 nav -----------------网页菜单导航条

内容 content ---------------用于网页中部主体

底部 footer -----------------用于底部

看完上述内容,你们对CSS和HTML命名规范有哪些有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。

推荐阅读:
  1. css命名规范
  2. HTML和css有什么用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css html

上一篇:jQuery如何实现页面倒计时并刷新效果

下一篇:jQuery如何实现radio第一次点击选中第二次点击取消功能

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》