首页
学习
活动
专区
工具
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.2K20

    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小工具。

    40620

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

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

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

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

    1.1K20

    Python里对象是什么

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

    8310

    预处理详解(###运算符、命名约定、#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 :这是用于包含系统提供头文件常用格式。

    14710

    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

    解决Laravel自定义引入命名空间问题

    1.问题描述 在Laravel中引入了一个第三方验证码Code.class.php,在使用时候发现如果不给这个设置命名空间,那么需要在使用时用require引入这个文件,引入后在 new Code...()时会报Class ‘App\Http\Controllers\Admin\Code’ not found,即找不这个错误,发现系统在当前文件命名空间去找这个。...2.解决过程 通过修改命名空间,改变文件存放位置,都不能解决这个错误,百度后发现应该自定义加载问题,即命名空间使用正确,但是laravel没有加载这个文件。...3.总结 在自定义不使用命名空间时可以直接require文件进行使用,但在new \Code时要加上\指明根命名空间。...以上这篇解决Laravel自定义引入命名空间问题就是小编分享给大家全部内容了,希望能给大家一个参考。

    1.7K31
    领券