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

Css样式书写顺序

我不知道是否有人严格按照一定的顺序书写css的样式,可以说几乎都是需要什么样式就加什么样式,完全没有考虑过样式属性书写顺序对性能有什么影响。...我一直坚信,前端的性能优化都是从细节堆出来的,不注意css属性的顺序确实也可以实现我们需要的各种操作,但是慢慢的让自己遵从最优的写法,提高自己或者是优秀自己还是有必要的。...讲顺序之前,我们先要知道浏览器渲染页面的过程,之前有写过一篇文章了,这边简单提一下: 1.解析HTML构建DOM树 2.解析CSS构建CSSOM树 3.将DOM树和CSSOM树合并构建render树 4....布局 5.绘制 6.重排reflow 7.重绘repaint 整体来说,页面渲染初始过程涉及到2、3、4,我们推荐的书写顺序是这样的: 位置属性:position display float left...简单说就是位置和尺寸会涉及重排,颜色等会涉及重绘,初始化过程中我们当然是尽量避免重排和重绘,所以按照顺序书写css样式,有助于性能的优化,页面的渲染。 (完)

86210
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    CSS 代码的书写规范、顺序

    本文来自设计达人网站,Jeff 看到该文感觉非常有必要学习分享,so,转载在这里,感谢原作者——写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验...,这里设计达人网总结一个CSS书写规范、CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总结出来,我想对写CSS的前端用户来说是值得学习的。...CSS书写顺序 位置属性(position, top, right, z-index, display, float等) 大小(width, height, padding, margin) 文字系列(...CSS书写规范 使用CSS缩写属性 CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。 ? ? 去掉小数点前的“0” ? ?...CSS样式表文件命名 主要的 master.css 模块 module.css 基本共用 base.css 布局、版面 layout.css 主题 themes.css 专栏 columns.css

    3.5K101

    推荐的CSS书写顺序、规范

    写了这么一些时间的CSS,有时候觉得有些混乱,尤其是做样式修改的时候。后来觉得遵循一些书写规范和顺序来的话,一来会让自己的思路很清晰,二来修改的时候很明确,不容易被冗余的样式影响。...CSS书写顺序 定位属性:position display float left top right bottom overflow clear z-index 自身属性:width height margin...中新增属性:content box-shadow border-radius transform…… CSS书写规范 使用CSS缩写属性 尽量使用缩写属性,比如padding,margin,font等...---- 参考 推荐大家使用的CSS书写规范、顺序 http://www.shejidaren.com/css-written-specifications.html css样式的书写顺序及原理——很重要...https://blog.csdn.net/qq_36060786/article/details/79311244 Mozilla建议的CSS书写顺序 https://www.jb51.net/article

    66810

    CSS】课程网站开发示例 ① ( 文件目录结构准备 | CSS 属性书写顺序 - 重要 )

    文章目录 一、 文件目录结构准备 二、 CSS 属性书写顺序 - 重要 一、 文件目录结构准备 ---- 文件目录结构准备 : 首页文件是 index.html ; 图片放在 images 目录 中 ;...样式文件准备 , HTML 标签结构 与 CSS 样式要进行分离 , 这里将 CSS 样式定义在 style.css 文件 中 ; 在 index.html 的 标签中 , 通过 标签 , 引入 CSS 样式文件 , 完整的文件内容如下 : <!...属性书写顺序 - 重要 ---- 在一个 CSS 选择器中 , 配置对应标签的属性样式 , 配置的属性在 十几个 到 几十个 不等 , 这里建议按照如下的 顺序 进行排列 ; 布局定位属性 : display...border-radius: 10px; // 圆角边框 10 像素 } 进入到网页中 , 按下 F12 健进入调试模式 , 任意选择一个标签盒子 , 在右侧查看其样式 , 可以 看到此处的样式就是按照上述顺序编写的

    45120

    CSS 样式书写规范

    可能不同团队都有各自的规范,又或者很多人在写 CSS 的时候还是想到什么就写什么,不存在太多的约束。 我觉得 CSS 代码规范还是有存在的必要的,尤其是在团队配合,多人协作下,规范就显得尤为重要。...本文的所列是实践当中得出的一套比较不错的 CSS 书写规范,并不希望大家完全采用,而是希望可以结合自己的团队需要,发展出一套适合自己的 CSS 代码规范。 也希望可以有更多的建议,共同的完善。...color: #ffcc00 color: #fc0 样式属性顺序 单个样式规则下的属性在书写时,应按功能进行分组,并以 Positioning Model > Box Model > Typographic...> Visual 的顺序书写,提高代码的可读性。...所以,合理的书写新样式选择器,是完全可以规避一些看似需要使用 !important 的情况的。 代码注释 单行注释 星号与内容之间必须保留一个空格。

    1.2K70

    HTML&CSS书写规范

    第一部分:HTML书写规范: 1.1 HTML整体结构: 1.1.1:HTML基础设施: 文档以""首行顶格开始,推荐使用"<!...1.1.2:结构顺序与视觉顺序基本保持一致 按照从上到下,从左到右的顺序进行书写HTML; 有时候为了便于搜索引擎抓取,我们要将重要内容在HTML结构中提前; 用div替代table布局; 当需要一些表现形式为表格的数据...,使用 1.1.3:结构(html),表现(css),行为(js)三者分离,避免内联 使用link将css文件引入,置于head中; 使用script将js文件引入,置于body底部。...,就不要嵌套书写。...使其不可见,有利于搜索引擎抓取内容,同时CSS失效时可以看到内容 1.2.4  以字符实体代替与HTML语法相同的字符,避免浏览器解析错误 更多HTML规范:参考链接 第二部分:CSS书写规范 参考链接

    912100

    引入CSS样式表(书写位置)

    内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下:   选择器 {...其中属性和值的书写规范与CSS样式规则相同,行内式只对其所在的标签及嵌套在其中的子标签起作用。...="CSS文件的路径" type="text/CSS" rel="stylesheet" /> 注意: link 是个单标签哦!!!...type:定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表。...三种样式表总结 样式表 优点 缺点 使用情况 控制范围 行内样式表 书写方便,权重高 没有实现样式和结构相分离 较少 控制一个标签(少) 内部样式表 部分结构和样式相分离 没有彻底分离 较多 控制一个页面

    1.1K40

    展望未来:使用 PostCSS 和 cssnext 书写 CSS

    它的工作原理就是解析 CSS 并将其转换成一个 CSS 的节点树,这可以通过 javascript 来控制(也就是插件发挥作用)。然后返回修改后的树并保存。...当书写 Sass 时,我们可以用函数将 px 转换成 rem : /* input */ .selector { margin-bottom: rem(20px); } /* output, assuming...因为是后处理的缘故,我们不需要任何函数来编译CSS。我们可以直接书写 px ,它可以自动地转换成 rem  。...使用 cssnext 书写未来的 CSS  我们可以在样式表中利用 cssnext 额外增加的一些 css 规范。...因为我们书写的是未来规范的 css,所以 PostCSS 的生成步骤不需要浏览器去执行。你可以 点击这里 查看所有的特性。 接下来,我将用 PostCSS 的自定义函数扩展 CSS 的功能。

    73190

    CSS选择器以及权重顺序

    CSS选择器以及权重的设置 一个页面的搭建离不开css样式,而想要使用css对页面元素进行控制就需要用到css选择器。...按照引入方式可以说有内部样式(样式写到标签中的style里)、外部样式(样式通过引入外部的css文件)、内联样式(样式写在html文件中的style标签里) 按照选择器分类的话,常见的选择器有id选择器...原因css通配符选择器效率低,因为css匹配的顺序不是从左向右,而是从右向左。使用通配符选择器时,浏览器会先匹配所有的元素,再进一步匹配其他规则,这样就导致了效率变低。...css的匹配规则是从右往左,也就是说,就上面的例子而言先匹配content2的元素,再匹配属于div的content元素。这样的话,即使存在下面的样式,也会被上面的覆盖掉。...此外,针对class属性中有两个选择器的情况,优先级是按照定义顺序方式确定的。

    44040

    CSS 世界中的方位与顺序

    还有一种情况是从x方位到x方位,譬如 writing-mode、direction,它代表了一种顺序,表示块流动方向,或者文字书写的方向等。...本文将捋一捋 CSS 世界中的方位与顺序,探寻其中一些有意思的点。...可以看到,direction 可以改变子元素的排列方向,但是它确无法改变单段文本内(或是内联元素内),每一个文字的书写顺序。...那如果,我希望 这是一段正常顺序的文本 这段文字,不是从左向右进行书写,而是反过来,从右到左进行书写,又该如何设置呢? unicode-bidi 示意 这就需要请出 unicode-bidi 了。...单独使用 direction: rtl 无法使单段文本内(或是内联元素内),文字的书写顺序改为从右至左。需要配合 unicode-bidi。

    1.3K40

    无需书写 CSS!只需关注HTML,即可快速构建美观的网站

    一、Tailwind CSS 是干什么的? Tailwind CSS 是一个实用工具优先的 CSS 框架,它提供了一系列低级别的 CSS 类,这些类可以直接应用于 HTML 元素上。...二、Tailwind CSS 的好处 快速开发: • Tailwind CSS 允许开发者通过使用预定义的工具类快速构建和调整界面元素,省去了编写和调试自定义 CSS 的繁琐过程。...优化的文件大小: • Tailwind CSS 可以与 PurgeCSS 集成,自动移除未使用的 CSS 类,从而显著减少生成的 CSS 文件大小,提高页面加载速度。...四、如何使用 Tailwind CSS 安装 Tailwind CSS 要开始使用 Tailwind CSS,首先需要安装它。...Tailwind CSS 是一个高度可定制的 CSS 框架。

    19910

    【前端】HTML、CSS、JS、PHP 的学习顺序

    原文地址:http://www.th7.cn/web/html-css/201404/29642.shtml 侵删 如果你有耐心坚持一年以上的话, 我会推荐HTML->CSS->JS->PHP的顺序来学习...CSS学习:HTML和CSS这两个东西是一套的,建议可以一起学习。一般来说是叫“CSS+DIV”,这是制作出网页的基本外观的东西,学习这个主要要理解“盒子模型”“样式表”这两个东西。...还是把w3school上面的教程学一遍, CSS 教程。这里也推荐“后盾网的视频(DIV+CSS网页布局)”。 3....当然如果看书比较枯燥,可以看视频,这里推荐兄弟连的php视频教程(《兄弟连[高洛峰2014版PHP视频教程])这个教程讲得很全,就连html+css+div都讲了,可以选择性的看看这部分内容就当复习。...注:在学习HTML、CSS和JS的时候,只要有浏览器就足够了,不需要装wamp。

    2.7K21

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券