`
xuedong
  • 浏览: 288114 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

CSS样式编写顺序

    博客分类:
  • css
阅读更多

在书写css的时候很多时候,每个class下边需要写很多属性是很常见的,对于这些属性,我们应该合理的给它规划顺序。有人认为符合标准的顺序可以提高css的执行效率,这个我们无从测试。我总结的好处如下:

1.使代码显得清晰,自己很容易找到需要的属性,不容易出现重复编写同一属性的情况。

2.当很多人同时协作一个项目的时候,统一的顺序对于一个团队是很必要的。否则要读清别人的代码,就要花上更多的时间去仔细寻找属性了。

所以希望大家务必养成这样的好习惯,具体顺序如下:

//显示属性
display
list-style
position
float
clear
//自身属性
width
height
margin
padding
border
background
//文本属性
color
font
text-decoration
text-align
vertical-align
whitewhite-space
other text
content

 

 

 

文章作者:IceSun
本文地址:http://www.iscss.tk/?p=32
版权所有 © 转载时必须以链接形式注明作者和原始出处!

分享到:
评论

相关推荐

    CSS样式编写的简明指南

    编写 CSS 样式时,我习惯遵守这些规则:  class 名称以连字符(-)连接,除了下文提到的 BEM 命名法; 缩进 4 空格; 声明拆分成多行; 声明以相关性顺序排列,而非字母顺序; 有前缀的声明适当缩进,从而对齐...

    div+css有实例,易学易懂

    3.2.2 CSS 样式表书写顺序 3.3 怎样更好地应用CSS 3.3.1 块元素和内联元素 3.3.2 一些CSS 的实用技巧 3.3.3 怎样调试CSS 3.4 关于CSS 的学习 第4 章 网页头部元素的详细定义 第41 页 4.1 DOCTYPE 的选择 4.1.1 什么...

    css-zero:零运行时CSS-in-JS

    使用熟悉CSS语法编写样式 生成优化的原子CSS,没有重复的样式规则 基于应用程序顺序而不是层叠的样式解析 支持CSS模块的应用程序的零配置服务器端呈现 样式易于组合,通过静态分析消除了属性名称冲突 通过CSS变量...

    css入门笔记

    3.CSS样式特征 1.继承性 必须是父子(有层叠嵌套的关系)结构 大部分的css效果是可以 2.优先级 1.浏览器默认样式 2.内部样式和外部样式(就近原则) 3.内联样式 4.!important; 绝对优先使用() 格式 p{ ...

    CSS:相信更好CSS

    Sky CSS样式指南 相信更好CSS 不断发展CSS / Sass Sky风格指南 内容 编写CSS / Sass 林特 编写CSS / Sass 模板 在深入CSS编码风格的细节之前,你可以找到一个天空符合的.scss过的模板 。 立即开始: curl -L git....

    CSS2中从优先权重的计算方式来辨别下CSS

    最近开发项目的时候因为应用了大量的CSS样式导致某些关于样式的优先级出现了问题,于是又回过头去翻别人的文章和W3C上关于CSS优先权重的计算方法,关于代码的测试,有兴趣的朋友可以按照计算方式单独编写代码进行...

    csscomb.js:CSS编码样式格式化程序

    您可以轻松编写自己的,使样式表美观且一致。 主要功能是特定顺序进行排序。 它的灵感来自于的同名。 这是基于强大CSS解析器的新JavaScript版本。 1.安装 全局安装(用作命令行工具): npm install csscomb -g ...

    编写CSS代码时样式的命名规则

    二,样式类名由以字母开头的小写字母(a-z)、数字(0-9)、下划线(_)、减号(-)组成。 ID名称由不以数字开头的小写字母(a-z)、数字(0-9)、下划线(_)组成。 可使用类似下面的规则: [模块前缀|类型|作用]...

    postcss-rename:根据可自定义的重命名方案替换类名

    postcss-rename使得可以在生成的样式表中重命名CSS类名称,这有助于减小发送给用户CSS的大小。 它被设计为与Webpack这样的构建系统的插件一起使用,该构建系统可以重写JS中HTML模板和/或引用。 如果您编写了这样的...

    HTML5与CSS3基础教程(第8版)高清文字

    8.5 样式的层叠和顺序 145 8.6 使用与媒体相关的样式表 147 8.7 借鉴他人的灵感 148 第9章 定义选择器 150 9.1 构造选择器 150 9.2 按名称选择元素 152 9.3 按类或ID选择元素 153 9.4 按上...

    postjss:使用PostCSS的功能与JSS进行编译

    您可以使用样式化组件方式,css模块方式或两种方式来编写样式-选择权在于您您可以使用babel来构建您的项目静态编译,无运行时开销! 您可以使用与JSS对象兼容的任何库,而不仅仅是JSS安装npm i postjss -SBabel插件...

    React 组件样式的工具链。

    概述 消除 CSS 以支持动态计算的内联样式是一种强大的方法,与传统 CSS 相比提供了许多好处: 没有选择器的作用域样式 避免特殊性冲突 源顺序无关 死代码消除 高度表达 尽管如此,还是有一些常见的内联样式不容易...

    HTML基础学习基础认知,适合小白玩

    第一个网页文档 ...样式规则的编写 常用的CSS属性 样式背景 样式边框 样式文本 样式字体 样式字体 其他样式 WEB基础 外边距 内边距 尺寸 溢出 定位 层叠顺序 对齐方式 CSS布局 清除浮动

    贤诚CMS v2.0.zip

    4、可以自定义给模板文件、目录、CSS样式、JS脚本文件增加备注说明。   八、蜘蛛爬行记录功能: 1、可以记录百度蜘蛛、360蜘蛛、搜狗蜘蛛、谷歌蜘蛛及必应蜘蛛所爬行过的URL地址及爬行时间。 2、可以选择性的...

    architecture

    是 CSS 中最大的问题,但我们可以通过尊重级联并通过扩展通用样式来逐步构建完整样式来解决它。 所有样式都应遵循尽可能低的特殊性原则。 建筑学 源顺序旨在利用级联中的继承优势,目标是编写 DRYer 代码。 重启 ...

    Portfolio-css-hw-2:作业2

    在此作业中,我必须按照特定顺序编写一个Html文件,其中包含有关自己的必要详细信息。 编写html文件后,我使内容统一并以自己的方式对其进行样式设置。用户的故事AS AN employerI WANT to view a potential ...

Global site tag (gtag.js) - Google Analytics