css命名规范

最新推荐文章于 2025-08-17 15:24:04 发布
原创 最新推荐文章于 2025-08-17 15:24:04 发布 · 176 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

本文介绍了CSS命名规范的基本原则，包括使用领域名词进行扩展命名的方法、根据级别不同进行类命名的策略等。通过实际案例帮助读者更好地理解和应用这些规范。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

css命名规范

1.根据领域名词命名

例如领域名词
我们在相应的模块需要用领域名词进行扩展。

2.根据不同的级别，对类进行不同命名

base 初始化和原子类 （简单点）

初始化举例

common 模块化 （尽量域名规范命名）

公共类举例

page 组件 （对域名规范进行扩展命名）

举个栗子举个栗子
代码
这里写图片描述
这是我自己写的demo，有错误希望能够指出来，共同进步~

CSS 命名规范
skysys的研究小屋
09-02 2390
CSS命名由小写的英文单词或组合命名，单词与单词之间通过“-”连接，常用的CSS命名规范有文本命名规范，页面结构命名规范，导航命名以及功能命名等。 CSS 命名一般采用小写英文单词或组合命名，单词与单词之间以"-"分割，而且英文单词不缩写，除非是那种简单一眼看上去就能明白的单词。 文本命名规范 index.css： 一般用于首页建立样式 head.css： 头部样式，当多个页面头部设计风格相同时使用。 base.css： 共用样式。 style.css：独立页面所使用的样式文件。 global.css：页
前端开发中需要注意的CSS命名规则以及书写顺序
清颖的博客
01-12 3416
CSS命名一般是用 BEM 规则命名的。它背后的想法是将用户界面划分为独立的块。 `BEM`的意思就是`B模块(block)`、`E元素(element)`、`M修饰符(modifier)`， 即：`[block]__[element]--[modifier]`。关于CSS属性的书写顺序建议： 一般来说，要先定义好布局，即先写位置、再写大小边距，再写文字样式、背景色，最后写其他属性。
CSS初始化(完美版)
热门推荐
putdoor的博客
12-06 4万+
摘要: 1.本文分两部分代码,一部分结合Github上引用次数最多的necolas的通用浏览器初始化, 2.同时结合实际经验,引用了阿里云css对常用标签进行基本初始化,从而达到在项目开发中直接能引用. 3.如何使用这两部分代码：readme 1.浏览器初始化 目的:消除不同浏览器对HTML文本呈现的差异. 此处引用Github中necolas的浏览器初始化: https:/...
各大网站的页面初始化css代码
memory_qian的专栏
07-30 1831
腾讯QQ官网(http://www.qq.com)样式初始化 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-we
css样式的级别
hhw199112的博客
12-04 2499
Test                 body {             margin: 0px;             border: solid 1px red;         }         #out {             border:solid 1px black;         }         .outdiv {
css命名规则参考
qq575792372的博客
12-25 782
css 命名规范可以避免不必要的样式冲突，命名可以参考 BEM 规范，以下是从网上收集整理过的一些规则，写样式再也不怕想不出来用什么 className 了！！ 1. 页面结构命名 page // 代表整个页面，用于最外层。 wrap // 外套，将所有元素包在一起的一个外围包，用于最外层 wrapper // 页面外围控制整体布局宽度，用于最外层 container // 一个整体容器，用于最外层 head|header // 页头区域，用于头部 nav // 导航条 content /.
CSS 架构与命名规范
欢迎来到这里，希望文章能对你有所帮助
05-02 1742
架构与命名规范
css命名规则
2401_84091321的博客
05-10 1055
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
CSS 命名规范 - BEM
逛街的喵啊
04-22 835
值得收藏的CSS命名规范(规则)常用的CSS命名规则
12-14
CSS命名规范(规则)常用的CSS命名规则  头：header  内容：content/container  尾：footer  导航：nav  侧栏：sidebar  栏目：column  页面外围控制整体佈局宽度：wrapper  左右中：left right center  登录...
CSS命名规范
03-19
css一些标签的命名规范，作为前端的设计人员，对于CSS的接触，就像吃饭一样。所以CSS命名规范 命名是 前端人员必看的。 文章整理了Web前端开发中的常用的一些CSS规范
div css命名规范 css class命名规则(符合SEO规范)
09-22
总之，合理的CSS和DIV命名规范对于提高SEO效果至关重要。一套好的命名规范应该简洁、易读、具有描述性，并且符合网站的结构和内容。在遵循这些规则的同时，开发者还应该不断测试和改进，确保网站的性能和可访问性...
Go语言实战案例:静态资源服务（CSS、JS、图片）
tenkofx的博客
08-15 645
• Gin 提供Static()方法一行就能完成静态文件托管。• 静态文件路径映射和 URL 前缀可以灵活配置。• 结合 HTML 模板，可以很方便地构建完整的前端页面服务。
HTML第三次作业
2301_81538927的博客
08-13 1150
【代码】html第三次作业。
网格布局 CSS Grid
最新发布
韩旭不会敲代码吧的博客
08-17 276
网格布局 CSS Grid
【web站点安全开发】任务4：JavaScript与HTML/CSS的完美协作指南
不羁的博客
08-14 962
本文介绍了JavaScript在前端开发中的核心作用及其与HTML、CSS的协作方式。主要内容包括：1. JavaScript语言特性，通过对比表格展示其与Java在类型系统、面向对象、执行方式等方面的本质区别；2. JavaScript在HTML中的使用方法，包括<script>标签的三种放置位置（head/body/外部文件）；3. 四种常用输出方式（alert/write/innerHTML/console.log）；4. 语法特性比较（变量声明、数据类型、函数定义等）等
CSS aspect-ratio 属性
2401_87008233的博客
08-14 464
CSS的aspect-ratio属性简化了响应式比例布局的实现，只需一行代码即可固定元素宽高比。它支持基本语法如aspect-ratio:16/9，与width/height配合使用时可自动计算另一维度。该属性适用于图片/视频比例控制、自适应正方形创建和响应式卡片布局等场景，但需注意与现代浏览器的兼容性。使用时建议搭配object-fit防止媒体元素变形，并避免与显式尺寸冲突。示例展示了如何通过aspect-ratio实现网格图库的自适应布局，在不同屏幕尺寸下自动调整比例。
CSS保持元素宽高比，固定元素宽高比
chinahcp2008的博客
08-13 289
CSS保持元素宽高比，固定元素宽高比。
CSS命名规范与实践指南
遵循这样的CSS命名规范，可以使代码更清晰，更容易理解和维护。同时，随着项目规模的扩大，命名规范对于代码的组织和管理也变得至关重要。对于初学者来说，尽早养成良好的命名习惯，对于未来的职业发展大有裨益。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值