如果一个很大的项目 减少css样式的代码量的方法有三种

最新推荐文章于 2024-08-02 10:25:30 发布
最新推荐文章于 2024-08-02 10:25:30 发布
阅读量211 收藏
点赞数
分类专栏： vue 文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52421092/article/details/124813663
版权

1.定义常用的公共样式

 

2. 公共样式用一个文件装着 在祖先组件引入     并且不可以用scoped

3.例如：当前页面的如果有两个多个相同的下拉菜单

写样式的时候 第一个类一定是本组件的最外层类 第二个类就是这个公共菜单的最外层类

郑建零零发
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css样式去重写法缩减代码量
09-25
css样式去重，没有听说过吧，以为是继承呢？继承是dom元素属性的继承，下面有个示例，大家可以参考下
用CSS减少JavaScript代码量
Dear_Mr的博客
07-17 485
用CSS减少JavaScript代码量 写此篇博客的目的就是提醒自己和需要的人，在遇到某些需求的时候，可以通过灵活的CSS的样式去减少项目中JavaScript的代码量。 现在假定有这样一个需求，在列表页面中，每次点击某一行，这个时候前端会向后端发出请求，请求该行所对应的模板，并将这个模板显示在详情弹窗，但有时候，这一行对应的不仅是一个模板，但是需要的只是其中之一，现在需要用前端代码去控制选取...
大型网站如何自动生成html,大型网站如何规划css？
weixin_39830020的博客
05-31 118
大型网站如何规划css？在做大型的项目的时候，前期，一定要做好规划，，有条有理的进行之中。。。CSS文件也是这样，一般在做这种项目的时候，网站都会有一个专门放置CSS的文件夹。。---------------------------------------------------------------------------------------------------在当前浏览器普遍支持的前...
css-项目中的解决方案
qq_22091941的博客
11-10 722
css-项目中的解决方案 css是页面的样式控制，但我们在使用中，常常会出现自己写的css样式给覆盖了，这是因为css的样式优先级是根据css的权重来的 权重排行：!important（最高级） > 行内样式（1000） > id（100） > class（10） > element（1） 计算规则：除!important 外，权重是父级到子级的权重相加，最大权重的css样式就覆盖较小权重的css样式 举例： <style> #box p{color:
优化函数html代码,CSS代码优化方法
weixin_26875051的博客
06-04 116
div+css代码优化方案介绍-css代码优化篇css代码优化作用与意义1、减少占用网页字节。在同等条件下缩短浏览器下载css代码时间，相当于加快网页打开速度2、便于维护。简化和标准化css代码让css代码减少，便于日后维护3、让自己写的css代码更加专业。css优化方法-需要优化css代码地方1、缩写css代码。2、排列css代码。3、同属性提取共用css选择器。4、分离网页颜色和背景设置样式(...
jsp页面中插入css样式的三种方法总结
10-26
本文将详细讲解在JSP页面中插入CSS样式的三种主要方法：外部样式、内部样式和内联样式。 1. **外部样式** 当多个JSP页面需要共享相同的样式时，外部样式是最合适的选择。外部样式表通常保存在单独的.css文件中，...
js中用cssText设置css样式的简单方法
11-25
本文将介绍一种更为简洁的方法，即通过`cssText`属性来批量设置CSS样式。 首先，我们来看一下基本的JavaScript操作CSS样式的步骤。假设我们有一个id为"no"的HTML元素，通常我们会这样获取并修改它的样式： ```...
30种CSS导航菜单风格代码
05-12
这对于那些希望保持页面轻量化或者优化性能的开发者来说，是一个很大的优点。每个导航菜单样式都有其独特的设计，包括颜色搭配、字体选择、布局方式以及交互效果等，这使得你可以根据项目需求挑选最合适的样式。 在...
6款简洁漂亮的CSS3分页样式代码.zip
07-11
对于前端开发者来说，这些分页样式代码是一个很好的学习素材。通过研究和分析这些代码，可以深入了解CSS3如何创建复杂的布局和交互效果，从而提高自己的CSS技能。 总的来说，"6款简洁漂亮的CSS3分页样式代码"是一...
CSS样式表与HTML网页的关系分析
12-10
最近因为帮一个网友很费神的修改了一个导航的CSS文件，还没有我自己重写code来的快，让我想起了写这篇文章。我发现很多web设计者对CSS写法的继承关系都有了一点了解，但是了解的还是不够深，不够透彻，所以今天打算...
CSS代码书写注意事项
似水流年
03-30 531
1.网站的加载速度，优秀的网站打开速度在5S之内。    就中文站而言，当代码量小于150k的时候，大概每20k的代码会造成1%的用户离开（包括页面加载到一半发现自己需要的链接就点击走掉的用户），但是当页面代码超过150k的部分进行加载的时候，用户数出现大的波动，加载150-200k这部分代码导致了13%的用户流失，如果代码量继续加大，相信用户流失的速度还会加快，所以一张页面应该不要超过
优化 CSS 代码的小技巧
m0_68997646的博客
11-30 276
优化 CSS 代码的12个小技巧
如何减少代码的量
weixin_34209851的博客
06-16 169
我始终认为，代码应作为架构的一部分，不如此，不足以表达代码质量的重要性。我知道，这与传统学院派对架构的定义是相悖的。一般认为，架构是描述设计蓝图的宏观过程，然而，敏捷方法的逐步普遍，却慢慢开始颠覆这种事前设计的论调，代码不仅要体现架构的原则与思想，还要通过代码对架构施加影响，甚至利用代码来补充与完善架构。 Yourdon与Constantine认为软件系统的整体成本等于开发成本加维护成本，而后者...
减少 JavaScript 代码量的原生技术
CSDN资讯
06-10 3134
作者 | Anthony Ricaud 译者 | 弯月 责编 | 欧阳姝黎出品 | CSDN（ID：CSDNnews）以下为译文：如今依赖 JavaScript 提供...
最详细预处理器scss具体演示，通过each循环样式添加类名，大大提高开发效率和大幅度减少css代码量
weixin_45389051的博客
03-31 1000
这里具体怎么安装scss我就不说了，网上有很多，具体说一下怎么使用 首先我们想定义几种颜色的 自我感觉这相当于一个键值对 $colors:( "primary":#db9e3f, "white":#fff, "light":#f9f9f9, "grey":#999, "grey-1":#666, "dark-1":#343440, "dark":#222, "bla...
css代码优化思路,CSS代码优化方法
weixin_42379854的博客
08-04 212
CSS代码怎么优化最近看过许多网友制作的SKIN的CSS文件，发现其中有着许多冗余的代码。下面我来跟大家介绍一下，如何清除这些冗余的代码，让你的CSS文件更加简洁。一、margin、padding属性参照相关资料我们可以知道，margin和padding代表的意思分别是外部边距和内部填充距离，在许多网友的CSS中，关于这两个属性的冗余代码是出现得最多的。比如：margin:0px，大家可以查看一下...
css 兼容解决方案,CSS的常见兼容性问题解决方案
weixin_29220405的博客
08-03 2867
这次给大家带来CSS的常见兼容性问题解决方案，CSS常见兼容性问题的注意事项有哪些，下面就是实战案例，一起来看一下。一、不同浏览器的标签默认的外补丁和内部顶不同这个大家就很常见了，我们知道每个浏览器对margin和padding的处理问题很大，我们一般都会碰到这个问题，常用的解决办法就是使用通配符*来将其初始化解决办法：*{ margin：0； padding:0;}1234另一种方法...
CSS 的工作原理
07-25 1315
我可能会为一个框给出一个以像素为单位的回退宽度，然后继续给出一个值为 .旧浏览器将使用像素版本，忽略该行，因为它们不理解它。请记住，这是浏览器加载网页时发生的情况的非常简化的版本，并且不同的浏览器将以不同的方式处理该过程。鉴于 CSS 一直在开发中，因此领先于浏览器可以识别的内容，您可能会想知道如果浏览器遇到它无法识别的 CSS 选择器或声明会发生什么。如果浏览器正在解析您的规则，并遇到它无法理解的属性或值，它会忽略它并继续下一个声明。我们已经学习了CSS的基础知识，它的用途以及如何编写简单的样式表。
HTML-01.新浪新闻-标题-排版
最新发布
程小白的博客
08-02 186
-- 编码字符集为UTF-8 -->-- 设置浏览器的兼容性 -->焦点访谈：中国底气 新思想夯实大国粮仓_新浪新闻-- 1.图片标签：src：指定图像的url（绝对路径/相对路径）width：图像的宽度 [像素（单位px）/相对于父元素（
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值