web项目开发人员配比_Web开发人员ITCSS简介

有一些很棒的方法来构造CSS代码 ，并且它们都以不同的方式工作。 最受欢迎的是OOCSS和SMACSS ，但是还有一种鲜为人知的方法，即哈里·罗伯茨 （ Harry Roberts ）创建的称为ITCSS（倒三角CSS）的方法。

它不是库或框架，而是一种可扩展且易于操作的代码编写方法 。 ITCSS的好处从简单的代码组织到较小的文件大小 ，以及对CSS体系结构的更多理解。

ITCSS并不适合所有人，但它提供了一种专业的方式来在编码过程中清晰地查看样式表。 让我们深入研究ITCSS背后的概念，并了解如何将其应用于Web项目。

什么是ITCSS？

组织CSS的现代方法通常会退回到模块化或CSS对象来构造抽象思想。

倒三角形CSS的新思想是一种基于 CSS属性 的特异性和重要性的分层方法 。 与SMACSS和OOCSS相比，这是一种鲜为人知的方法-尽管两者都可以与ITCSS结合使用。

由于ITCSS 主要是专有的 ，因此不存在有关其用法的详细规则手册。 我们只能使用一组特定的原则 。 作者在下面的视频中谈到了它们。

默认情况下，ITCSS使用相同的原则OOCSS 但基于特异性更大的分离 。 因此，如果您已经熟悉OOCSS，请考虑尝试使用这种独特的替代CSS体系结构 。

以下是使用ITCSS的最大好处：

• 页面对象可以拆分为自己CSS / SCSS文件，以实现可重用性 。 复制/粘贴并将每个对象扩展到其他项目很简单 。
• 具体的深度取决于您 。
• 没有设置的文件夹结构 ，也不需要使用预处理工具。
• 您可以合并来自其他方法（例如CSS模块）的概念，以创建自己的混合工作流 。

ITCSS系统

让我们使用Lubos Kmetko的帖子中的以下插图看一下倒三角模型的工作原理。

图片：XFive.com

从倒三角形的平坦顶部到底部尖端的定向流表示特异性的增加 。 由于专注于降低特异性 ，因此可以更轻松地在站点中多次重用类。

三角形的每个子部分都可以视为一个单独的文件或文件组，尽管您无需以这种方式编写代码。 由于具有导入功能，因此对Sass / Less用户更有意义。 只需将每个小节视为拆分和组织可重用CSS代码的方法即可 。

让我们快速看一下倒三角形从上到下的每个部分 。

• 设置 –预处理程序变量和方法（无实际CSS输出）
• 工具 – Mixins和函数（无实际CSS输出）
• 常规 – CSS重置，其中可能包括Eric Meyer的重置， Normalize.css或您自己的一批代码
• 元素 –没有类的单个HTML元素选择器
• 对象 -通常遵循OOCSS方法的页面结构类
• 组件 –用于设置任何页面元素和所有页面元素样式的美学类（通常与对象类的结构结合使用）
• Trumps –最重要的样式，用于覆盖三角形中的任何其他内容

倒三角形的每一层都可以调整以满足您的需要 。 因此，如果您不使用CSS预处理器，则不需要设置或工具层。

您应该随心所欲地解释每个小节。 例如， 乔丹·科斯基 （ Jordan Koschei）解释了他如何将结构和美学结合在一起成为对象类，而在“组件”部分则很少。

ITCSS 没有您必须遵循的严格规则 。 没有ITCSS符合性检查器，没有人会为您稍微改变此模型而大喊大叫。

尽管ITCSS的创建者Harry Roberts有兴趣保留其方法供内部使用，但您可以在此GitHub存储库中找到ITCSS的开源示例 。 它由哈里·罗伯茨（Harry Roberts）的个人网站CSS向导帐户托管。

BEM + IT = BEMIT命名

BEM是最流行CSS命名方案之一。 这代表Block-Element-Modifier，并且遵循非常特殊的语法。

BEM中的每个元素都描述CSS类的命名约定：

• 块是可以复制并独立存在的单个元素的类。
• 元素总是块的一部分
• 修改器总是修改块或元素以稍微改变其外观（打开/关闭，活动/不活动，固定，静态，高亮/中性）。

BEM语法规定了非常具体的规则。 以下是BEM网站上的示例：

.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }

块的名称不能分开，或者名称之间用一个破折号或一个下划线隔开。 元素使用两个下划线，它们描述了与该特定块一致的内部元素。 修饰符的工作方式相同，但使用两个破折号进行标识。

哈里在这篇博客中深入研究了BEMIT。 他的描述非常简洁，表明ITCSS的真正本质是与其他CSS方法论保持友好关系 。

Harry 为每个主要类名称的前缀定义的对象定义了名称空间 。 对于对象，它们分解为o- ，对于组件来说分解为c- ，对于实用程序来说分解为u- （例如clearfix或文本居中）。

这是一些代表典型的BEMIT命名约定的示例代码。

<div class="o-media  c-user  c-user--premium">
  <img src="" alt="" class="o-media__img  c-user__photo  c-avatar" />
  <p class="o-media__body  c-user__bio">...</p>
</div>

他还建议对基于媒体样式的类使用@后缀。 因此，对于大屏幕， .o-media类可能会更改为.o-media@lg ，对于中型屏幕，可能会更改为.o-media@md 。

就个人而言，我认为对于基本的Web项目而言 ，其他后缀太复杂了 。 我认为大多数开发人员宁愿使用常见的媒体查询，并在不同的断点处重写类。 但是我不能说这两种方法是对还是错，任何人都可以单独决定是否要使用BEMIT。

我强烈建议阅读BEMIT简介文章，以了解有关ITCSS为何扩展BEM以及如何命名CSS类的更多信息。

ITCSS可以概括为一种编写可重用和可伸缩CSS 的组织方法 。 BEM是首选的命名语法，BEMIT 对此进行了扩展，以使用命名空间来获得更具体和可识别的代码。

有很多东西要学习，如果您是CSS的新手，那么这将是一个很难突破的概念。 但是，如果您愿意学习，我保证您会对ITCSS代码的流畅特性感到惊讶。

结语

前端开发人员一直在寻求优化其工作流程。 ITCSS只是另一种有助于构建复杂网站的改进方法。

困难在于学习其在实际项目工作中的工作方式。 如果您有胆识，并且愿意学习，那么ITCSS可能是值得添加到您的工具包中的东西。 尽管我还没有找到任何官方文档，但是仍然有很多在线资源可以了解ITCSS。

• 使用新CSS架构ITCSS （creativebloq.com） 管理大型Web项目
• 使用ITCSS管理CSS项目–演示幻灯片 （speakerdeck.com）
• 带有ITCSSCSS项目（1小时视频演示）
• ITCSS –一种有趣的组织大型项目的方式 （css-tricks.com）

翻译自: https://www.hongkiat.com/blog/inverted-triangle-css-web-development/