前端开发中需要注意的CSS命名规则以及书写顺序

1、CSS的命名——BEM规则:

CSS命名一般是用 BEM 规则命名的。它背后的想法是将用户界面划分为独立的块。
BEM的意思就是B模块(block)E元素(element)M修饰符(modifier)
即:[block]__[element]--[modifier]

模块和子元素之间用两个下划线分隔(如:order__security),子元素和修饰符之间用两个中划线分隔,(如:content__person–selected)。

● 块 Block:组件的最外层父元素定义为块。
● 元素 Elemnt:组件内部可以是一个或多个称为元素的子元素。
● 修饰符 Modifier:块或元素可能具有由修饰符表示的变体。

关于子元素E,有两种写法:

  • 第一种:按照层级嵌套来写,如 block__ele1-son-inner,但是这样写会导致命名过长;

  • 第二种:扁平化,一个模块下的所有子元素,无论相互层级如何,都直接连接这个模块,如
    block__inner,但是这样就无法表示层级关系,命名时也可能会出现冲突。

命名注意:

  1. 一律小写;
  2. 尽量用英文;
  3. 尽量不缩写,除非一看就明白的单词。

2、关于CSS属性的书写顺序建议:

一般来说,要先定义好布局,即先写位置、再写大小边距,再写文字样式、背景色,最后写其他属性。

  1. 位置属性:position, top, right, z-index, display, float 等
  2. 自身大小及边距:width, height, padding, margin 等
  3. 背景:background, border 等
  4. 文字样式:font-family font-size font-style font-weight font-varient color 等
  5. 文本属性:text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow 等
  6. 其他:border-radius, animation, transition等

如:

.wrapper{display: block;position: relative;width: 100px;height: 100px;margin: 0 10px;padding: 20px 0;font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;color: #333;background: rgba(0,0,0,.5);border-radius: 10px;
}

目的:减少浏览器回流(reflow),提升浏览器渲染dom的性能

浏览器的渲染流程:

① 解析html构建 DOM 树,解析css构建 CSSOM 树:将html解析成树形的数据结构,将css解析成树形的数据结构。
② 构建 Render 树:DOM树和CSS树合并之后形成的render树。
③ 布局(Layout):有了render树,浏览器已经知道那些网页中有哪些节点,各个节点的css定义和以及它们的从属关系,从而计算出每个节点在屏幕中的位置和大小
④ 绘制(Painting):根据css样式规则将计算好的盒模型呈现出来。

布局阶段的主要任务是生成盒子,计算它们的位置和大小;绘制阶段则是根据css样式规则将计算好的盒模型呈现出来。

所以说,如果元素的 位置 和 大小 出现变动,就需要浏览器再次回到布局阶段重新计算,计算后再绘制,这就是 回流;而如果元素的颜色等样式属性出现变动,则无需计算,只需再次绘制,这就是 重绘

css样式解析到显示至浏览器屏幕上就发生在 ②③④ 步骤,浏览器并不是一获取到css样式就立马开始解析,而是根据css样式的书写顺序,将之按照 dom 树的结构完成构建,然后开始遍历每个树结点的 css 样式进行解析,此时 css 样式的遍历顺序完全是按照之前的书写顺序。

在解析过程中,一旦浏览器发现某个元素的定位变化影响布局,则需要倒回去重新渲染。正如按照这样的书写顺序:

.test{width: 100px;height: 100px;background-color: red ;position: absolute;
}

当浏览器解析到 position 的时候突然发现该元素是绝对定位元素需要脱离文档流,而之前却是按照普通元素进行解析的,所以不得不重新渲染,解除该元素在文档中所占位置,然而由于该元素的占位发生变化,其他元素也可能会受到它回流的影响而重新排位。最终导致③步骤(布局)花费的时间太久而影响到④步骤的显示,影响了用户体验。

另:一些可以缩写的属性建议缩写,如padding,在值不同的情况下,还是不要拆开的好。代码看起来会简略很多。
建议:

.test{padding: 8px 6px 4px 2px;margin:8px 6px;
}

不建议:

.test{padding-top: 8px;padding-right:6px;padding-bottom:4px;padding-left:2px;
}

我们维护的项目代码来自不同的开发者,风格比较多样化。尽量养成良好的代码习惯!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/617771.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SPARK--cache(缓存)和checkpoint检查点机制

SPARK–cache(缓存)和checkpoint检查点机制 rdd的特性 缓存和checkpoint 作用都是进行容错rdd在计算是会有多个依赖,为了避免计算错误是从头开始计算,可以将中间* 依赖rdd进行缓存或checkpoint缓存或checkpoint也叫作rdd的持久化一般对某个计算特别复杂的…

[Flutter] extends、implements、mixin和 abstract、extension的使用介绍说明

类创建:abstract(抽象类)、extension(扩展) 1.abstract(抽象类) dart 抽象类主要用于定义标准,子类可以继承抽象类,也可以实现抽象类接口。抽象类通过abstract 关键字来…

一端进,两端出(队列)C++

*给定一个输入受限的双端队列(即一个端点允许插入和删除,另一个端点只允许删除的双端队列)和一个长度为 N 的插入序列。插入序列中的元素两两不同。你需要将插入序列中的元素按顺序依次插入到给定队列中。 在插入过程中和插入完成后的任意时…

【软件测试】学习笔记-静态测试方法

这篇文章详细讨论人工静态测试方法和自动静态测试方法,来帮你理解研发流程上是如何保证代码质量的,以及如何搭建自己的自动静态代码扫描方案,并且应用到项目的日常开发工作中去。 人工静态方法本质上属于流程上的实践,实际能够发…

QEMU源码全解析 —— PCI设备模拟(7)

接前一篇文章: 上一回讲解了pci_edu_realize函数中的pci_register_bar函数,本回开始对于edu设备的MMIO读写函数进行解析。 操作系统与PCI设备交互的主要方式是PIO和MMIO。MMIO虽然是一段内存,但是其没有EPT映射,在虚拟机访问设备…

Smallpdf扫描、转换、压缩、编辑、签名PDF

【应用名称】:Smallpdf: 扫描、转换、压缩、编辑、签名PDF 【适用平台】:#Android 【软件标签】:#Smallpdf 【应用版本】:1.71.0 【应用大小】:150MB 【软件说明】:通过 Smallpdf,您可以&…

数据结构 模拟实现二叉树(孩子表示法)

目录 一、二叉树的简单概念 (1)关于树的一些概念 (2)二叉树的一些概念及性质 定义二叉树的代码: 二、二叉树的方法实现 (1)createTree (2)preOrder (…

资源三号03星-立体测绘卫星星座

资源三号03星作为我国民用高分辨率立体测图卫星资源三号系列的第三颗卫星,在资源三号02星技术状态的基础上进行了继承和适当优化,设计寿命由资源三号02星的5年延长至8年,星上搭载了三线阵立体测绘相机、多光谱相机和业务化应用的激光测高仪&a…

【模型评估 07】过拟合与欠拟合

在模型评估与调整的过程中,我们往往会遇到“过拟合”或“欠拟合”的情况。如何有效地识别“过拟合”和“欠拟合”现象,并有针对性地进行模型调整,是不断改进机器学习模型的关键。特别是在实际项目中,采用多种方法、从多个角度降低…

C#使用CryptoStream类加密和解密字符串

目录 一、CrytoStream的加密方法 二、CrytoStream的解密方法 三、实例 1.源码Form1.cs 2.类库Encrypt.cs 3.生成效果 在使用CryptoStream前要先引用命名空间using System.Security.Cryptography。 一、CrytoStream的加密方法 记住,不能再使用DESCryptoServi…

DrGraph原理示教 - OpenCV 4 功能 - 边界填充

今天简单来看一下OpenCV中的边界填充 param src Source image. param dst Destination image of the same type as src and the size Size(src.colsleftright, src.rowstopbottom) . param top the top pixels param bottom the bottom pixels param left the left pixels par…

Photoshop 2024 (PS2024) v25 直装版 支持win/mac版

Photoshop 2024 提供了多种创意工具,如画笔、铅笔、涂鸦和渐变等,用户可以通过这些工具来创建独特和令人印象深刻的设计效果。增强的云同步:通过 Adobe Creative Cloud,用户可以方便地将他们的工作从一个设备无缝同步到另一个设备…

docker关闭所有容器的命令

关闭所有容器的命令是docker stop $(docker ps -aq),其中: 使用docker ps -a命令列出所有的容器; 实现方法1:使用docker ps -a命令获取所有容器的ID,然后使用docker stop命令逐个停止容器。 实现方法2:使用…

STM32L051使用HAL库操作实例(14)- ADC采集电压

目录 一、前言 二、ADC外设简要说明 三、STM32CubeMX配置(本文使用的STM32CubeMX版本为6.1.2) 1.MCU选型 2.时钟使能 3.外部时钟配置 4.串口配置 5.ADC引脚配置 6.配置STM32CubeMX生成工程文件 7.点击GENERATE CODE生成工程文件 四、工程源码 …

Python基础知识:整理13 利用pyecharts生成折线图

首先需要安装第三方包pyecharts 1 基础折线图 # 导包,导入Line功能构建折线图对象 from pyecharts.charts import Line # 折线图 from pyecharts.options import TitleOpts # 标题 from pyecharts.options import LegendOpts # 图例 from pyecharts.options im…

mp4文件全部转换为mp3

问题 今天突发奇想,想把mp4视频转换为mp3来收听,于是想到了ffmpeg工具 步骤 安装ffmpeg环境 要在 Windows 上配置 FFmpeg 环境,你可以按照以下步骤进行操作: 下载 FFmpeg: 首先,你需要下载 FFmpeg 的 W…

一个成功的camera案例:ros2+gazebo+摄像头

各位看:随着大物体的移动,在涉嫌头的位置也发生了改变-----右上角那个/camera的位置也变了 右上角那个是摄像头图案,以下是仓库链接: ros-ign-gazebo-camera: https://github.com/arashsm79/ros-ign-gazebo-camera.git一个ros2摄…

初识物联网

1:什么是IOT: 物联网的英文名称是Internet of Things。IoT则是Internet of Things的缩写。因此, 物联网 IoT。 通俗地说,物联网是互联网的一种拓展。我们知道互联网是由无数的计算机和智能手机交错连接而编织成的一张网。而正是有了像NodeM…

Spring Cloud + Vue前后端分离-第12章 通用权限设计

源代码在GitHub - 629y/course: Spring Cloud Vue前后端分离-在线课程 Spring Cloud Vue前后端分离-第12章 通用权限设计 这一章我们不依赖第三方框架,我会从权限相关表的设计,到权限的配置,到权限的拦截,带大家一步一步的做出…

代码随想录算法训练营第十六天 | 110. 平衡二叉树、257. 二叉树的所有路径、404.左叶子之和

题目链接:leetcode 110. 平衡二叉树 文章讲解:代码随想录 110. 平衡二叉树讲解 视频讲解:后序遍历求高度,高度判断是否平衡 | LeetCode:110.平衡二叉树 思路和解法 题目: 给定一个二叉树,判…