首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

常用css命名

在CSS开发中,合理的命名规范对于提高代码的可读性和可维护性至关重要。以下是一些常用的CSS命名规范及其优势:

常用CSS命名规范

  • 小写字母和中横线分隔:所有CSS类名和ID名应该使用小写字母,避免使用驼峰式或全大写字母。当需要扩展类名时,使用中横线“-”作为分隔符。
  • 有意义的命名:选择能够明确描述元素功能或状态的名称,例如.btn-primary代表主要按钮。
  • 避免使用ID选择器:ID通常用于唯一标识页面上的特定元素,而类可以用于多个元素,因此使用类能更好地实现样式的复用。
  • 模块化命名:使用模块化的命名方式,如.module-name,能帮助识别元素所属的区域或功能。
  • 语义化命名:命名应反映元素的语义,而非表现形式,例如使用.search代替.blue-input来表示搜索框。
  • BEM命名法:BEM是一种流行的命名策略,由Block(块)、Element(元素)和Modifier(修饰符)组成,有助于保持代码的一致性和可维护性。

命名规范的优势

  • 提高可读性:使用有意义的名称使代码更容易阅读和理解。
  • 增强可维护性:一致的命名便于识别和修改特定元素或类。
  • 促进团队协作:共同的命名约定有助于团队成员协作和保持代码风格的一致性。

遵循这些CSS命名规范可以显著提高代码的质量和开发效率,同时也有助于团队成员之间的有效沟通。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • CSS命名规范

    (一)常用的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

    1.6K20

    常用的命名

    命名参考 常用的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} 很显然第二种传达的意义更加明确

    80650

    NEC CSS命名规则

    、各种列表、评论、搜索等元件 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.6K30

    css规范化命名

    好吧,我的代码虽然实现了和设计一样的界面,但是还是太臭了,类的命名都是特别的差劲。。找了命名规范,,拿来共享一下,警告自己,,代码不仅要实现功能,更要优美,华丽。。...每次写之前写之后都想办法精简代码, 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

    88210

    HTML5+CSS3命名规范

    前言 任何代码编程都有各自特点的常用命名规范,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 { } 注释书写规范 行间注释-直接写于属性值后面,如:

    73720

    CSS常用单位

    CSS常用单位 CSS的长度单位主要有%、px、in、cm、ch、mm、ex、pt、pc、em、rem、vw、vh、vmin、vmax,按照单位的计算方式大致可以分为绝对长度单位、相对长度单位、百分比单位...绝对长度单位 px 像素 通常而言,一个CSS像素代表屏幕设备的一个像素点,但是对于高分辨率屏幕而言一个CSS像素往往占多个设备像素,也就是说有多个屏幕像素点来表示1px,1px = 1in / 96。...div> ex ex是指所用字体中小写x的高度,但不同字体x的高度可能不同,对于很多字体来说1ex ≈ 0.5em,所以很多浏览器在实际应用中取em值一半作为ex值,ex单位在实际中常用于微调...DOCTYPE html> CSS单位 css"> html{.../7-css-units-you-might-not-know-about.html

    1.5K20
    领券