我们一般在做前端设计网站框架的时候，DIV或者CSS标签名称有没有一个固定的标准？有些朋友是想到哪里写到哪里，有些朋友有自己的规范命名特征，也有些朋友是遵循标准的。...这里收集和整理一些规范的CSS命名规范标准，记录下来。...第一、常用的命名 page、wrap、layout、header、footer、content、menu、nav、main、submain、sidebar、logo、banner、title、tips、...名称命名 CSS文件命名 说明 master.css,style.css 主要的 module.css 模块 base.css 基本共用 layout.css 布局，版面 themes.css 主题 columns.css...本文出处：老蒋部落 » 常用前端CSS命名规范随手记整理 | 欢迎分享
CSS常用命名，必须记住 一、常用命名 标题：title 摘要：summary 箭头：arrow 商标：label 网站标志：logo 转角/圆角：corner 横幅广告：banner 子菜单：subMenu...指南：guild 服务：service 热点：hot 新闻：news 下载：download 投票：vote 合作伙伴：partner 友情链接：link 版权：copyright 五、看一些class命名...font9pt{font-size:9pt} 3、对齐样式，使用对齐目标的英文名称，如： .left{float:left} .bottom{float:bottom} 4、标题栏样式，使用类别+功能的方式命名
(一)常用的CSS命名规则 头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度...regsiter 状态：status 投票：vote 合作伙伴：partner (二)注释的写法: /* Footer */ 内容区 /* End Footer */ (三)id的命名... (3)对齐样式,使用对齐目标的英文名称,如 .left { float:left; } .bottom { float:bottom; } (4)标题栏样式,使用”类别+功能”的方式命名...主要的 master.css 模块 module.css 基本共用 base.css 布局，版面 layout.css 主题 themes.css 专栏 columns.css ...文字 font.css 表单 forms.css 补丁 mend.css 打印 print.css 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/119319
CSS 命名规范 页面外围控制整体布局宽度：wrapper 页头：header 页面主体：main 内容：content 页脚：footer 导航：nav 主导航：mainbav 子导航：subnav
一、Css命名法： 1.驼峰命名法：除第一个单词的首字母小写之外，其余的单词首字母均大写。如：#headBlock(2). 2.帕斯卡命名法：所有单词的首字母均大写。...如：#HeadBlock(3). 3.匈牙利命名法：在名称前加上一个或多个小写字母作为前缀.如：#head_Navigation; 二、页面模块常用CSS命名 头：header 热点：hot 内容：
命名参考 常用的CSS命名规则： 头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper...左右中：left right center 命名全部使用小写字母，如果需要多个单词，单词间使用“-”分隔，比如user-list 命名参考 常用代码结构： div：主要用于布局，分割页面的结构 ul.../ol：用于无序/有序列表 span：没有特殊的意义，可以用作排版的辅助，例如 (4.23)天幻网六周年天幻网六周年天幻网六周年天幻网六 然后在css中定义span... CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading Stylesheet）。 什么是XHTML？...命名参考 根据w3c网站上给出的,最好是用意义命名 比如：是重要的新闻高亮显示（像红色） 有两种 .red{color:red} .important-news{color:red} 很显然第二种传达的意义更加明确
、各种列表、评论、搜索等元件 unit (.u-)：通常是一个不可再分的较为小巧的个体，通常被重复用于各种模块中，比如按钮、输入框、loading、图标等功能 function (.f-)：为方便一些常用样式的使用...非换肤型网站不可滥用此类状态 .z-：为状态类样式加入前缀，统一标识，方便识别，她只能组合使用或作为后代出现(.u-ipt.z-dis{}，.m-list li.z-sel{}) 布局 grid (.g-)语义命名简写文档...bodybd尾部footft主栏mainmn主栏子容器maincmnc侧栏sidesd侧栏子容器sidecsdc盒容器wrap/boxwrap/box模块 module (.m-), unit (.u-)语义命名简写导航...verticalalignmiddlevam溢出隐藏overflowhiddenoh完全消失displaynonedn字体大小fontsizefs字体粗细fontweightfw皮肤 skin (.s-)语义命名简写字体颜色...backgroundbg背景颜色backgroundcolorbgc背景图片backgroundimagebgi背景定位backgroundpositionbgp边框颜色bordercolorbdc状态 .z-语义命名简写选中
前言： 最近团队要考虑代码风格统一 1 什么是 BEM 命名规范 Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论...在 css 定义时，也必须依靠层级选择器来限定约束作用域，以避免跨组件的样式污染。...，模块层级关系简单清晰，而且 css 书写上也不必作过多的层级选择。...important; } 2.2 在 CSS 预处理器中使用 BEM 格式 BEM 的一个槽点是，命名方式长而难看，书写不雅。相比 BEM 格式带来的便利来说，我们应客观看待。...组件级作用域的编译实现，其基本原理均为利用 CSS 属性选择器特性，为不同的组件生成不同的属性选择器。
mpwpWeb WebPartManager mwp mwpSite1 WebPartZone zwp zwpSite2 基本数据类型 数据类型 数据类型简写 标准命名举例...objReturnValue Short shr shrAverage Single sng sngMaximum String str strFirstName ADO.NET 命名规范...数据类型 数据类型简写 标准命名举例 Connection con conNorthwind Command cmd cmdReturnProducts Parameter...数据类型 数据类型简写 标准命名举例 Label lbl lblMessage LinkLabel llbl llblToday Button btn btnSave...FontDialog fdlg fdlgFoot ColorDialog cdlg cdlgColor PrintDialog pdlg pdlgPrint WebControl 命名规范
好吧，我的代码虽然实现了和设计一样的界面，但是还是太臭了，类的命名都是特别的差劲。。找了命名规范，，拿来共享一下，警告自己，，代码不仅要实现功能，更要优美，华丽。。...每次写之前写之后都想办法精简代码， 3：阅读的习惯是一眼能看完，整个结构和内容，上下太长则每一行多放一些，左右太长则分行， 4：命名上，要体现层级关系，例如 主层idcade，内层idcade-left...CSS命名规范（规则） 常用的CSS命名规则 头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体佈局宽度...五、CSS样式表文件命名 主要的 master.css 模块 module.css 基本共用 base.css 布局、版面 layout.css 主题 themes.css 专栏 columns.css...文字 font.css 表单 forms.css 补丁 mend.css 打印 print.css
BEM即块(Block)、元素(Element)、修饰符(modifier)，是由著名的俄罗斯搜索引擎团队Yandex提出的一种前端命名方法论。...BEM命名约定更加严格，而且包含更多的信息，一般用于团队开发一个耗时的大项目中。...我们常见的BEM命名方式一般都是经过改良的，本文介绍的是Nicolas Gallagher（Twitter前端工程师）的改进版。...-- 女性的右手 --> 上面的代码使用了常规CSS来表示，各个class都是有意义的，但是他们之间却是脱节的...使用BEM我们可以获得更多的描述和更加清晰的结构，并且通过命名我们就可以知道元素之间的关联。代码如下： <!
，但前提是要让人看懂你的命名才能简写哦!...8266e4bfeda1bd42d8f9794eb4ea0a13.png 连字符CSS选择器命名规范 1.长名称或词组可以使用中横线来为选择器命名。...2.不建议使用“_”下划线来命名CSS选择器，为什么呢?...10fb15c77258a991b0028080a64fb42d-1.png CSS命名规范(规则)常用的CSS命名规则 头header内容content尾footer导航nav侧栏sidebar栏目...CSS样式表文件命名 主要的master.css模块module.css基本共用base.css布局、版面layout.css主题themes.css专栏columns.css文字font.css表单forms.css
前言 任何代码编程都有各自特点的常用命名规范，div+css页面设计也不例外。遵守常用的css命名规范有利于代码的升级和扩展，也有利于让别人读懂你的css代码，让你的页面显得清晰有条理。...css文件名命名规范 模块：module.css 基本共用：base.css 布局、版面：layout.css 主题：themes.css 专栏：columns.css 文字：font.css 表单：forms.css...补丁：mend.css 打印：print.css 页面结构元素div命名规范 头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column...”作为名称 .font12px {font-size: 12px;} .font9pt {font-size: 9pt;} 对齐样式命名-使用对齐目标的英文名称 .left {float:left;}....bottom {float:bottom;} 标题栏样式命名-使用“类别+功能”的方式命名 .barnews { } .barproduct { } 注释书写规范 行间注释-直接写于属性值后面，如：
有兴趣可以看看： 百度前端编码规范 CSS命名其实挺随意的，使用驼峰、-、_都可以，并不影响使用，常用的应该是-和下划线_连接。...我一直使用的是-，因为各大UI库或者是CSS库都是使用-，这应该也成为一个标准规范。...CSS挺容易造成样式污染的，每个模块或者页面之间，总有一些命名容易相同，解决也简单，用权重或者重写，只是这种场景有时候还是挺头疼。...平时我们不会关注这个，这其实是CSS的属性选择器，打包的时候给每个标签都添加一个唯一的data-v-hash。...每种方法都各自有优缺点，无非就是从样式污染、样式覆盖、命名规范。
对一个已知大小的元素上下左右居中（已知大小了，直接margin也就行了）： css如下： .parent{height:100px;width:100px;background:grey;position...:red; } html如下： 未知高度上下左右居中 css...class="parent"> 未知高度上下左右居中 css...html如下: 1212 css
常用css属性 如果你需要设置小于指定px的设备,比如想单独设置手机样式可以使用如下内容包裹 /* 小于750px的屏幕 */ @media screen and (max-width: 750px)...元素被点击时 :active { color: #0000FF; } :元素被点击后 visited { color: #00FF00; } ---- 伪元素 ::before 用于在元素的内容前插入内容，通常用来添加装饰性图案或文字等...::after 用于在元素的内容后插入内容，也通常用来添加装饰性图案或文字等。 ::first-letter 用于选中元素的第一个字母，可以对其应用样式。
1. attr() 用来选择元素的属性值，用法：attr(html元素的属性名)，正常搭配css content一起使用 html: 十 九 css: a:after{content:'('attr(href) '...示例： background: repeating-linear-gradient(30deg, red 5%, yellow 10%, green 20%); // 结果如下，设置角度后的效果 Css
css module解决命名冲突 css的类名冲突往往发生在大型项目中。 1、大型项目往往会使用构建工具搭建工程。 2、构建工具允许将css样式切分为更加精细的模块。...实现原理 在webpack中，作为处理css的css-loader，它实现了css module的思想，要启用css module，需要将css-loader的配置modules设置为true。...css-loader的实现方式如下： 原理极其简单，开启了css module后，css-loader会将样式中的类名进行转换，转换为一个唯一的hash值。...由于hash值是根据模块路径和类名生成的，因此，不同的css模块，哪怕具有相同的类名，转换后的hash值也不一样。 以上就是css module解决命名冲突的方法，希望对大家有所帮助。...更多css学习指路：css教程 本文教程操作环境：windows7系统、css3版，DELL G3电脑。
常用的css命名规则： 头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper...service 注册：register 状态：status 投票：vote 合作伙伴：partner 注释的写法： /* Footer / 内容区 / End Footer */ id的命名...9pt; } (3)对齐样式 使用对齐目标的英文名称,如 .left { float:left; } .bottom { float:bottom; } (4)标题栏样式 使用”类别+功能”的方式命名...主要的 master.css 模块 module.css 基本共用 base.css 布局，版面 layout.css 主题 themes.css 专栏 columns.css 文字 font.css...表单 forms.css 补丁 mend.css 打印 print.css
上周，我分享了如何使用BEM创建一个合理的CSS架构。 虽然BEM很棒，但它只是解决方案的一部分。 还有另一部分我还没有提到 —— 命名空间。...这就是之所以引入命名空间。它可以帮助你创建一个结构来控制CSS属性的写入。 如果您遵循惯例，您将能够无惧副作用地编写CSS。 这里是一个示例。 假设我把上面的代码转换成一个带有命名空间的代码。...以上，让我们先进入第一个命名空间 —— 布局（layouts） “.l-” —— 布局(layouts) 我很确定你听说过@Nicole Sullivan的Object Oriented CSS(面向对象的...CSS)(OOCSS)。...我必须立即知道是否可以安全地编辑一个类而不会影响其他任何其他CSS。 我必须立即知道每个class是适合于什么，以防止大脑过载。 总之，我总共使用了七个不同的命名空间。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
