前言:作为一个前端开发者，你是否曾经被一堆松散的 CSS 代码给搞晕了？你是否曾经为了调整一个元素的样式而浪费了大量的时间？如果是这样的话，那么 CSS 代码的规范写法对你来说就是非常重要的。...---- ---- 什么是 CSS 代码的规范写法？ CSS 代码的规范写法是一种编写 CSS 代码的标准化方法。这种方法旨在提高代码的可读性、可维护性和可重用性。...遵循 CSS 代码的规范写法能够让你的代码更加易于理解，并且减少错误和冗余代码的出现。 CSS 代码规范的基本原则 1. 缩进 缩进是一种非常重要的代码格式化工具。...它可以让你的代码更加易于阅读并且可以让你更容易地找到你需要的内容。一般来说，我们使用两个空格或者一个 tab 来进行缩进。 2. 命名 命名是 CSS 代码规范中最重要的一部分。...代码的重用 代码的重用是 CSS 代码规范的一个重要原则。在编写代码的时候，一定要尽可能地重用现有的代码，并且避免使用重复的代码。 总结 CSS 代码的规范写法是一个可以提高代码质量的重要方法。
本文来自设计达人网站，Jeff 看到该文感觉非常有必要学习分享，so，转载在这里，感谢原作者——写了这么久的CSS，但大部分前端er都没有按照良好的CSS书写规范来写CSS代码，这样会影响代码的阅读体验...，这里设计达人网总结一个CSS书写规范、CSS书写顺序供大家参考，这些是参考了国外一些文章以及我的个人经验总结出来，我想对写CSS的前端用户来说是值得学习的。...CSS书写规范 使用CSS缩写属性 CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。 ? ? 去掉小数点前的“0” ? ?...16进制颜色代码缩写 有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。 ? ? 连字符CSS选择器命名规范 1.长名称或词组可以使用中横线来为选择器命名。...CSS命名规范（规则） 常用的CSS命名规则 头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体佈局宽度
css代码的规范整理 1、缩进用四个空格。 2、在每个声明块的左花括号之前添加一个空格。 3、声明块的右花括号应单独设置。 4、每个声明语句：之后插入一个空格，前面没有空格。.../ .mod-example { padding-left: 15px } /* good */ .mod-example { padding-left: 15px; } 以上就是css...代码的规范整理，希望对大家有所帮助。
BEM 是 Block（块） Element（元素） Modifier（修饰器）的简称 使用BEM规范来命名CSS，组织HTML中选择器的结构，利于CSS代码的维护，使得代码结构更清晰（弊端主要是名字会稍长...，可以复用而不依赖其它组件的部分，可作为一个块（Block） 属于块的某部分，可作为一个元素（Element） 用于修饰块或元素，体现出外形行为状态等特征的，可作为一个修饰器（Modifier） 在本规范中... 在样式文件中，仅以类名作为选择器，不使用ID或标签名来约束选择器，且CSS...可转换成设置对应的 元素来表现，如 */ .search-form {} .my-img { &__search-form-logo {} } BEM 规范虽然结构比较清晰，但有时候会产生代码冗余...为避免写太多重复性的代码，我们要学会善于利用预编译语言的（适当地使用 @include @extend 等）
样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。 虽然CSS初学者易于上手，且趣味性十足，但是作为一项工程而言，还是需要有一定规范约束的。...这里简单介绍下关于css的一些规范。 1. 书写顺序 一般而言css都有一定的书写顺序，而不是想起来什么属性写说明属性。...font-family: serif; font-size: 100%; line-height: 1.2; background-color: #ff0000; } /* 规范示例...命名规范 命名规范两个注意点： 不要乱使用“id” 这是因为id在js中具有唯一性，防止多次使用而对脚本编写带来影响。而class类则可重复使用。...常见css文件命名表 css名 表示规则 base.css 基础样式表 common.css 公用 themes.css 主题 reset.css 重设 font.css 文字 layout.css 版面
缺点: 命名冗长: BEM 的命名规范较为严格，可能导致类名过长，增加了代码量和阅读难度。 样式层级深: 由于 BEM 的嵌套结构，可能导致样式层级较深，增加了 CSS 的优先级和复杂度。...SMACSS 将 CSS 代码分为五个主要类别: 基础（Base）是 HTML 元素定义默认样式，可以包含属性、伪类等选择器，如 reset.css、normailze.css 之类的格式化元素样式 CSS...缺点: 学习曲线: 对于新手来说，可能需要一定时间来适应SMACSS的规范和约定，学习曲线较陡。 增加复杂性: 有时候遵循SMACSS的规范可能会增加代码的复杂性，特别是在项目较小或简单的情况下。...到 Tools 为止，不会生成具体的 CSS 代码。 Generic: 最基本的设定，比如 reset.css、normalize.css 等。...命名约定：ITCSS需要遵循一定的命名约定和规范，有时可能需要花费额外的时间和精力来命名和组织样式代码。 可能导致过度设计：过度遵循ITCSS的规范可能导致样式表过度设计，增加不必要的复杂性。
(一)常用的CSS命名规则 头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度...下载：download 投票：vote 合作伙伴：partner 友情链接：link 版权：copyright (四)class的命名: (1)颜色:使用颜色的名称或者16进制代码...主要的 master.css 模块 module.css 基本共用 base.css 布局，版面 layout.css 主题 themes.css 专栏 columns.css ...文字 font.css 表单 forms.css 补丁 mend.css 打印 print.css 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/119319
便于阅读和交接 不依赖于js，降低制作及修改该布局时所要求的技术基础 有效避免使用js对其进行操作时产生不必要的冲突 3、CSS规范化之后，有诸多好处： 1）提高代码复用性： 2）有效压缩了文件大小...3）节省编写代码时间 4）便于统一修改 5）有效避免命名难的问题 6）便于阅读 总之，对CSS编写进行规范化之后有诸多好处，不在这里一一论述。...*注：规范化之后，更改文件的频率会大大降低，这时就可以对CSS代码进行文件压缩 三、CSS编写规范 （一）设计原则 为了使CSS样式的编写更加规范，部分模板应该从产品设计和UI设计人员最初就规划好设计原则...书写规范 1）使用CSS缩写属性 CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。...4）16进制颜色代码缩写 有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。 5）连字符CSS选择器命名规范 ① 长名称或词组可以使用中横线来为选择器命名。
CSS规范 - 分类方法 SS文件的分类和引用顺序 通常，一个项目我们只引用一个CSS，但是对于较大的项目，我们需要把CSS文件进行分类。...CSS规范 - 代码格式 选择器、属性和值都使用小写 在xhtml标准中规定了所有标签、属性和值都小写，CSS也是如此。...规范 - 优化方案 值缩写 缩写值可以减少CSS文件大小，并增加可读性和可维护性。...便于阅读修改 如果你做到了“CSS规范”的所有要求，自然你也就写出了一个便于阅读和修改的漂亮的CSS。 当然，代码格式和命名规则是相对重要一些的。...压缩工具详见：“HTML/CSS工具”部分。 其他格式优化 优化方法请参见代码格式。
CSS 命名规范 页面外围控制整体布局宽度：wrapper 页头：header 页面主体：main 内容：content 页脚：footer 导航：nav 主导航：mainbav 子导航：subnav
属性的书写顺要有一定的规律。 Display & Flow Positioning Dimensions Margins, Padding, Borders,...
CSS编码规范 1 前言 CSS作为网页样式的描述语言，在百度一直有着广泛的应用。本文档的目标是使CSS代码风格保持一致，容易被理解和被维护。...虽然本文档是针对CSS设计的，但是在使用各种CSS的预编译器(如less、sass、stylus等)时，适用的部分也应尽量遵循本文档的约定。...2 代码风格 2.1 文件 [建议] CSS 文件使用无 BOM 的 UTF-8 编码。 解释： UTF-8 编码具有更广泛的适应性。BOM 在使用程序或工具处理文件时可能造成不必要的干扰。...下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，以提高代码的可读性...解释： 尽量使用符合 CSS 语法的 selector hack，可以避免一些第三方库无法识别 hack 语法的问题。
selector共用一个样式集，则多个selector必须写成多行形式 3.每一条规则结束的大括号 } 必须与规则选择器的第一个字符对齐 4.属性名冒号之前不加空格，冒号之后加空格 5.属性值之后添加分号; 其他规范...命名规则书写规范 1、规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或 _ 2、命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合 3、命名注意缩写，但是不能盲目缩写，具体请参见常用的...8、尽可能提高代码模块的复用，样式尽量用组合的方式 9、规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名。...3.禁止在css中使用*选择符 4....如果可以，颜色尽量用三位字符表示，例如#AABBCC写成#ABC 8.如果没有边框时，不要写成border:0，应该写成border:none 9.尽量避免使用AlphaImageLoader 10.在保持代码解耦的前提下
本文作者：IMWeb 我饿了 原文出处：IMWeb社区 未经同意，禁止转载 在学习编程的时候，每次看到那些整齐规范的代码，心里顿时对这个程序员表示点点好感，有时，比如看到自己和朋友写的代码时，...那阅读起来就是苦不堪言，所以，一些基本的开发规范是必须的，是为了自己方便阅读代码，也方便他人阅读修改代码。...脚本加载 说到js和css的位置，大家应该都知道js放在下面，css放在上面。... css 代码: /* We use a :before pseudo element to solve the design problem of placing a colored square... css 代码: /* We use a :before pseudo element with a background image to solve the problem */ .text-box
这段时间在整理前端部分的代码规范，前面提到的CSS规范里面会涉及到选择器的命名，就参考BEM的命名规范，内容整理如下，供大家参考，请斧正！...如大家有兴趣，可移步至CSS编码规范 BEM是由Yandex公司推出的一套CSS命名规范，官方是这么描述它的： BEM是一种让你可以快速开发网站并对此进行多年维护的技术。...一开始，Yandex公司推出的BEM，包括了规范以及其配套构建工具。...如今提到的BEM主要是指其中的规范，在BEM最新的推广页中，对其的描述为： BEM是一种命名方法，能够帮助你在前端开发中实现可复用的组件和代码共享。...试想一下维护这类代码有多么痛苦，我们要一边检查该元素的上下文DOM结构，一边对照着css文件，一一对比，找到该元素对应的样式，也就是说我为了改一个元素的代码，需要不断翻阅HTML文件和CSS文件，可维护性非常之差
CSS 作为网页样式的描述语言。本文档的目标是使 CSS 代码风格保持一致，容易被理解和被维护。 1....代码风格 1.1 文件 [强制]CSS文件使用UTF-8编码 解释： UTF-8 编码具有更广泛的适应性。...(待讨论) 解释： BEM是一种命名方法，能够帮助你在前端开发中实现可复用的组件和代码共享。...过度使用属性简写往往会导致更混乱的代码，其中包含不必要的重写和意想不到的副作用。...解释： 尽量使用符合 CSS 语法的 selector hack，可以避免一些第三方库无法识别 hack 语法的问题。
有人建议编码规范这种东西应该落实到ESlint这类工具上去，而不是停留在文档层面。 在我看来，规范也要看和记，难道你用 vscode/sublime 写个demo还要配上语法检查这一套东西么。...这些客户端多种多样，对html/css的支持也不一，所以我们不能使用高级的布局和排版，例如flex/float/absolute定位，使用较初级的table布局能够达到兼容性最好的效果，并且还有伸缩的效果...第二种办法是写一个1px的透明像素的base64，如下代码所示： 第二种可能比较符合规范，但是第一种比较简单，并且没有兼容性问题。...CSS 属性书写顺序 属性的书写顺序对于浏览器来说没有区别，除了优先级覆盖之外。但是如果顺序保持一致的话，扫一眼可以很快地知道这个选择器有什么类型的属性影响了它，所以一般要把比较重要的属性放前面。
可能不同团队都有各自的规范，又或者很多人在写 CSS 的时候还是想到什么就写什么，不存在太多的约束。 我觉得 CSS 代码规范还是有存在的必要的，尤其是在团队配合，多人协作下，规范就显得尤为重要。...本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，并不希望大家完全采用，而是希望可以结合自己的团队需要，发展出一套适合自己的 CSS 代码规范。 也希望可以有更多的建议，共同的完善。...我觉得不同的规范都有各自的长处与缺陷，对待所谓的规范最好的方式不是人云亦云，拿来就用，而是应该结合实际情况及需求，取长补短，取其精华去其糟粕。 ...编码设置 采用 UTF-8 编码，在 CSS 代码头部使用： @charset "utf-8"; 注意，必须要定义在 CSS 文件所有字符的前面（包括编码注释），@charset 才会生效。...基于让 CSS 更简洁以及代码的复用考虑，采用上面的使用 %placeholders 定义，使用 @extend 引用的方案。
代码组织 以组件为单位组织代码段； 如果使用了多个 CSS 文件，将其按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动； Class 和 ID 使用语义化、通用的命名方式； 使用连字符 -...background-color: #f5f5f5; color: #fff; opacity: .8; /* Other */ cursor: pointer; } 任何超过 1000 行的 CSS...代码，你都曾经历过这样的体验： 这个 class 到底是什么意思呢？...它可以避免歧义与 Elements CSS class 仅能以单词和 _ 或 - 开头 中划线比下划线更容易输出 ?
important CSS本身有权重设计，任意地使用 !important 会造成权重混乱而无法维护。...不可直接 over write 或在原本框架的 class 增加内容 class class 设计RWD网站，请遵循移动设备优先原则 HTML/CSS 手机开启网页很吃手机效能和网络状况，前端工程师一开始就以手机版为优先...定位，例如 position: absolute; 不要随意 none 掉画面上的 tag 或行为 none reset.css class reset.css 常见的 a tag 不要有 underline...list 消除原有样式 请在 reset.css 上定义，并且设为第一载入次序 有JavaScript行为的 class 可以为命名加入 name space #js-project-show {}
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
