你不知道的CSS规范

已于 2022-08-13 00:29:27 修改
阅读量139 收藏
点赞数
文章标签： css
于 2022-08-01 09:54:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq1005327556/article/details/126094355
版权

BEM 命名方法论

介绍

BEM是由Yandex团队提出的一种前端命名方法论。简单的约定规范，让你的前端代码更容易阅读和理解。

BEM

B（block块）E（element元素）M（modifier修饰符）

.block{}
.block__element{}
.block--modifier{}

.block 代表了更高级别的抽象或组件。
.block__element 代表.block的后代，用于形成一个完整的.block的整体。
.block–modifier代表.block的不同状态或不同版本。
个人理解：.水果__苹果--红富士的

更详细的 BEM 介绍，参考

谷歌上搜百度
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS代码规范与命名规范
04-18
CSS规范常见问题的解决方法
CSS编程规范
怒放的生命的博客
11-14 1109
CSS编程规范
CSS 样式书写规范,css样式书写规范
weixin_42535703的博客
08-04 4721
在工作当中css样式是非常重要的，但是咋样书写css样式更重要。一、css书写规范1、定位属性：position display float left top right bottom overflow clear z-index2、自身属性：width height padding border margin background3、文字样式：font-fami...
CSS的BEM规范
Kylin的博客
11-29 3171
BEM规范学习 在实际项目中，经常可以看到以下类似这样的css样式，这种就是CSS命名规范——BEM思想 BEM 是块（block）、元素（element）、修饰符（modifier）的简写 主要缺点就是命名很长 __和--的区别 __表示的就是下级元素 --表示的是不同的形态 就是另一个类名，另一种样式，就像overview__row中有公共的样式，而overview__row--right中具有非公共的样式，是特有的样式 &符号表示嵌套的上一级 之所以是两个连接符和
CSS的代码规范
weixin_58437923的博客
12-02 1154
任何一个项目或者系统开发之前都需要定制一个开发约定和规则，这样有利于项目的整体风格统一、代码维护和拓展。由于Web项目开发的分散性、独立性、整合的交互性等，所以定制一套完整的约定和规则显得尤为重要。 1.目录结构命名规范 存放CSS样式文件的目录一般命名为style或css。2.CSS样式文件的命名规范 在项目初期，会把不同类别的样式放于不同的CSS文件，这是为了CSS编写和调试的方便；在项目后期，为了网站性能上的考虑会整合不同的CSS文件到一个CSS文件，这个文件一般命名为style.css或css.c
CSS 样式书写顺序及规范
WangMin@汪末末
10-12 3194
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin 在项目中，大部分前端程序员都没有按照良好的CSS书写规范来写CSS代码，每次写css样式都是用到什么就在样式表后添加什么，完全没有考虑到样式属性的书写顺序对网页加载代码的影响。后来逐渐才知道正确的样式顺序不仅易于查看，并且也属于css样式优化的一种方式。下面就开始学习吧！！ 各种类型属性的书写顺序及作用 书写顺序 优先级第一定位属性：position display float left
CSS-BEM命名规范
qq_35469342的博客
09-30 1502
CSS-BEM命名规范，让维护css不在头疼 相信大部分前端工作人员都不太喜欢写CSS，更不要说修改别人的CSS的样式了。 本文将简单介绍CSS-BEM使用规范,让自己/他人维护起CSS不在头疼。 前言 BEM（块、元素、修饰符）是一种基于组件的 Web 开发方法。其背后的想法是将用户界面划分为独立的块。这使得即使使用复杂的 UI 也能轻松快速地进行界面开发，并且允许重用现有代码而无需复制和粘贴。该笔记将围绕BEM核心模块,块（block）、元素（element）、修饰符（modifier)进行简述。 贴
CSS——CSS书写规范
流楚丶格念的博客
06-29 4121
空格规范 【强制】 选择器 与 { 之间必须包含空格。 示例： .selector { } 【强制】 属性名 与之后的：之间不允许包含空格，：与属性值之间必须包含空格。 示例： font-size: 12px; 选择器规范 【强制】 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。 示例： /* good */ .post, .page, .comment { line-height: 1.5; } /* bad */ .post, .page, .comment
css书写规范
qq_59950604的博客
01-04 1365
css的书写格式 ： 标签名{ css的属性名：属性值； } css应该写在哪里？ 书写的规范：css写在style标签中，style标签写在head标签里面，title标签下面 注意点：在css中，标点符号都是英文状态的！！/*css的注释ctrl+/*/ <head> <metacharset="UTF-8"> <title>Document</title> ...
CSS的BEM命名规范
cs_zhao18的博客
06-13 1057
BEM的意思就是块（block）、元素（element）、修饰符（modifier），是由Yandex团队提出的一种CSS命名方法。其背后的想法是将用户界面分为独立的块。即使使用复杂的UI，这也使界面开发变得容易和快速，并且允许重用现有代码而无需复制和粘贴。Block一个功能独立的页面组件，可以重复使用块不应影响其环境，这意味着不应设置块的外部几何形状（边距）或位置 Element块的复合部分，不能单独使用元素全名的结构为block-name__element-name 一个元素始终是块的一部分，因此元
css命名规范
qq_27104997的博客
04-28 3159
BEM 命名规范 什么是 BEM 命名规范 Bem 是块(block)、元素(element)、修饰符(modifier)的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。 - 中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。 -- 双中线 代表不同的状态，类型。 __ 双下划线: 双下划线用来连接块和块的子元素 _单下划线：单下划线用来描述一个块或者块的子元素的一种状态 BEM 是一个简单又非常有用的命名约定。让你的前端代码更容易阅读和...
CSS命名规范
03-19
css一些标签的命名规范，作为前端的设计人员，对于CSS的接触，就像吃饭一样。所以CSS命名规范 命名是 前端人员必看的。 文章整理了Web前端开发中的常用的一些CSS规范
详解css BEM书写规范
09-22
BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。本文主要介绍了详解css BEM书写规范,非常具有实用价值，需要的朋友可以参考下
CSS编码规范.md
06-10
一份良好的编码规范有助于团队的高效执行，本资源介绍了常见的 CSS 编码中遇到的问题，以及给出的标准建议，命名规范，书写规范，属性、值与单位规范等
CSS代码规范.pdf
04-02
CSS代码规范.pdfCSS代码规范.pdfCSS代码规范.pdfCSS代码规范.pdfCSS代码规范.pdfCSS代码规范.pdf
JavaWeb-01：HTML,CSS,JavaScript,DOM的理解
博客
05-17 139
HTML,CSS,JavaScript,DOM的理解
CSS中的writing-mode属性：解锁文本布局新维度
最新发布
艾恩小灰灰的博客
05-21 205
属性定义了文本在块级元素中的书写方向，它决定了文本是水平还是垂直排列，以及是从左到右、从右到左，还是从上到下显示。这对于支持多种语言的排版（如东亚语言的竖排文本）和创造非传统布局至关重要。属性虽小，却蕴藏着改变文本布局的巨大能量。无论是为了文化尊重、设计创新还是提升用户体验，掌握并灵活运用这一属性，都能让你的设计作品更加丰富多彩。随着Web技术的不断进步，我们有理由相信，未来将在更多领域展现出其独特的魅力。希望本文能够激发你对CSS这一鲜为人知特性的探索兴趣，开启你的创意之旅。
css sprites如何使用
codedadi的博客
05-18 393
注意：确保在定位图标时考虑到大图像的尺寸和每个图标的尺寸。例如，如果每个图标都是32x32像素的，并且它们在大图像中水平排列，那么第一个图标的background-position是0 0，第二个图标的background-position是-32px 0，依此类推。在CSS中，定义.icon类以设置所有图标的通用样式（如大小、背景图像等），并为每个图标定义特定的background-position。/* 图标2在大图像中的位置（假设每个图标宽度为32px） *//* 图标1在大图像中的位置 */
css笔记总结2
fishniu35的博客
05-15 440
标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。4.类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。2.类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。3.id 选择器和类选择器最大的不同在于使用次数上。
css开发规范pdf
11-02
CSS开发规范PDF是一种以文档形式呈现的CSS编码规范指南，旨在帮助Web开发人员更好地编写可维护、可扩展且一致的CSS代码。以下是关于CSS开发规范PDF的一些重要内容和意义。 首先，CSS开发规范PDF包含了CSS代码的书写...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值