- 综合排序
- 最热优先
- 最新优先
- 来自专栏站长的编程笔记
【说站】CSS设计模式之ITCSS的介绍
CSS设计模式之ITCSS的介绍 1、ITCSS和SMACSS其实很像，SMACSS是对CSS做分类处理，而ITCSS是对CSS做分层处理。 2、分层是纵向的，从上往下，层层关联的。 Components（组件）：用于设置任何页面元素和所有页面元素样式的美学类（通常与对象类的结构结合使用） Trumps（importent）：最重要的样式，用于覆盖三角形中的任何其他内容 以上就是CSS设计模式之ITCSS
45820编辑于 2022-11-24 - 来自专栏FE32 Code
浅谈 Css 规范
ITCSS 基本概念 ITCSS（Inverted Triangle Cascading Style Sheets，「倒三角 CSS」）是一套方便扩展和管理的 CSS 体系架构，它兼容 BEM、OOCSS 根据 ITCSS 的思想，你可以这样组织你的 CSS 样式文件: stylesheets/ ├── settings/ │ ├── colors.scss │ ├── z-layers.scss 可维护性：通过将样式表分为不同的层级，ITCSS可以帮助团队更轻松地维护和更新样式代码，降低代码耦合度。 可重用性：ITCSS鼓励样式的模块化和重用，可以减少重复代码的编写，提高代码的复用性。 性能优化：通过按照特定顺序组织样式表，ITCSS可以帮助优化CSS加载和渲染性能。 缺点： 学习曲线：对于新手来说，可能需要一定时间来理解和应用ITCSS的规范和结构，学习曲线较陡。 命名约定：ITCSS需要遵循一定的命名约定和规范，有时可能需要花费额外的时间和精力来命名和组织样式代码。 可能导致过度设计：过度遵循ITCSS的规范可能导致样式表过度设计，增加不必要的复杂性。
53710编辑于 2024-03-31 - 来自专栏前端精读评论
27. 精读《css-in-js 杀鸡用牛刀》
预编译的尝试，各自都具有强大优点，本文对 css-in-js 提出的质疑我认为是欠妥当的，下面谈谈 css-in-js 如何解决作者提出的问题，以及简单介绍 OOCSS, SMACSS, BEM, ITCSS article {} .article__label {} /* label 元素 */ .article__label--selected {} /* label 元素处于被选中状态 */ 3.6 ITCSS 中的对象，描述一些常用的基础状态 Components – 对组件样式的定义，一个 UI 元素基本由 Objects 与 Components 组成 Utilities – 工具类，比如 .hidden ITCSS 虽然作者呼吁我们不要只顾着 css-in-js，要放眼看看 OOCSS, SMACSS, BEM, ITCSS, 和 ECSS 等基于原生 css 的解决方案，但我觉得把这些思想运用到 css-in-js
95520编辑于 2022-03-14 - 来自专栏樯橹代码
关于BEM的反思
当我们在项目中选择代码风格时，我们使用BEM和ITCSS的组合。 前几天我遇到了Spatie的指南网站。 在CSS部分，我发现了几个让我想到的部分。 结论 我认为：我们不需要用很多不必要的条件来是使BEM变的更复杂，这样会使情况变得更糟糕 每个人都有自己的编码风格，这根据你的工作不同而变化，很多BEM / ITCSS规范没有意义。
82520发布于 2019-09-02 - 来自专栏歪码行空
《精通CSS》第1章 基础知识
此外，还推荐大家选择并使用一种 CSS 方法论，如（BEM[1]，OOCSS[2]，SUIT[3]，SMACSS[4]，ITCSS[5]，Enduring CSS[6]等）。 https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md [4]SMACSS: https://smacss.com/ [5]ITCSS : https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/ [6]Enduring CSS: http://ecss.io
59620发布于 2020-04-07 - 来自专栏陈远峰的专栏
高质量前端资源 ( 一 )
Convention a Step Further Battling BEM (Extended Edition): 10 Common Problems And How To Avoid Them** ITCSS
2.1K11发布于 2017-09-12 - 来自专栏前端技术江湖
用vite+Vue3+ts搭建通用后台管理系统
页面目录地址 │ ├─normal │ └─system └─template // 模板相关 ├─apis └─page CSS架构之ITCSS ITCSS ITCSS是CSS设计方法论，它并不是具体的CSS约束，他可以让你更好的管理、维护你的项目的 CSS。 image.png ITCSS 把 CSS 分成了以下的几层 Layer 作用 Settings 项目使用的全局变量 Tools mixin，function Generic 最基本的设定 normalize.css
1.1K20发布于 2021-09-22 - 来自专栏琯琯博客
awesome-css-cn命名习惯和方式参考其他资源原文链接
官网 ITCSS：用于大型UI项目的稳定、可扩展、可控制的CSS架构。官网 CSS标准化 Normalize：一套提供较好的多浏览器默认样式一致性的CSS规范。 命名习惯和方式 Atomic OOBEMITSCSS：官网 BEM：官网 SMACSS：官网 Point North：官网 ITCSS：官网 OOCSS：官网 Title CSS：官网 idiomatic-css
1.3K80发布于 2018-05-09 - 来自专栏歪码行空
《精通CSS》第2章 添加样式
此处，再一次推荐大家选择并使用一种 CSS 方法论，如（BEM[9]，OOCSS[10]，SUIT[11]，SMACSS[12]，ITCSS[13]，Enduring CSS[14]等）。 //github.com/suitcss/suit/blob/master/doc/naming-conventions.md [12]SMACSS: https://smacss.com/ [13]ITCSS : https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/ [14]Enduring CSS: http://ecss.io
2K40发布于 2020-04-07 - 来自专栏code秘密花园
vite+Vue3+ts搭建通用后台管理系统
页面目录地址 │ ├─normal │ └─system └─template // 模板相关 ├─apis └─page CSS架构之ITCSS ITCSS ITCSS是CSS设计方法论，它并不是具体的CSS约束，他可以让你更好的管理、维护你的项目的 CSS。 image.png ITCSS 把 CSS 分成了以下的几层 Layer 作用 Settings 项目使用的全局变量 Tools mixin，function Generic 最基本的设定 normalize.css
90850发布于 2021-09-08 - 来自专栏程序员成长指北
用 Vite+Vue3+Ts 搭建通用后台管理系统
页面目录地址 │ ├─normal │ └─system └─template // 模板相关 ├─apis └─page CSS架构之ITCSS ITCSS ITCSS是CSS设计方法论，它并不是具体的CSS约束，他可以让你更好的管理、维护你的项目的 CSS。 image.png ITCSS 把 CSS 分成了以下的几层 Layer 作用 Settings 项目使用的全局变量 Tools mixin，function Generic 最基本的设定 normalize.css
1.3K10发布于 2021-09-18 - 来自专栏京程一灯
在大型项目中组织CSS
为了试图帮助人们构建可维护的CSS，已经有很多CSS指南了：SMACSS, OOCSS, BEM, ITCSS, ACSS, CCSS, Atomic Design, Maintanable CSS,
1.1K20发布于 2019-03-27 - 来自专栏京程一灯
大型项目中的结构化CSS
已经有很多CSS指南帮助人们构建可维护的CSS：SMACSS, OOCSS, BEM, ITCSS, ACSS, CCSS, Atomic Design, Maintanable CSS, rscss,
1.4K40发布于 2019-03-27 - 来自专栏前端食堂
前端食堂技术周刊第 59 期：GitHub Universe 2022、Rome v10、Parcel v2.8.0
历史破解之法：OOCSS、SMACSS、BEM、ITCSS、Cube CSS。 今日破解之法：CSS in JS、CSS Modules、原子化 CSS。
76720编辑于 2023-01-08 - 来自专栏YuanXin
[译]逐步替换Scss
今天我的大多数项目都遵循 ITCSS methodology ，并且创建一个配置文件专门用来存放变量定义。通常，我会为字体样式、颜色和媒体查询设置变量。
1.4K30发布于 2020-04-21 - 来自专栏全栈前端精选
前端2019年调查报告
选择SMACSS，OOCSS，Atomic Design和ITCSS的人也有所提升，至少大部分都选择了其中一种CSS方法，其中Atomic Design和ITCSS的收获最为明显。 仔细看上面提到过的CSS架构方法，如：SMACSS, OOCSS, Atomic Design, ITCSS 和 CSS-in-JS ，觉得使用舒服的人从去年的34.90%上升到2019年的42.26%
67520发布于 2020-01-14 - 来自专栏learn
【Web前端】理解调试和组织 CSS
ITCSS（层次化 CSS）：通过将样式分为基础、布局、模块、状态和主题等层次来组织 CSS，以提高可维护性。 六、CSS 的构建体系 构建体系是管理和优化 CSS 的关键部分。
43800编辑于 2024-11-19 - 来自专栏前端三元同学
【推荐收藏】10 个最佳实践来让你的CSS代码更加优雅
2.2 ITCSS 倒三角 CSS 通过在不同的层引入不同的特性来帮你更好地组织你的文件。并且，你越深入，它也将变得越具体。 ?
80830发布于 2021-07-06 - 来自专栏前端自习课
【架构】1131- 如何创建可扩展和可维护的前端架构
尽管我会在另一篇博文中讨论这个问题，但是我的 CSS 架构是基于 Harry Roberts 的 ITCSS。 2填写应用细节 通过高层和项目结构，我们已经有了一个良好的开端。
1.2K30发布于 2021-11-08 - 来自专栏code秘密花园
改善CSS的10种最佳做法
ITCSS 倒三角CSS通过将不同的图层引入不同的特性来帮助你更好地组织文件。你走得越深，就越具体。 OOCSS 面向对象的CSS或OOCSS具有两个主要原理。
1.2K10发布于 2020-06-01
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号