整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
本命名规范
index.css： 一般用于首页建立样式
head.css： 头部样式，当多个页面头部设计风格相同时使用。
base.css： 共用样式。
style.css：独立页面所使用的样式文件。
global.css：页面样式基础，全局公用样式，页面中必须包含。
layout.css：布局、版面样式，公用类型较多时使用，一般用在首页级页面和产品类页面中
module.css：模块，用于产品类页，也可与其它样式配合使用。
master.css：主要的样式表
columns.css：专栏样式
themes.css：主体样式
forms.css：表单样式
mend.css：补丁，基于以上样式进行的私有化修补。
页面结构命名：
page：代表整个页面，用于最外层。
wrap：外套，将所有元素包在一起的一个外围包，用于最外层
wrapper：页面外围控制整体布局宽度，用于最外层
container：一个整体容器，用于最外层
head，header：页头区域，用于头部
nav: 导航条
content：内容，网站中最重要的内容区域，用于网页中部主体
main：网站中的主要区域（表示最重要的一块位置），用于中部主体内容
column：栏目
sidebar：侧栏
foot，footer：页尾、页脚。网站一些附加信息放置区域，（或命名为 copyright）用于底部
导航命名：
nav, navbar, navigation, nav-wrapper：导航条或导航包，代表横向导航
topnav：顶部导航
mainbav：主导航
subnav：子导航
sidebar：边导航
leftsidebar 或 sidebar_a：左导航
rightsidebar 或 sidebar_b：右导航
title：标题
summary：摘要
menu：菜单，区域包含一般的链接和菜单
submenu：子菜单
drop：下拉
dorpmenu：下拉菜单
links：链接菜单
功能命名：
logo：标记网站logo标志
banner：标语、广告条、顶部广告条
login：登陆，（例如登录表单：form-login）
loginbar：登录条
register：注册
tool, toolbar：工具条
search：搜索
searchbar：搜索条
searchlnput：搜索输入框
shop：功能区，表示现在的
icon：小图标
label：商标
homepage：首页
subpage：二级页面子页面
hot：热门热点
list：文章列表，（例如：新闻列表：list-news）
scroll：滚动
tab：标签
sitemap：网站地图
msg 或 message：提示信息
current：当前的
joinus：加入
status：状态
btn：按钮，（例如：搜索按钮可写成：btn-search）
tips：小技巧
note：注释
guild：指南
arr, arrow：标记箭头
service：服务
breadcrumb：(即页面所处位置导航提示）
download：下载
vote：投票
siteinfo：网站信息
partner：合作伙伴
link, friendlink：友情链接
copyright：版权信息
siteinfoCredits：信誉
siteinfoLegal：法律信息
【CSDN 编者按】从1995年开始，本文作者Dr.Axel Rauschmayer就专门从事JavaScript和Web开发，已经有30多年了。2010年，他获得慕尼黑大学信息学博士学位。自2011年以来，他一直在2ality.com写博客，并写了几本关于JavaScript的书，比如《JavaScript for impatient programmers》、《Deep JavaScript: Theory and techniques》等。今天这篇文章就来自于他的博客，介绍了在JavaScript命名冲突时，现有代码如何强制对提议的功能进行重命名。
不断发展的JavaScript：不要破坏web!
JavaScript的一个发展核心原则就是"不要破坏Web"：在将新特性添加到语言中后，所有现有代码都必须能够继续运行。
这样有一个坏处，就是不能从语言中删除现有的quirks。但这样做益处多多，比如旧的代码可以继续运行，而且升级到新的ECMAScript版本很简便等等。
在为新特征（如方法名称）选择名称时，需要进行一个重要的测试，即在浏览器的nightly版本（早期预发布版本）中添加该特征，并检查是否有任何网站出现错误。
接下来将介绍过去案例中的的四个冲突源，当产生这四种冲突时，就必须重命名特征。
冲突源1：向内置原型添加方法
在JavaScript中，我们可以通过改变其原型来为内置值添加方法：
// Creating a new Array methodArray.prototype.myArrayMethod = function () {return this.join('-');};assert.equal(['a', 'b', 'c'].myArrayMethod(), 'a-b-c');// Creating a new string methodString.prototype.myStringMethod = function () {return '¡' + this + '!';};assert.equal('Hola'.myStringMethod(), '¡Hola!');
神奇的是，语言可以通过这种方式改变。这种运行时的修改被称为猴子补丁（monkey patch）。
什么是猴子补丁？
如果我们给内置原型添加方法，我们就是在运行时修改一个软件系统。这样的修改被称为猴子补丁。简单来说，对其含义有两种可能的解释。
这个叫法起源于Zope框架，人们在修正Zope的Bug的时候经常在程序后面追加更新部分，这些被称作是“杂牌军补丁(guerilla patch)”，后来guerilla就渐渐的写成了gorllia((猩猩)，再后来就写了monkey(猴子)，所以猴子补丁的叫法是这么莫名其妙的得来的。
另一种说法是，它指的是搞乱（monkeying about）代码。
反对改变内置原型的原因
对任何类型的全局命名，都会存在名称冲突的风险。如果有解决冲突的机制，就能规避风险。例如：
全局模块是通过裸模块指定器或URLs来识别的。前者之间的名称冲突可以通过npm注册表来解决。后者之间的名称冲突可以通过域名注册处来解决。
可以通过将符号添加到JavaScript中，以避免方法之间的名称冲突。例如，任何对象都可以通过添加一个键为.NET的方法而成为可迭代的。由于每个符号都是唯一的，所以这个键永远不会与任何其他属性键.Symbol.iterator发生冲突。
然而，带有字符串键的方法会导致名称冲突：
不同的库可能会对他们添加到.Array.prototype的方法使用相同的名字。
如果一个名字已经被某个库使用了，那么这个名称就不能用于命名JavaScript标准库的一个新特性。
具有讽刺意味的是，谨慎地添加一个方法可能会适得其反：
if (!Array.prototype.libraryMethod) {Array.prototype.libraryMethod = function () { /*...*/ };}
我们会检查一个方法是否已经存在。如果没有，我们就添加它。
如果我们要实现一个polyfill（模拟原生Web平台功能），将新的JavaScript方法添加到不支持它的引擎中，那么这个技术就能发挥作用。(顺便说一下，这是修改内置原型的一个合法用例。也许是唯一的一个）。
然而，如果我们对一个普通库的方法使用这种技术，然后JavaScript获取具有相同名称的方法，那么这两种实现的工作方式就不一样了，并且使用库方法的所有代码在使用内置方法时都会中断。
必须更改名称的原型方法示例
ES6的方法最初是与JavaScript框架MooTools（错误报告）.String.prototype.includes().contains()全局添加的方法相冲突。
ES2016的方法最初是与MooTools(错误报告 ).Array.prototype.includes().contains()添加的方法相冲突。
ES2019的方法最初是和MooTools(错误报告， 博客文章).Array.prototype.flat().flatten()相冲突。
修改内置原型并不总是糟糕的
你可能会对MooTools的创建者的粗心大意感到疑惑。但是，向内置原型添加方法并不总是糟糕的。在ES3（1999年12月）和ES5（2009年12月）之间，JavaScript是一种停滞不前的语言。MooTools和Prototype等框架改进了它。这些方法的缺点只有在JavaScript的标准库再次增加之后才会凸显出来。
ES2022的方法最初是.NET的。因为以下库检查属性以确定对象是否是一个HTML集合（而不是一个数组），所以它必须被重新命名：Magic360、YUI 2、YUI 3.Array.prototype.at().item().item
自ES2020以来，我们可以通过globalThis访问全局对象。Node.js一直使用该名称来实现此目的。最初的计划是为所有平台标准化该名称.global
然而，以下模式经常被用来确定当前平台：
if (typeof global !== 'undefined') {// We are not running on Node.js}
如果浏览器也有一个名为.global的全局变量，这种模式（以及类似的模式）就会失效。因此，标准化的名称被改为.globalglobalThis。
with语句with语句长期以来，人们一直不鼓励使用JavaScript的with语句，甚至在ES5中引入的严格模式中也被定为非法。在其他地方，严格模式在ECMAScript模块中是活跃的。
该语句将一个对象的属性变成局部变量：with
cons t myObject = {ownProperty: 'yes',};with (myObject) {// Own properties become local variablesassert.equal(ownProperty, 'yes');// Inherited properties become local variables, tooassert.equal(typeof toString, 'function');}
由with语句引起的冲突
框架Ext.js使用的代码与下面的片段有些相似点：
function myFunc(values) {with (values) {console.log(values); // (A)}}myFunc([]); // (B)
当ES6方法被添加到JavaScript中时，如果用Array（B行）来调用它，它就会失效。该语句将Array的所有属性变成了局部变量。其中一个是继承的属性。因此，A行中的语句已记录，不再是参数（错误报告1，错误报告2）
Array.prototype.values()myFunc()withvalues.valuesArray.prototype.valuesvalue
Unscopables：防止with导致的冲突
公共符号Symbol.unscopables允许对象隐藏语句中的某些属性。它只在标准库中使用一次，对于Array.prototype：with
assert.deepEqual(Array.prototype[Symbol.unscopables],{__proto__: ,at: true,copyWithin: true,entries: true,fill: true,find: true,findIndex: true,flat: true,flatMap: true,includes: true,keys: true,values: true,});
以上提出了JavaScript结构与现有代码发生名称冲突的四种方式：
向内置原型添加方法
检查属性是否存在
检查全局变量是否存在
创建局部变量with
冲突的某些来源很难预测，但存在以下一些一般规则：
不要更改全局数据。
避免检查是否存在全局数据。
请注意，内置值将来可能会获得其他属性（自己的或继承的属性）。
对于库来说，为JavaScript值提供功能的最安全方法是通过函数。如果JavaScript得到一个pipe operator，我们也可以像方法一样使用它们。
参考资料：https://2ality.com/2022/03/naming-conflicts.html
《新程序员001-004》全面上市，对话世界级大师，报道中国IT行业创新创造
示：点击上方"蓝色字体"↑ 可以订阅噢！
摘要 51RGB官方微信
网页制作中规范使用DIV+CSS命名规则，可以改善优化功效特别是团队合作时候可以提供合作制作效率，具体DIV CSS命名规则CSS命名大全内容篇。
常用DIV+CSS命名大全集合，即CSS命名规则
我们开发CSS+DIV网页（Xhtml）时候,比较困惑和纠结的事就是CSS命名，特别是新手不知道什么地方该如何命名，怎样命名才是好的方法。
1、所有的命名最好都小写
2、属性的值一定要用双引号("")括起来，且一定要有值如 class="helloweb" , id="helloweb"
3、每个标签都要有开始和结束，且要有正确的层次，排版有规律工整
4、空元素要有结束的tag或于开始的tag后加上"/"
5、表现与结构完全分离，代码中不涉及任何的表现元素，如：style、font、bgColor、border 等
6、<h1>到<h6>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。
7、给每一个表格和表单加上一个唯一的、结构标记 id
8、给图片加上alt 标签，优点是在于在图片发生错误时，alt 可以体现给用户
9、尽量使用英文命名原则
10、尽量不缩写，除非一看就明白的单词
下面给大家介绍常见CSS命名和DIV CSS命名方法。
外套 wrap ------------------用于最外层
头部 header ---------------用于头部
主要内容 main ------------用于主体内容（中部）
左侧 main-left -------------左侧布局
右侧 main-right -----------右侧布局
导航条 nav -----------------网页菜单导航条
内容 content --------------用于网页中部主体
底部 footer -----------------用于底部
以下为CSS样式命名与CSS文件命名参考表，DIV CSS命名集合：
| CSS样式命名 | 说明 |
|---|---|
| 网页公共命名 | |
| #wrapper | 页面外围控制整体布局宽度 |
| #container或#content | 容器,用于最外层 |
| #layout | 布局 |
| #head, #header | 页头部分 |
| #foot, #footer | 页脚部分 |
| #nav | 主导航 |
| #subnav | 二级导航 |
| #menu | 菜单 |
| #submenu | 子菜单 |
| #sideBar | 侧栏 |
| #sidebar_a, #sidebar_b | 左边栏或右边栏 |
| #main | 页面主体 |
| #tag | 标签 |
| #msg #message | 提示信息 |
| #tips | 小技巧 |
| #vote | 投票 |
| #friendlink | 友情连接 |
| #title | 标题 |
| #summary | 摘要 |
| #loginbar | 登录条 |
| #searchInput | 搜索输入框 |
| #hot | 热门热点 |
| #search | 搜索 |
| #search_output | 搜索输出和搜索结果相似 |
| #searchBar | 搜索条 |
| #search_results | 搜索结果 |
| #copyright | 版权信息 |
| #branding | 商标 |
| #logo | 网站LOGO标志 |
| #siteinfo | 网站信息 |
| #siteinfoLegal | 法律声明 |
| #siteinfoCredits | 信誉 |
| #joinus | 加入我们 |
| #partner | 合作伙伴 |
| #service | 服务 |
| #regsiter | 注册 |
| arr/arrow | 箭头 |
| #guild | 指南 |
| #sitemap | 网站地图 |
| #list | 列表 |
| #homepage | 首页 |
| #subpage | 二级页面子页面 |
| #tool, #toolbar | 工具条 |
| #drop | 下拉 |
| #dorpmenu | 下拉菜单 |
| #status | 状态 |
| #scroll | 滚动 |
| .tab | 标签页 |
| .left .right .center | 居左、中、右 |
| .news | 新闻 |
| .download | 下载 |
| .banner | 广告条 |
| 电子贸易相关 | |
| .products | 产品 |
| .products_prices | 产品价格 |
| .products_description | 产品描述 |
| .products_review | 产品评论 |
| .editor_review | 编辑评论 |
| .news_release | 最新产品 |
| .publisher | 生产商 |
| .screenshot | 缩略图 |
| .faqs | 常见问题 |
| .keyword | 关键词 |
| .blog | 博客 |
| .forum | 论坛 |
| CSS文件命名 | 说明 |
|---|---|
| master.css,style.css | 主要的 |
| module.css | 模块 |
| base.css | 基本共用 |
| layout.css | 布局，版面 |
| themes.css | 主题 |
| columns.css | 专栏 |
| font.css | 文字、字体 |
| forms.css | 表单 |
| mend.css | 补丁 |
| print.css | 打印 |
CSS命名其它说明：
DIV+CSS命名小结：无论是使用“.”（小写句号）选择符号开头命名，还是使用“#”(井号)选择符号开头命名都无所谓，但我们最好遵循，主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名，同时考虑命名的CSS选择器在HTML中重复使用调用。
通常我们最常用主要命名有：wrap（外套、最外层）、header（页眉、头部）、nav(导航条)、menu(菜单)、title(栏目标题、一般配合h1\h2\h3\h4标签使用)、content (内容区)、footer(页脚、底部)、logo（标志、可以配合h1标签使用）、banner（广告条，一般在顶部）、copyRight（版权）。其它可根据自己需要选择性使用。
建议：主要的、重要的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名。
2.CSS样式文件命名如下：
主要的 master.css
布局，版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css
如果遇到不常用的，可以借助翻译工具进行翻译取其英文命名。
以上为DIV+CSS的命名规则总结，相信通过规范的CSS 命名会给你以后做网站网页的维护带来方便。
想认识志同道合的朋友一起学习web
加入我们的学习QQ群 190166743
丰富的学习资源，周一到周四免费直播公开课
长按图片，识别二维码即可入群
你可能感兴趣的精彩内容
微信：UI设计自学平台加关注
长按关注：《UI设计自学平台》
↓↓↓
*请认真填写需求信息，我们会在24小时内与您取得联系。
