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

遵循BEM约定编写css flex代码的最佳方式是什么?

遵循BEM约定编写CSS Flex代码的最佳方式是将BEM命名规范与Flex布局结合使用。BEM(块、元素、修饰符)是一种命名约定,用于创建可重用的、可扩展的和易于维护的CSS代码。

在使用Flex布局时,可以按照以下步骤来编写CSS代码:

  1. 块(Block):将Flex容器作为块,使用一个有意义的类名来命名,表示该容器的作用或功能。例如,可以使用类名.container来表示Flex容器。
  2. 元素(Element):在Flex容器内部,使用类名来表示Flex项目(子元素)。这些类名应该与块的类名相关联,并且应该描述元素的作用或功能。例如,可以使用类名.container__item来表示Flex项目。
  3. 修饰符(Modifier):如果需要对特定的块或元素应用不同的样式,可以使用修饰符类名。修饰符类名应该与块或元素的类名相关联,并且应该描述所应用的样式变化。例如,可以使用类名.container__item--highlighted来表示高亮的Flex项目。

通过遵循BEM约定编写CSS Flex代码,可以实现以下优势:

  1. 可读性和可维护性:BEM约定提供了一种清晰的命名结构,使得代码易于理解和维护。开发人员可以快速了解代码的结构和目的。
  2. 可重用性:BEM约定鼓励创建可重用的CSS组件,使得在不同的项目中可以轻松地重用这些组件。
  3. 扩展性:BEM约定允许在不破坏现有代码的情况下扩展样式。通过添加新的块、元素或修饰符,可以轻松地扩展现有的样式。

BEM约定与腾讯云的相关产品和产品介绍链接地址无直接关联。

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

相关·内容

如何使用CSS命名规范提高您编码效率

在本文中,我们将深入探讨CSS命名约定世界,展示实际示例以及它们为您开发过程带来好处。 在前端开发中,编写干净高效代码可以使程序员变得更优秀。...无论选择了哪种开发方式,都需要使代码易于阅读和维护。这导致了在Web开发中采用不同概念,如基于组件开发、代码审查、敏捷方法等。清晰代码开发是其中之一,它专注于编写易于阅读和维护代码。...CSS命名原则和最佳实践 在前一节中定义了CSS命名约定,我们将讨论在编写代码时应遵循最佳实践以及CSS类名一致命名准则。...BEM(块、元素、修饰符):BEM是一种流行CSS命名约定,由俄罗斯科技公司Yandex开发,旨在提供一种模块化CSS样式方法,提供代码可重用性,并使大规模CSS维护成为可能。...使用BEM,我们还可以在CSS编写样式时表示一个元素是特定类子元素。

39030
  • 【编程陷阱】编写出色C++代码遵循注意事项和最佳实践

    解决方案 按行获取字符串 对于字符数组:cin.getline(ch,MaxSize); 对于字符串:getline(cin,str); 两者使用scanf都不加& /***字符数组***/ //输入方式一...char ch[100] = { 0 }; cin.getline(ch, sizeof(ch)); //输入方式二 char ch2[100] = { 0 }; scanf("%s", ch2);...//不加&,而%c需要加& /***字符串***/ //输入方式一 string s1; getline(cin,s1); //输入方式二 string s2[100] = { 0 };...string *p1=&s1;//不是string *p1=s1; *p代表整个12字符串 cout<<*p1<<endl; //输入方式二 string s2[...继承注意点 4.1 构造函数 派生类构造函数,需要保证调用基类构造【默认调用基类无参构造,如果基类创新提供了新有参构造,则派生类构造易出错】,见3.3 牛牛书 解决办法:最好每次提供新构造函数时都再提供一个无参默认构造函数

    15710

    React 设计模式 0x4:样式

    在 React 中有不同方法来实现这一点。 # 样式化类型 在 React 和网站或 Web 应用程序中,有不同样式化应用程序方式。...# 外部/引用 CSS 外部 CSS 是网站或 Web 应用程序样式化一种方式,它在文件中编写所有样式,并在应用程序或组件内引用它。..., React 原生支持 缺点: 可能会导致性能问题 # Tailwind CSS 现在许多开发人员都使用 Tailwind CSS,因为在 React 应用程序中编写起来更快并且易于维护。... ); } export default Example; # 样式规范 前面已经介绍了不同样式类型,现在我们将介绍编写样式一些常见约定。...# BEM BEM 是一种命名约定,它可以帮助您更好地组织样式。BEM 代表块(block)、元素(element)和修饰符(modifier),它们可以组合在一起,用于将大型界面拆分为独立块。

    1.3K20

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

    先抛出一个令人开心结论,新 CSS 编写和构建方式让 Facebook 主页减少了 80% CSS 体积。 什么是原子 CSS?...你可能听说过各种 CSS 方法,如 BEM, OOCSS… Danger buttonbutton> 复制代码 现在...人们通常手工编写实用工具/原子 CSS,精心制定命名约定。但是很难保证这个约定易于使用、保持一致性,而且不会随着时间推移而变得臃肿。 这个 CSS 可以团队协作开发并保持一致性吗?...sm 可能指的是更小 320px,那么你想要在小屏幕时候采用 flex 布局,还是照常写 sm:flex遵循同样约定,只是这个 sm 已经被你修改成适合于项目需求值了。...只要你熟悉所有的 Tailwind 命名约定,你就可以很高效完成 UI 编写。一旦你熟悉了这个设定,就很难回到手写每个 CSS 规则时代了,就像你写 CSS-in-JS 那样。

    3K10

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

    先抛出一个令人开心结论,新 CSS 编写和构建方式让 Facebook 主页减少了 80% CSS 体积。 什么是原子 CSS?...人们通常手工编写实用工具/原子 CSS,精心制定命名约定。但是很难保证这个约定易于使用、保持一致性,而且不会随着时间推移而变得臃肿。 这个 CSS 可以团队协作开发并保持一致性吗?...sm 可能指的是更小 320px,那么你想要在小屏幕时候采用 flex 布局,还是照常写 sm:flex遵循同样约定,只是这个 sm 已经被你修改成适合于项目需求值了。...探索原子 CSS-in-JS 原子 CSS-in-JS 可以被视为是“自动化原子 CSS”: 你不再需要创建一个 class 类名约定 通用样式和一次性样式处理方式是一样 能够提取页面所需要关键...只要你熟悉所有的 Tailwind 命名约定,你就可以很高效完成 UI 编写。一旦你熟悉了这个设定,就很难回到手写每个 CSS 规则时代了,就像你写 CSS-in-JS 那样。

    3.5K50

    浅谈 Css 规范

    BEM(Block-Element-Modifier)是一种 CSS 模块化方法,旨在简化 CSS 编写并提高代码可读性和可维护性,它将 HTML 元素划分为三个部分: 块(block)、元素(element...可读性和可维护性: BEM 使用简洁明了命名约定,使得 CSS 代码易于理解和维护。 增强可扩展性: BEM 结构使得页面元素易于扩展和修改,不会影响其他部分样式。...避免样式冲突: BEM 命名约定避免了样式冲突,每个块和元素都有独立命名空间,不会受到外部样式影响。 缺点: 命名冗长: BEM 命名规范较为严格,可能导致类名过长,增加了代码量和阅读难度。...模块化: SMACSS鼓励将样式表分解为独立模块,使得代码更易于理解和修改。 可重用性: 通过定义可重用样式模块,可以减少重复代码编写,提高代码复用性。...命名约定:ITCSS需要遵循一定命名约定和规范,有时可能需要花费额外时间和精力来命名和组织样式代码。 可能导致过度设计:过度遵循ITCSS规范可能导致样式表过度设计,增加不必要复杂性。

    9410

    Web前端进阶之路: 提升代码质量篇

    尽量不用 div 和 span 这2个没有实际意义标签。 CSS 1 CSS类名用BEM命名法 BEM 是由Yandex公司推出一套CSS命名规范。...BEM 通过元素命名遵循遵循 block-name__element-name–-modifier-name 来保证命名唯一性。因此,BEM 能够帮助你在前端开发中实现可复用组件和代码共享。...健壮性 健壮性是指软件对要求以外输入情况处理能力。健壮系统是指对要求以外输入能够判断出这个输入不符合要求,并能有合理处理方式。 健壮代码,就是考虑全面。...如何提升设计代码能力 多读优秀源码。 了解设计模式(Design pattern)。设计模式代表了最佳实践,通常被有经验面向对象软件开发人员所采用。 多写。用心写。...这边指代码测试,是指用代码来测试代码。 要求团队每次代码提交前,所有测试用例必须通过。测试用例覆盖代码bug不会太多。 设计和编写测试用例很耗时间。因此,只对必要代码代码测试。

    1.7K20

    在大型项目中组织CSS

    编写CSS容易。 编写可维护CSS难。 这句话你之前可能听过100次了。 原因是CSS一切都默认为全局。如果你是一个C程序员你就知道全局变量不好。...那么,CSS问题是什么?...Peergrade.io 处理CSS方式 法则一:(给类名)加上前缀 在Peergrade.io我们在所有类名中用了前缀 .pg 。在CSS代码库里不使用前缀是自找麻烦。...为了更好地理解类似BEM命名方式,前往查看Harry RobertsCSS指南BEM命名部分。(需要提到是,我们发现Harry实际上建立了一套跟我们类似的命名方案。)...展望 似乎还没有人真正找到处理CSS最佳方式,看着Hack News上精选这篇文章,我对CSS现状多少有点失望,本来我们可以做得更好。

    80620

    CSS规范--BEM入门

    这段时间在整理前端部分代码规范,前面提到CSS规范里面会涉及到选择器命名,就参考BEM命名规范,内容整理如下,供大家参考,请斧正!...这种巧妙命名方法让你CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格,而且包含更多信息,它们用于一个团队开发一个耗时大项目。...如果我们用BEM方式重写这段代码: <img src="logo.png" alt="Foo Corp logo" class="media__img--...另外现在都用IDE来<em>编写</em><em>代码</em>了,有自动提示功能,也无须担心重复<em>的</em>输入过长<em>的</em>名字。因为命名长,我们是不是可以用子代选择器来代替<em>BEM</em>命名?这样至少在HTML<em>编写</em>时,让HTML标签看起来美观一点。 3....试想一下维护这类<em>代码</em>有多么痛苦,我们要一边检查该元素<em>的</em>上下文DOM结构,一边对照着<em>css</em>文件,一一对比,找到该元素对应<em>的</em>样式,也就是说我为了改一个元素<em>的</em><em>代码</em>,需要不断翻阅HTML文件和<em>CSS</em>文件,可维护性非常之差

    1.2K20

    想明白这点,就知道 TailwindCSS 适不适合你

    这就诞生了很多「类名定义规则」,比如,下面是BEM(Block Element Modifier)规范定义: Block:块 Element:元素,是块组成部分 Modifier:修饰符,表示一种形态.../状态 对于「警告状态聊天通知卡片」,符合BEM规范类名为.chat-notification--warning。...,比如: 布局约定 配色约定 尺寸约定 为了减少前端工程师上手门槛,这套页面产出流程对前端隐藏了设计系统存在。...这是因为,未来大部分项目初始化代码会交给chatGPT完成,而「原子化CSS」相比「语义化CSS」能用更少字符表达更丰富样式信息。... 届时,当公司自上而下推进「chatGPT生成代码」时,「原子化CSS」更省token。

    79720

    CSS模块化:提升前端开发效率与可维护性关键

    本文将深入探讨CSS模块化定义、优势、实现方式以及如何在项目中有效地应用它。 1....为什么选择CSS模块化 2.1 样式隔离 CSS模块化提供了样式隔离,确保每个模块样式不会互相干扰,提高了代码可维护性。...CSS模块化实现方式 3.1 BEM(块、元素、修饰符) BEM是一种常用CSS命名约定,通过块(Block)、元素(Element)、修饰符(Modifier)组合来命名样式,以确保样式唯一性...在项目中应用CSS模块化最佳实践 4.1 选择适当实现方式 根据项目需求和团队技能,选择合适CSS模块化方法。...4.2 统一命名规范 建立命名规范并在整个项目中保持一致,以确保团队成员理解并遵循规则。 4.3 模块化组织 将样式表分割为模块,每个模块只包含特定组件或元素样式,以提高可维护性。 5.

    31440

    进阶 | CSS进阶:提高你前端水平 4 个技巧

    做好这四件事情,能让你在大规模使用 CSS 时候保证代码健壮性:使用适当语义,模块化,采用统一命名规范,遵循单一功能原则。 使用适当语义 在 HTML 和 CSS 编程中有语义标注概念。...阅读更多关于 CSS 组件驱动文章,详见《CSS 建构:可扩展和模块化处理》、《使用 Sass 编写模块化 CSS》和《模块化你前端代码——编写高可维护和条理清晰代码》。...想要了解不同命名规范,参见《OOCSS、ACSS、BEM、SMACSS:这些是什么?我该用哪个?》。...遵循单一功能原则 单一功能原则规定每个模块和类都应该有一个单一功能,并且该功能应该由这个类完全封装起来。 在 CSS 中,单一功能原则代表每一段代码、类和模块只做一件事。...从简单开始,遵循基本 CSS 规则和样式指南,然后不断迭代。 我很想知道你 CSS 学习之路。你喜欢命名规范是什么?你是怎样组织你代码文件?你可以随时通过留言或者在 Tweet 上告诉我。

    44610

    CSSBEM 命名规范

    前言: 最近团队要考虑代码风格统一 1 什么是 BEM 命名规范 Bem 是块(block)、元素(element)、修饰符(modifier)简写,由 Yandex 团队提出一种前端 CSS 命名方法论...__ 双下划线:双下划线用来连接块和块子元素 _ 单下划线:单下划线用来描述一个块或者块子元素一种状态 BEM 是一个简单又非常有用命名约定。...通过 BEM 命名方式,模块层级关系简单清晰,而且 css 书写上也不必作过多层级选择。...important; } 2.2 在 CSS 预处理器中使用 BEM 格式 BEM 一个槽点是,命名方式长而难看,书写不雅。相比 BEM 格式带来便利来说,我们应客观看待。...而且,一般来说会使用通过 LESS/SASS 等预处理器语言来编写 CSS,利用其语言特性书写起来要简单很多。

    2.7K31

    超硬核 Web 前端学霸笔记,学完就去找工作!

    FLEX-Malven - CSS Flex 布局可视备忘单。 GRID-Malven - CSS 网格布局可视备忘单。 如何运作? 互联网如何运作视频 - 互联网如何运作?...Flexbox Froggy - 一款可帮助您学习 CSS Flex 游戏。 CSS 技巧-Flexbox - Flexbox 完整指南。...Marksheet - 无限数量教程 ODIN 项目 - 惊人学习方式CSS 效果 - CSS 动画。 关键帧 - 使用可视时间线编辑器创建基本或复杂 CSS @keyframe 动画。...Animista - 玩准备好使用 CSS 动画集合。 难以上网 - 面向完整初学者友好 Web 开发教程。 BEM - BEM 命名备忘单。...Node Way - 存在用于编写可维护模块,可伸缩应用程序和易于阅读代码 Node.js 最佳实践和指导原则完整哲学。 Express.js 安全提示 - 如何保存和保护应用程序。

    1.4K20

    前端练级攻略(第一部分)

    良好命名规范,如语义标签,传达了意义,并有助于使我们代码可预测、可读和可维护。你可以在这篇 OOCSS、ACSS、BEM、SMACSS:它们是什么?我应该用什么? 中了解到不同命名规范。...要了解像 Medium 这样公司是如何利用像 BEM 这样命名约定,请阅读 Medium’s CSS is actually pretty f*ing good.。...下面两个实践目标是练习编写干净代码,并观察最佳实践对可读性和可维护性长期影响。 实践 3 对于实践 3,选择你之前做过项目,并使用你在这过程所学到知识来重构你代码。...重构意味着编写代码,使代码更容易阅读,更简单。 能够有效地重构代码是前端开发人员一项重要技能。 编写高质量代码是一个迭代过程。 CSS体系结构:重构你 CSS 是重构代码入门指南。 ?...学习前端最佳方式是建立项目和实践。 请记住,每个前端开发人员都必须从某个地方开始。 从今天开始比明天开始更好。 本文是两部分系列中第一部分。

    1.3K00

    CSS Modules与Styled Components:提升CSS可维护性

    CSS Modules和Styled Components都是现代Web开发中用于提升CSS可维护性解决方案,它们通过不同方式解决了传统CSS一些问题,如样式冲突、命名约定和全局作用域。...这种方式提供了组件级别的样式,避免了CSS选择器编写,支持动态样式和变量。...CSS Modules 缺点:需要手动管理样式:可能需要编写更多CSS代码。样式嵌套受限:虽然可以使用CSS预处理器,但CSS Modules不支持原生CSS嵌套规则。...遵循一定CSS命名约定,如BEM(Block Element Modifier)或Atomic CSS。...关键是要找到一个既能满足项目需求,又能提高代码可维护性解决方案。无论你选择哪种方式,都要确保团队对所选技术有足够理解和熟练度,以便于长期开发和维护。

    9600

    「前端工程四部曲」模块化前世今生(下)

    BEM BEM 是一种非常有用、强大且简单命名约定,可以说是一个CSS命名规范,也可以说是一种思想。它使前端代码更易于阅读和理解、更易于使用、更易于扩展、更健壮和明确,并且更加严格。...这种巧妙命名方法让你CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格,而且包含更多信息,它们用于一个团队开发一个耗时大项目。...写法乍一看简单漂亮,但代码量大时候,就会很乱,不知道 class 对应是什么。...和 BEM 实用性比起来,丑一点根本不值一提!! OOCSS Object Oriented CSS,面向对象CSS,旨在编写高可复用、低耦合和高扩展CSS代码。...CSS 书写方式等等,这些其实可以配合前文我们说 BEM、ACSS 等一些约束,就可以很好控制。

    72220

    改善CSS10种最佳做法

    BEM BEM(块,元素,修饰符)是最流行CSS方法之一。它是命名约定集合,可用于轻松制作可重复使用组件。...命名约定遵循以下模式: .block { ... } .block__element { ... } .block--modifier { ... } .block:块代表一个组件。...OOCSS 面向对象CSS或OOCSS具有两个主要原理。 分离结构和皮肤 这意味着你要与结构代码分开定义视觉效果。实际上这是什么意思?...创建自己:如果你没有用于项目设置专用软件包,那么我会提供一个教程,向您展示如何创建自己实现。 总结 遵循以上10个简单步骤将有助于你编写CSS文件,更轻轻,易维护,更好扩展。...不仅如此,而且使用诸如预定义调色板或版式规则之类实用程序,将帮助你创建更一致设计。你样式也将更可重用,因此可以节省下一个项目的时间。 你遵循哪些其他CSS最佳实践,但本文未提及到

    70020
    领券