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

样式和事件的CSS类的命名约定是什么?

样式和事件的CSS类的命名约定是使用小写字母、连字符(-)和下划线(_)进行命名。命名应具有描述性,清晰明确,以便于他人理解和维护代码。以下是一些常见的命名约定:

  1. 使用小写字母:CSS类名应该使用小写字母,因为在HTML中,类名是不区分大小写的,为了避免混淆和错误,最好统一使用小写字母。
  2. 使用连字符或下划线:可以使用连字符或下划线来分隔单词,以提高可读性。例如,可以使用"btn-primary"或"btn_primary"来表示一个主要按钮。
  3. 使用有意义的名称:命名应该具有描述性,能够清晰地表达元素的用途或功能。避免使用无意义的名称或缩写,以免给其他开发人员带来困惑。
  4. 避免使用数字开头:CSS类名不应以数字开头,因为在某些情况下,这可能会导致选择器无效。
  5. 使用BEM命名规范(可选):BEM(Block Element Modifier)是一种常用的CSS命名约定,它将类名分为块(block)、元素(element)和修饰符(modifier)。这种命名约定可以更好地组织和管理CSS代码。

以下是一个示例:

代码语言:css
复制
/* 块 */
.container {
  /* 块的样式 */
}

/* 元素 */
.container__title {
  /* 元素的样式 */
}

/* 修饰符 */
.container--large {
  /* 修饰符的样式 */
}

对于事件的CSS类命名约定,可以根据具体的需求和项目约定进行命名。例如,可以使用"click-handler"表示一个处理点击事件的类。

腾讯云相关产品和产品介绍链接地址:

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

相关·内容

关于CSS样式命名中的下划线

关于CSS样式命名中的下划线 由 Ghostzhang 发表于 2006-06-07 10:15 长久以来,一直习惯了在命名CSS样式名时使用下划线_做为单词的分隔符,这也是在写JS时惯用的写法。...用过CSS hack的朋友应该知道,用下划线命名也是一种hack,如使用_style这样的命名,可以让IE外的大部分浏览器忽略这个样式的定义,所以使用_做为命名时的分隔符是不规范的。...在做CSS检查时会出现错误提示。 为此得找一个能代替下划线而又合规范的符号,当然不是一定要用这种分隔符之类的,只是个人习惯问题。...做了个小测试,将下划线分别用了~、$、```、&和-去代替,结果只有-号是可以使用的,而且对JS的支持也正常,看下测试: 图片 图片 图片 图片 结果是“try1”变成了红色,显示正常。...不过在CSS定义里,经常会用到ID选择符,如果在页面中的ID命名中使用了_,就免不了在CSS样式里出现下划线_了,所以在此还得注意在ID的命名上也要避免使用下划线。

1.3K20

css伪类的说明以及使用(css事件)

CSS伪类的使用(css事件) 转载请注明源地址:http://www.cnblogs.com/funnyzpc/p/7670959.html   之前有开发开发App的时候,有同事问我那个列表的条目按下去背景会变成淡黄色的效果是怎么做的...,然后我若无其事的说了句:用CSS事件啊。。。...,嗯~最终效果实现与否就不得而知啦~;最近稍仔细的翻翻相关文章才知道类似于JavaScript中的事件的东西叫做“伪类”,是CSS中特有的一种东西ヽ(^o^)丿,大多时候很少很少用到,这个叫做“伪类”的东东一般只有...看完,我来先小小地总结下,CSS伪类在每一代CSS标准中都会扩充一些,由于暂时用得最多的大致有以下五个(只是对于我来说哈~( ̄。。...来控制dom的样式   B>大多浏览器对于直接调试带有伪类的样式较为麻烦,比如Chrome的不同版本可以不会显示dom的伪类样式,建议大家先写成普通样式调试成功后再改回dom的伪类样式,这样较为nice

1.2K50
  • css伪类的说明以及使用(css事件)

    CSS伪类的使用(css事件) 转载请注明源地址:http://www.cnblogs.com/funnyzpc/p/7670959.html   之前有开发开发App的时候,有同事问我那个列表的条目按下去背景会变成淡黄色的效果是怎么做的...,然后我若无其事的说了句:用CSS事件啊。。。...,嗯~最终效果实现与否就不得而知啦~;最近稍仔细的翻翻相关文章才知道类似于JavaScript中的事件的东西叫做“伪类”,是CSS中特有的一种东西ヽ(^o^)丿,大多时候很少很少用到,这个叫做“伪类”的东东一般只有...看完,我来先小小地总结下,CSS伪类在每一代CSS标准中都会扩充一些,由于暂时用得最多的大致有以下五个(只是对于我来说哈~( ̄。。...来控制dom的样式   B>大多浏览器对于直接调试带有伪类的样式较为麻烦,比如Chrome的不同版本可以不会显示dom的伪类样式,建议大家先写成普通样式调试成功后再改回dom的伪类样式,这样较为nice

    1.3K20

    css伪类的说明以及使用(css事件)

    CSS伪类的使用(css事件) 转载请注明源地址:http://www.cnblogs.com/funnyzpc/p/7670959.html   之前有开发开发App的时候,有同事问我那个列表的条目按下去背景会变成淡黄色的效果是怎么做的...,然后我若无其事的说了句:用CSS事件啊。。。...,嗯~最终效果实现与否就不得而知啦~;最近稍仔细的翻翻相关文章才知道类似于JavaScript中的事件的东西叫做“伪类”,是CSS中特有的一种东西ヽ(^o^)丿,大多时候很少很少用到,这个叫做“伪类”的东东一般只有...看完,我来先小小地总结下,CSS伪类在每一代CSS标准中都会扩充一些,由于暂时用得最多的大致有以下五个(只是对于我来说哈~( ̄。。...来控制dom的样式   B>大多浏览器对于直接调试带有伪类的样式较为麻烦,比如Chrome的不同版本可以不会显示dom的伪类样式,建议大家先写成普通样式调试成功后再改回dom的伪类样式,这样较为nice

    1.1K70

    css的样式,选择器和框模型

    padding是内边框 包裹的内容是实际的元素 ? 框模型 外边距默认是透明的,因此不会遮挡其后的任何元素。 内边距、边框和外边距都是可选的,默认值是零。但是很多元素都有自己的外边框和内边框。...通过 * { margin: 0; padding: 0; } 清除所有元素的默认边框的样式。 元素框的占用计算是需要把框的宽度计算起来的。 ?...这意味着有些默认没有边框的元素,必须设置一个边框样式才能设置它的边框宽度。...合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 ? margin相互触碰 同一个元素,内容和内边框,边框宽度都是0时,上外边框和下外边框也会合并。...通过margin碰撞合并能使网页最上和最下的边框和元素之间的边框保持一致(如果是同一种类型样式的元素)。而不会中间是上下的两倍。

    1.4K30

    2022 最受欢迎的 CSS 类名和 ID 分别是什么

    CSS是用来布局和格式化网页和其他媒体的语言。它是 Web 的三种主要语言之一,与HTML(用于结构)和JavaScript(用于行为)并列。...每一年,我们都看到CSS的规模在增长,2022年也不例外。 今天,我们来看一上,2022 最受欢迎的 CSS 类名和 ID 分别是什么。 2020年和2021年,网络上最流行的类名是 active。...Font Awesome 的fa、fa-*前缀仍然排在第二和第三。然而,wp-*类名称在排名中悄然上升,升至第四位。它们现在出现在31%的页面上,2021年时为20%。...我们还看到诸如 has-large-font-size 这样的类名出现了,这些是在新的 WordPress 块状编辑器中使用的。...content 这个名字再次成为最受欢迎的 ID名称,其次是 footer,和 header。以 fb_开头的ID表示使用了Facebook的小工具。

    41620

    css3系列-2.css中常见的样式属性和值

    css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 鼠标光标属性...列表样式 定位属性 浮动和清除浮动 滚动条 样式显示和隐藏 字体与颜色 font-family:微软雅黑;/*字体名称(类型):微软雅黑,黑体,楷体,宋体*/ font-size: 20px;/*字体大小...浮动和清除浮动 css里面浮动用的还是挺多的,要好好学哦!不会的关注我的公众号,我会教你的哦!公众号:全栈学习笔记 码字太难了!给个关注吧!...3.第三种方式 父容器使用伪类after和zoom。 伪类选择器还没讲过,争取这两天写一份详细的选择器文章。...*/ overflow-y: hidden;/*设置竖直的滚动条*/ overflow-x: scroll;/*设置横向的滚动条*/ } 样式显示和隐藏 样式隐藏分为占位隐藏以及非占位隐藏

    1.3K20

    CSS中的伪类和伪元素

    定义 伪类 CSS 伪类 是添加到选择器的关键字,指定要选择的元素的特殊状态。 例如,:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。.../* 所有用户指针悬停的按钮 */ button:hover { color: blue; } 伪类存在的意义是为了通过选择器,格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。...区别 下面是一个简单的html列表片段: 我是第一个 我是第二个 如果想要给第一项添加样式,可以在为第一个 添加一个类,并在该类中定义对应样式...,我们可以通过给设置第一个 的:first-child伪类来为其添加样式。...总结 1.伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息; 2.伪元素本质上是创建了一个有内容的虚拟容器; 3.CSS3中伪类和伪元素的语法不同; 4.可以同时使用多个伪类,而只能同时使用一个伪元素

    2.8K10

    一文了解路由平台的 Cisco IOS 和 IOS XE 命名约定,看这篇就够了!

    TOC 概述 命名约定一致性 对某事物进行任何命名约定的全部意义在于使事物保持一致和统一。...遵守约定可为专业人员提供基本规则,让他们坚持已知的内容,为现在和未来的员工以及使用思科产品的人员提供清晰简洁的信息。...本文概述了Cisco 路由平台的 Cisco IOS 命名约定,包括 IOS XE 版本 3S、16 和 17 以及 IOS Classic 版本 15M&T、15S 和 15 特殊和早期部署。...IOS XE 的优势在于为企业、有线和无线接入、聚合、核心和广域接入网络提供单一操作系统的优势。...重建编号通常表示某些错误修复将发生的位置,重建可以有数字约定、字母、小写字母约定,甚至两者的混合。

    1.4K21

    几行样式代码,让你的网站全站和图片都变成灰色|CSS样式灰色代码

    如果需要将你的网站全站和图片变灰,只需要加几段css控制就可以了 效果展示 ? ?...小编这里试用了下面的几种方法,一般用方法一的效果会更好一些,用其他的几种方法,或多或少的原来网站的部分浮动的样式或者点击效果会失效,导致功能不能用了。...但是第一种方法的话,原来的网站样式或者效果都还不会出现很大的问题,起码我当时试的时候,没有看到有问题的地方,大家也可以多多的尝试一下,不同的几种方法间的区别 方法一 CSS,可以在网页/模板的HTML代码和 之间插入: css"> html { filter: progidXImageTransform.Microsoft.BasicImage...有一些网站FLASH动画的颜色不能被CSS滤镜控制,可以在FLASH代码的和之间插入:

    1.1K20

    Python里的类和对象是什么?

    面向对象编程的核心概念之一就是“类”。本文将详细介绍 Python 中的类以及类与对象之间的关系。...类(Class)的概念类可以看作是一种“蓝图”,它是一种将数据(属性)和操作这些数据的方法(函数)封装在一起的结构。就像建筑师使用蓝图来建造房屋一样,程序员使用类来创建对象。...例如,我们可以定义一个Human类,它有眼睛、耳朵、鼻子和嘴巴等属性。通过这个类,我们可以创建具体的人类对象,如oxxo,这个对象将具有类定义的所有属性。...__init__是类的一个特殊方法,每当创建类的新实例时都会自动调用它。...,下面的例子给 Human 类定义了 say 和 play 两个方法。

    8910

    预处理详解(#和##运算符、命名约定、#undef​​、命令行定义​、条件编译、头文件的包含​)

    一、#和## 1.1#运算符 #运算符​ #运算符将宏的一个参数转换为字符串字面量。它仅允许出现在带参数的宏的替换列表中。​ #运算符所执行的操作可以理解为”字符串化“。​...## 被称 为记号粘合 这样的连接必须产生一个合法的标识符。否则其结果就是未定义的。 这里我们想想,写一个函数求2个数的较大值的时候,不同的数据类型就得写不同的函数。​...int_max(2, 3); printf("%d\n", m); float fm = float_max(3.5f, 4.5f); printf("%f\n", fm); return 0; } 二、命名约定​...一般来讲函数的宏的使用语法很相似。...#include 和 #include "filename.h"有什么区别? ​ 答:#include :这是用于包含系统提供的头文件的常用格式。

    19410

    Facebook 重构:抛弃 Sass u002F Less ,迎接原子化 CSS 时代

    CSS 权重也不是什么问题,因为我们使用的是最简单的类选择器。 我们现在通过 html 标签来添加样式,发现了一些有趣的事儿: 我们增加新功能的时候,样式表的增长减缓了。...你还需要预先开发好一个不错的实用工具/原子样式表,然后才能开始开发新功能。 如果实用工具/原子 CSS 是由别人制作的,你将不得不首先学习类命名约定(即使你知道 CSS 的一切)。...传统卡片样式写法: Tailwind 卡片样式写法: 它并不是真的为所有网站提供一些唯一的实用工具 CSS,取而代之的是,它提供了一些公用的命名约定。...此时,你可能想知道为什么要使用原子 CSS 而不是 Tailwind CSS?强制执行原子 CSS 规则的一个规则,一个类名,有什么好处?你最终会得到更大的 html 标签和更烦人的命名约定吗?...探索原子 CSS-in-JS 原子 CSS-in-JS 可以被视为是“自动化的原子 CSS”: 你不再需要创建一个 class 类名约定 通用样式和一次性样式的处理方式是一样的 能够提取页面所需要的的关键

    3.5K50

    Facebook 重构:抛弃 Sass Less ,迎接原子化 CSS 时代

    CSS 权重也不是什么问题,因为我们使用的是最简单的类选择器。 我们现在通过 html 标签来添加样式,发现了一些有趣的事儿: 我们增加新功能的时候,样式表的增长减缓了。...你还需要预先开发好一个不错的实用工具/原子样式表,然后才能开始开发新功能。 如果实用工具/原子 CSS 是由别人制作的,你将不得不首先学习类命名约定(即使你知道 CSS 的一切)。...传统卡片样式写法: ? Tailwind 卡片样式写法: ? 它并不是真的为所有网站提供一些唯一的实用工具 CSS,取而代之的是,它提供了一些公用的命名约定。...此时,你可能想知道为什么要使用原子 CSS 而不是 Tailwind CSS?强制执行原子 CSS 规则的一个规则,一个类名,有什么好处?你最终会得到更大的 html 标签和更烦人的命名约定吗?...探索原子 CSS-in-JS 原子 CSS-in-JS 可以被视为是“自动化的原子 CSS”: 你不再需要创建一个 class 类名约定 通用样式和一次性样式的处理方式是一样的 能够提取页面所需要的的关键

    3K10

    vue.js引入外部CSS样式和外部JS文件的方法

    学习Vue.js动画时,需要引入一个animate.css,如何全局引入外部文件呢? 一.引入外部CSS样式文件 1. 在app.vue中下直接引入对应的路径 ?...image 使用@import引入外部css,作用域是全局的,也可在相应的单vue组件引入,import并不是引入代码到里面,而是发起新的请求获得样式资源,并且没有加scoped.../static/font/iconfont.css"; 注:如果有样式时,应该放在#app上面引入,不然引入不成功! 2....@import改成引入外部样式 ? image 二. 引入外部JS文件 1....Velocity函数,那么要在Velocity加密算法的js脚本的最后,使用如下代码,将Velocity函数导出: export { Velocity } 注:外部脚本js不要放在components

    14.7K10
    领券