《概念》 《思路》 面向对象的CSS有两个原则： 独立的结构和样式 独立的容器和内容 以下几点是创建OOCSS的关键部分： 创建一个组件库 独立的容器和内容，并且避免样式来依赖位置 独立的结构和样式
按钮样式库：buttons.css 1 /* vue */ 2 [v-cloak]{display: none} 3 4 /* 滚动条 */ ...
目录 术语 规则声明 选择器 属性CSS 格式 注释 OOCSS 和 BEM - ID 选择器 JavaScript 钩子 - 边框Sass 语法 排序 变量 Mixins 扩展指令...如果你使用 BEM，也可以使用下划线（参见下面的 OOCSS 和 BEM）。 不要使用 ID 选择器。 在一个规则声明中应用了多个选择器时，每个选择器独占一行。...给没有自注释的代码写上详细说明，比如： 为什么用到了 z-index 兼容性处理或者针对特定浏览器的 hack OOCSS 和 BEM 出于以下原因，我们鼓励使用 OOCSS 和 BEM 的某种组合：...参考资料： Nicole Sullivan 的 OOCSS wiki Smashing Magazine 的 Introduction to OOCSS BEM，也就是 “Block-Element-Modifier...BEM 最初是由 Yandex 提出的，要知道他们拥有巨大的代码库和可伸缩性，BEM 就是为此而生的，并且可以作为一套遵循 OOCSS 的参考指导规范。
无论是 css-in-js 还是 css 预编译的尝试，各自都具有强大优点，本文对 css-in-js 提出的质疑我认为是欠妥当的，下面谈谈 css-in-js 如何解决作者提出的问题，以及简单介绍 OOCSS...3.3 OOCSS OOCSS 成为 css 的面向对象加强版，每个 class 只处理一件事： .size {width: 25%;} .bgBlue {background:blue} .g-bd2...然而，先不说 oocss 带来的巨大零散 class 导致的维护成本，以及修改 class 导致的巨大风险，class 的本意是语义化，如果让 class 使用一堆对象描述堆砌，我们将很难定位一个元素，...css 有 5 个类别： Base 基础样式 Layout 布局样式 Module 模块样式 State 状态样式 Theme 主题样式 我们通过这 5 种类别来拼凑出完整的 class，我感觉就是对 OOCSS...虽然作者呼吁我们不要只顾着 css-in-js，要放眼看看 OOCSS, SMACSS, BEM, ITCSS, 和 ECSS 等基于原生 css 的解决方案，但我觉得把这些思想运用到 css-in-js
OOCSS:面向对象的CSS样式，通过对CSS样式的合理规范，重复使用，达到代码的精简，便于换肤。...在组件库内寻找可用的元素组装页面 往你想要扩展的对象本身添加Class，而不是他的父节点 对象应保持独立性 避免使用ID选择器，权重太高，无法重用 避免位置相关的样式 保证选择器相同的权重 类名：简短、清晰、语义化、OOCSS...的名字并不影响HTML语义化 拓展 OOCSS Reset 优点：样式初始化设置非常全面 缺点：设置了部分多余的设置，border Normalize 优点： 缺点：有些默认的没有设置 Neat.css
CSS模块化 Normalize.css: http://necolas.github.io/normalize.css/ LESS:http://www.lesscss.net/ OOCSS:http...://www.oocss.cc/ http://oocss.org/ CssReset:http://www.cssreset.com/ 23.
OOCSS 基本概念 OOCSS（Object-Oriented CSS）即面向对象的 CSS，它借鉴了 OOP（面向对象编程，OOP 已在 JavaScript 和 后端语言中得到广泛使用，不止是 JS...margin: 5px 10px 10px; background: blue; border: 1px solid #ccc; } 像上面这个 box 的样式，使用 OOCSS...10px } .mb-10 { margin-bottom: 10px; } .ml-10 { margin-left: 10px; } 优缺点 优点: 扩展性: OOCSS...这可能会给不熟悉 OOCSS 的人带来一些困惑，并且会使您的标记变得混乱。 学习成本: 如果您正在使用 OOCSS 而您的同事不熟悉它，这将需要他们在继续之前学习如何使用它，这需要时间。...ITCSS 基本概念 ITCSS（Inverted Triangle Cascading Style Sheets，「倒三角 CSS」）是一套方便扩展和管理的 CSS 体系架构，它兼容 BEM、OOCSS
1、OOcss ? OOCSS 意为面向对象的CSS。这种方法有两种主要观点: 结构与设计分离 容器和内容分离 使用这套结构，开发者能得到可以在不同地方使用的一般类。...此外，这种OOCSS的方法本身并没有明确的规则，而是抽象的建议，所以这种方法在生产中的结果会有不同。 实际结果就是，这种OOCSS的思想启发了其他人创建出属于他们自己更具体的代码结构。...修饰层（Cosmetic layer）代码是OOCSS的风格，对元素的外观做一些小的修改。建议只保留影响元素外观，但不会破坏网站布局的样式（比如颜色和不重要的缩进）。...修饰层（cosmetic layer）是以描述性OOCSS类（“atomic”类）的形式设计的，并且不会影响其他的CSS代码，可选择性的用于标记当中。 5、AMCSS ?
接下来将为你讲述三个主流的CSS设计思想和一个最近通用的CSS设计思想：OOCSS、SMACSS、BEMCSS、METACSS。...OOCSS OOCSS,字面意思是面向对象的CSS，是由Nicole Sullivan提出的css理论，虽说是理论，实则更像一种程序员间约定的规范： Separate structure and skin...（分离结构和主题）减少对 HTML 结构的依赖 Separate container and content（分离容器和内容）增加样式的复用性 在 OOCSS 的观念中，强调重复使用 class，而应该避免使用...OOCSS追求元件的复用，其class命名更为抽象，一般不体现具体事物，而注重表现层的抽取。...与OOCSS抽取修饰类的方式的不同，SMACSS是抽取更高级别的样式类，得到更强的复用性，如隐藏某个元素的写法： .is-hidden{ display: none; } Theme Rules
OOCSS Object Oriented CSS，面向对象的CSS，旨在编写高可复用、低耦合和高扩展的CSS代码。 OOCSS是以面向对象的思想去定义样式，将抽象和实现分离，抽离公共代码。...OOCSS 认为 container（容器） 和 content（内容） 是需要隔离开的。也就是说，尽量不要去使用依赖于节点结构位置的样式定义。...「优点：」 说到 OOCSS 的优点，因为样式重复利用，所以 CSS 代码量自然就减少了，可以降低我们工作量。代码量少，那加载速度自然也快，代码简洁，便于维护。...「缺点：」 OOCSS 的缺点也很明显，它只适用于大型网站项目（因为重复组件，样式多），小型项目优势不明显（代码少）。...「优点：」 ACSS 的优点是可以写基础、视觉功能小的、单用途的 CSS，相当于把每一个单一的作用定义一个class，这点也是和 OOCSS 不一样的地方。
html5boilerplate: http://html5boilerplate.com/ CSS模块化 · Normalize.css: http://necolas.github.io/normalize.css/ · OOCSS...:http://www.oocss.cc/ http://oocss.org/ · CssReset:http://www.cssreset.com/ 文档工具 · JSDoc: https://github.com
原则 “ class 的命名按照功能 class 的功能单一 相关资料 “https://css-tricks.com/lets-define-exactly-atomic-css/ OOCSS (Object-Oriented...CSS 面向对象 CSS) 定义 “OOCSS (Object-Oriented CSS 面向对象 CSS ) 是组织 CSS 的领先的模块化或基于组件的系统。...相关资料 “http://oocss.org/ SMACSS (Scalable and Modular Architecture for CSS) 定义 “SMACSS（Scalable and Modular...仅仅是辅助函数与变量 Generic – 通用层，比如 reset html、body 的样式 Elements – 对通用元素的样式重置，比如 a p div 等元素的样式重置 Objects – 类似 OOCSS
Generic（常规）：CSS重置，其中可能包括Eric Meyer的重置， Normalize.css或您自己的一批代码 Base（元素）：没有类的单个HTML元素选择器 Objects（对象）：通常遵循OOCSS
Improve Performance class命名 如何命名class BEM CCSS ACSS SMACSS An Introduction To Object Oriented CSS (OOCSS
在oocss中，对模块的定义充分利用了这个特性。...oocss的模块基本结构如下： <div
使用inline-block，基于 OOCSS 和 MindBEMding, 可以 帮助我们快速构建组件.
此外，还推荐大家选择并使用一种 CSS 方法论，如（BEM[1]，OOCSS[2]，SUIT[3]，SMACSS[4]，ITCSS[5]，Enduring CSS[6]等）。...参考资料 [1]BEM: https://en.bem.info/methodology/quick-start/ [2]OOCSS: http://oocss.org/ [3]SUIT: https:
OOCSS(Object-Oriented CSS) OOCSS有两个编写原则： •结构与样式分离•容器与内容分离 我们来看看官网的一个例子： ?...button> Danger button SMACSS SMACSS，一个长得很像OOCSS...CSS，未来可期 资料来源 1.https://developer.mozilla.org/zh-CN/docs/Archive/CSS32.http://oocss.org/3.http://getbem.com
hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互; 4）通过 content: " "生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
