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

DRY我不想用::after重复这段CSS代码

DRY(Don't Repeat Yourself)是一种编程原则,旨在避免代码重复,提高代码的可维护性和可重用性。

在前端开发中,为了避免重复的CSS代码,可以使用::after伪元素来实现一些常用的样式,如清除浮动、添加分隔符等。然而,如果需要在多个地方重复使用这段CSS代码,就违背了DRY原则。

为了避免使用::after重复这段CSS代码,可以通过以下方法进行优化:

  1. 使用CSS预处理器:可以使用像Sass、Less等预处理器来定义可重用的样式,将其作为Mixin或函数,以便在需要的地方引用。这样可以在多个地方使用同一段代码,而无需重复编写。
  2. 使用CSS类库或框架:使用流行的CSS类库或框架(如Bootstrap、Tailwind CSS等),它们提供了一系列可重用的CSS类和组件,可以简化前端开发流程,减少代码重复。
  3. 抽象公共样式:将重复的CSS代码抽象为一个公共样式,在需要的地方通过类名或ID进行引用。这样可以通过修改公共样式来同时修改多个地方的样式,提高代码的可维护性。
  4. 使用CSS模块化:将样式文件拆分为多个模块,每个模块负责管理特定的样式规则。通过使用模块化的方式组织代码,可以避免重复的CSS代码,并提高代码的可读性和可维护性。
  5. 使用腾讯云相关产品:腾讯云提供了一系列云计算产品,包括云服务器、云数据库、云存储等。这些产品可以帮助开发者快速搭建和管理云环境,提高开发效率。相关产品可以根据具体需求选择使用,具体详情可以参考腾讯云官方文档:腾讯云产品文档

总结:为了遵循DRY原则,避免在CSS代码中重复使用::after,可以使用CSS预处理器、CSS类库、抽象公共样式、CSS模块化等方法进行优化。同时,可以考虑使用腾讯云提供的相关产品来快速搭建和管理云环境。

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

相关·内容

HTML5+CSS3 做一个灵动的动画 TAB 切换效果

切换的背景颜色变化,因为想要有从小到大的效果,因此,也不能直接使用背景颜色实现,也准备用伪元素实现。 如果用伪元素的大小来控制,计算会比较复杂,因此,想用 box-shadow 阴影来实现。...CSS 代码 .m { margin: 100px; } .tab { width: 400px; margin: 0 auto; border: 1px solid #ddd; height: 40px...CSS 之所以难,不是你不会,而是不会去搭配。 其实,还是只还原了99%的设计效果,两条线一个在背景里面,一个在背景外面,想要把两条分割线都放到背景里面来,应该如何实现呢?可以思考一下。...上面的 css 是编译出来的。其实用 scss 实现非常方便快捷,代码可读性也更高。...,&:after { height: 0;top: 20px; } } } } 当然,这段代码用了颜色变量以及 mixin 混入代码

4.1K100

CSS-自定义高度的元素背景图如何自适应以及after伪类在ie下的处理

都好久没更新了! 遇到一个效果,之前没有考虑清楚,设置了固定高度,到了后边,产品要加长,就觉得设计得从新弄张长点的背景图!这不多余么?...其实分析原图还是可以再切分,再细化到不用改设计图,让我们前端页面各种适应,做到重复利用。 于是就有了这个问题和如下的一连串问题。.../images/hot_c_bg_g.png) repeat-y center top  #2807b3;} 一定是y轴重复 ?...本来想用css3的background-image属性的多个背景图的功能,可是想想还要兼容ie就很烦 于是利用了css的伪类选择器来完成这一巨大的使命。...想了想,清除浮动时,虽然也用了after伪类,但他在正常的clearfix类里边还设置了*zoom:1;*overflow:hidden;这个万能的iebug调试法,这里也试下看行

1.3K80
  • :before 和 :after的多用途实践 — 基础篇

    说明 CSS 伪元素用于向某些选择器设置特殊效果 在CSS中,伪元素,是一个很有趣的东西,而:before和 :after,这两个伪元素是在开发中用到的比较多的,也是在许多系统和库中见到的比较多的...代码 <!...:after :after 选择器向选定的元素之 后 插入内容。 使用content 属性来指定要插入的内容。 代码 <!...这种方式就是,内容生成,作用就是使用CSS的方式,向现有的标记中增加新的内容,看上去似乎也没什么难度,content就是生成的内容,before就是在元素之前插入内容,after就是在元素之后插入内容,...我们要想用计数器,先要有一个计数器,有了计数器,还需要告诉他,每一次,需要计几个数,记一个数,就像这样,1,2,3,4,记两个数,就像这样2,4,6,8,然后我们还需要找一个地方用计数器。

    50330

    如何使用tailwindcss自定义hugo主题

    因为想定义一下自己的profile界面,发现没有地方可以把自己的css,这可真是让挠头了,于是就仔细思考、各种检索找到了解决方案。...你说编译可不可以用,其实也可以用,但是编译之后可以更规范你的代码,更加压缩文件的体积,这样加载效率也更高。 比如说对主题加自定义的css文件,就只经历这个步骤就可以。...在head.html文件中加入这段。在目录assets/css下创建custom.css文件并写好自定义样式,然后hugo -D编译完就可以了。...但是进步的底层动力,在我看来,还是由于有些聪明人想偷懒,想用更小力气完成以前大力气才能完成的事情。...比如说jquery最开始用来做一些交互效果的东西,但是发现如果每个界面好多交互的效果都要一个一个选到dom上来写,太麻烦了,每个界面里都可能copy来copy去大量重复代码,而且jquery实现出来的东西不能复用

    36010

    5个需要避免的CSS错误

    预先设计 不经过思考,立马动手,这样可能会更快的完成任务,这也给了我们一种速度和成就感。但,从长远来看,这会有相反的效果。 在写代码之前,必须要先想清楚。我们将采取什么方式来设计组件?...我们希望我们的CSS是全局作用域的还是按组件作用域的? 有一个明确的目标将帮助我们选择最好的工具。这将使我们免于冗余和违反DRY。 有许多有效的方法来设计一个应用程序。最常见的无效的是即兴创作。...这是旧的CSS规范的一部分,浏览器继续支持它作为一种回退。然而,我们应该在伪元素中使用 ::,比如 ::before, ::after, ::frist-line......使用字符串连接类 使用Sass预处理器来帮助处理我们的CSS代码库是非常流行的。有时在尝试DRY时,我们通过连接&操作符来创建类。...CSS Modules 对BEM方法最大的担心是,它很耗时,而且要依靠开发人员来实现。CSS模块发生在预处理器一侧,这使得它没有错误。它为我们的CSS模块类名生成了随机的前缀/名称。 4.

    42910

    经验之谈:代码该怎样写才能干净整洁

    这段代码有下面 2 个优点: 函数的命名很清晰,参数也被命名地很好。当开发者看到这段代码时,他们的思路会很清晰。...他们不会提供太多的有效信息,可能会误导用户,并使代码变得混乱。 增添有效信息的冗余注释: ? 误导性的注释: ? 搞笑或轻蔑的注释: ?...牢记「DRY」原则(Don't Repeat Yourself,不要做重复的事) 「DRY」原则可以被表述为: 每一小段知识在一个系统中必须拥有一个单一、清晰、权威的呈现。...最简单地说,这从根本上意味着你应该致力于减少存在的重复代码的数量。(注意,这里说的是「减少」而不是「消除」——有些情况下,重复代码也并不是世界末日!) 对于代码维护来说,重复代码可能是一场噩梦。...在这篇为初学者编写的干净代码指南中,我们学会了如何: 使用一致的格式和缩进 使用清晰的变量名和方法名 在必要时使用注释 使用「DRY」原则(不要重复做一件事) 原文链接:https://medium.com

    66530

    设计模式之其他原则

    发现,有些同事为了避免开发中 library 包缺失而频繁地修改 Maven 或者 Gradle 配置文件,提前往项目里引入大量常用的 library 包。...DRY 原则(Don’t Repeat Yourself) DRY 原则的定义非常简单,就不再过度解读。今天,我们主要讲三种典型的代码重复情况,它们分别是:实现逻辑重复、功能语义重复代码执行重复。...这三种代码重复,有的看似违反 DRY,实际上并不违反;有的看似违反,实际上却违反了。 实现逻辑重复 功能语义重复 同一个项目中会有两个功能相同的函数。...代码执行重复 如何提高代码可复用性的一些方法 有以下 7 点。...在之后我们开发新的功能的时候,发现可以复用之前写的这段代码,那我们就重构这段代码,让其变得更加可复用。也就是说,第一次编写代码的时候,我们不考虑复用性;第二次遇到复用场景的时候,再进行重构使其复用。

    28020

    工作六年后,对软件开发的认知转变

    代码静态分析是很有用的。 DRY(Don't repeat yourself)不要造轮子:通常是用于避免一个特定的问题,而不是作为一个终极目的,所以不要盲目追求没有重复。...以下是这一路以来了解到并认可的观点: 第一,YAGNI(非必要时不加入新代码), 其次, SOLID(面向对象设计), 第三, DRY(不要重复造轮子),按照这个优先级去写代码。...(译者注:面试很难真正看清一个人的开发水平) 以下是这么多年来依然不变的观点: 过分强调代码风格、规则或其他细节的人是极端分子,毫无意义。 代码覆盖率对于提升代码质量没有丝毫帮助。...After performing over 100 interviews: interviewing is thoroughly broken....-6-years 关注 是一名奋斗在一线的互联网后端开发工程师。

    52720

    工作六年后,对软件开发的认知转变

    炫技的代码通常并不是好代码,一个清晰明了的代码比任何代码都好。 你永远想象不到垃圾代码能写的多么奇葩。 所谓的“最佳实践(Best Practise)”通常是有特定背景的,不具有广泛的适用性。...代码静态分析是很有用的。 DRY(Don't repeat yourself)不要造轮子:通常是用于避免一个特定的问题,而不是作为一个终极目的,所以不要盲目追求没有重复。...以下是这一路以来了解到并认可的观点: 第一,YAGNI(非必要时不加入新代码), 其次, SOLID(面向对象设计), 第三, DRY(不要重复造轮子),按照这个优先级去写代码。...(译者注:面试很难真正看清一个人的开发水平) 以下是这么多年来依然不变的观点: 过分强调代码风格、规则或其他细节的人是极端分子,毫无意义。 代码覆盖率对于提升代码质量没有丝毫帮助。...After performing over 100 interviews: interviewing is thoroughly broken.

    54200

    过度设计有意义吗

    看着自己每次根据设计原则及模式的代码重构,虽效果不错,但也自省:如果的每段代码都这么写,是不是过度设计?把握设计的度,需长久锤炼。行业也总结了很多原则,帮助我们把握设计的度。...4 DRY Don’t repeat yourself,不要重复自己。在一个系统中,每一处知识都必须有单一、明确、权威地表述。...,如果要在标签和金额之间加一个空格,相关的代码都要改,所以,这也是一个可以消除的重复: String formatValue(final double value) { String result...DRY局限于写代码: 注释和代码之间存在重复,可以尝试把代码写得更清晰 内部API在不同的使用者之间存在重复,可以通过中立格式进行API的定义,然后用工具生成文档、模拟 API 等等 开发人员之间做的事情存在重复...2 消除重复 正如DRY,你得能发现重复,就要会分离关注点 3 表达出程序员的意图 编写有表达性的代码,这也需要你对“什么是有表达性的代码”有认识。

    45120

    一个简单需求竟让改了十几处代码,万字控诉到底什么是重复代码

    只不过,这种重复代码通常情况下是作者自己写出来的,而不是粘贴出来的。 因为写这段代码时,脑子只想到 if 语句判断之后要做什么,而没有想到这个 if 语句判断的到底是什么。...这段代码客观上造就了重复。 写代码要有表达性。把意图准确地表达出来,是写代码过程中非常重要的一环。显然,这里的 if 判断区分的是参数,而非动作。..., content, approved); 这里把 user.isEditor() 判断的结果赋值给了一个 approved 变量,而不是直接作为一个参数传给 editChapter,这么做也是为了提高这段代码的可读性...写代码要想做到 DRY,一个关键点是能够发现重复。...很多重复代码的产生通常都是从程序员偷懒开始的,而这些程序员的借口都是为了快,却为后续工作埋下更多地隐患,真正的“欲速而达”。 复制粘贴的代码和结构重复代码,本质都是重复

    17910

    wordpress导航菜单详解及改造

    description ) 函数功能:开启导航菜单功能 @参数 string $location, 导航菜单的位置 @参数 string $description, 导航菜单的描述 开启多个位置的导航菜单,只需要重复调用此函数即可...当然照所写代码也可 具体怎么使用稍后会讲 然后在wp后台菜单处显示如下 至于怎么设置菜单,具体见下面wordpress大学的教程 https://www.wpdaxue.com/wordpress-nav-menus.html...的参数为创建的导航别名 depth代表导航级数 例如上面这段代码表示调用别名为header-menu的一级导航 相关参数还有很多 完整代码如下 wp_nav_menu(array( 'theme_location...输出的结构是这样的 (方便起见,写类名) 如果我们要更改输出的结构 像外层div 只需 'container' => false 即可 如果要去除外层ul 那么可以这样写 if(function_exists...array() : ''; } 将以上代码放入function.php文件 就能移除所有的css选择器id或class 但并不是都移除就是最好的 有些css选择器对我们是很有帮助的 这里先给出默认菜单输出的结构

    3.1K70

    这些框架技术的出现都是为了解决什么问题?

    ① 首先从DRY原则开始说起 Don't Repeat Yourself,不要重复你的代码。...,而尽量写机械性重复性的代码,其实后面我们就会知道,这就叫专注于业务逻辑,所谓业务逻辑就是你这个项目中,与别的项目都不一样的地方,必须由你亲自去编写实现的部分。...建议新手一开始就直接使用框架。...使用框架也是一样,如果不是自己写多了重复性的代码,就很难理解框架为什么要这么设计。如果尝试几种不同的实现,就很难理解框架为了灵活性而做出的设计和扩展点。...这里建议自己写,不要重复造轮子,总有专业造轮子的。你草草写就的往往不如别人已经千锤百炼的代码。除非你是为了学习与研究的目的,自己写,那就是一件很好的事情。

    37520

    Vue 3.2 发布了,那尤雨溪是怎么发布 Vue.js 的?

    参数是加的,如果你是调试 代码也建议加 // 执行测试和编译 、执行 推送git等操作 // 也就是说空跑,只是打印,后文再详细讲述 "release...yarn run release --dry这样就是true。runIfNotDry就是只是打印,执行命令。这样设计的好处在于,可以有时不想直接提交,要先看看执行命令的结果。...4.2 确认要发布的版本 第一段代码虽然比较长,但是还好理解。主要就是确认要发布的版本。 调试时,我们看下这段的两张截图,就好理解啦。...我们在终端执行yarn release --dry。会看到这样是输出。 更新 Vue 相关依赖的终端输出 也就是这句代码输出的。...不过代码 `skippedPackages` 里是没有包。 // 所以这段代码也不会执行。 // 我们习惯写 arr.length !== 0 其实 0 就是 false 。可以写。

    1.5K30

    怎样写出可读性高的代码

    如果我们决定跳过某些步骤,但又懒得留下注释解释为什么,过两天再回来看这段代码恐怕就真没人知道你当时在想什么了。...此类重复代码的确不好。而 DRY 的过度解读是指面对区区两行的重复代码,便如临大敌恨不得除之而后快。...DRY 并不代表我们需要手动压缩代码库,而是为了避免两段代码要依赖于手动的同步。请记住,重复代码和抽象创造并不是同一件事。...诸位对类似的事一定陌生:初始干净的函数,只在三个不同的地方被调用。而当我们想要在第四处调用时,我们需要做一点小的调整,添加一个参数。...但这样以来,又不可避免会出现重复。当这些重复的部分需要保持同步时,我们可以利用 DRY 的思路,将相同的部分抽取到子函数中。这时,做决策和考虑步骤就会容易很多。 请记住,区区几行重复代码是没问题的!

    81810

    写了这么多年 CSS,initial 和 inherit 以及 unset 和 revert 还傻傻分不清楚?

    (IE 不支持该关键字) inherit 每一个 CSS 属性都有一个特性就是,这个属性必然是默认继承的 (inherited: Yes) 或者是默认继承的 (inherited: no)其中之一,我们可以在...题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit,合理的运用 inherit 可以让我们的 CSS 代码更加符合 DRY(Don‘’t Repeat Yourself )原则。...我们对图片容器添加一个伪元素,使用 background-image: inherit 继承父值的背景图值,就可以做到无论图片如何变,我们的 CSS 代码都无需改动: div::after {...上面的代码实际效果: ?...更多精彩 CSS 技术文章汇总在的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

    79220

    爬虫如何正确从网页中提取伪元素?

    可以看到,在源代码里面没有请抓取这段文字。难道这个网页是异步加载?我们现在来看一下网页的请求: ? 网页也没有发起任何的Ajax 请求。那么,这段文字是从哪里来的?...那么这段文字是哪里来的呢? 有点经验的同学,可能会想到看一下这个example.css文件,其内容如下: ? 没错,文字确实在这里面。...首先我们来看一下,为了提取这个伪元素的值,我们需要下面这段Js 代码: window.getComputedStyle(document.querySelector('.fake_element'),'...第二个参数就是伪元素:after。运行效果如下图所示: ? 为了能够运行这段 JavaScript,我们需要使用模拟浏览器,无论是 Selenium 还是 Puppeteer 都可以。...在 Selenium 要执行 Js,需要使用driver.execute_script()方法,代码如下: ?

    2.8K30

    【前端词典】提高幸福感的 9 个 CSS 技巧

    使用 Mixin 归类重复样式 和重复变量一样,重复的样式也可以归类。觉得优秀的代码其中有一条肯定是代码的复用性强。...之前我们写 CSS 的时候,也会将一些重复使用的代码放在一个 class 中,这样的确达到了一定的复用性,不过最后的效果可能就是在一个元素里面放了很多 class,如下图: ?...希望每次都重写一遍,而是希望他是继承而来的,那么我们可以使用如下代码: html { box-sizing: border-box; } *, *:before, *:after {...我们知道内联 CSS 能够使浏览器开始页面渲染的时间提前,即在 HTML 下载完成之后就能渲染了。 既然是内联关键 CSS,也就说明我们只会将少部分的 CSS 代码直接写入 HTML 中。...@clamp; -webkit-box-orient: vertical; } 所遇到的问题: -webkit-box-orient: vertical 在使用 webpack 打包的时候这段代码会被删除掉

    85720
    领券