引入CCSS（组件CSS）

钥匙要点

• CCSS（组件CSS）是CSS体系结构，旨在简化大型Web应用程序的创作体验，使其可维护，可管理且可扩展。它鼓励基于组件的Web开发，将标记和样式捆绑到可重复使用的HTML元素中。 CCS的主要原理包括创建小型，独立的可重复使用的组件；确保组件是模块化和孤立的；编写可以组合和可预测的CSS；并清楚地记录所有CSS组件。
> CCSS使用特定的目录结构和命名约定，主要基于SMACSS和BEM方法。它还促进了诸如Grunt之类的任务跑步者的使用来自动执行通用任务，例如CSS汇编或HTML验证。
• CCSS通过使样式模块化来提高Web应用程序的可扩展性，可维护性和性能，从而降低了样式在整个应用程序中发生冲突的风险，并允许浏览器仅解析要渲染的组件的样式。它与任何JavaScript框架兼容，可以与CSS预处理，例如Sass，Light或STYLUS。
• > CCSS或组件CSS是一种架构，简化了大型Web应用程序的CSS创作体验。
• >大型Web应用程序通常具有很多CSS文件，并且通常有许多开发人员同时处理这些文件。随着如此众多的框架，指南，工具和方法（OOCS，SMACS，BEM等）的出现，开发人员需要一个可维护，可管理且可扩展的CSS体系结构。
>

作为前端工程师，我相信基于组件的Web开发是前进的道路。 Web组件是通过W3C运行的标准集合。它们使我们能够将标记和样式捆绑到可重复使用的HTML元素中，这些元素是真正封装的

。这意味着我们需要开始考虑基于组件的CSS开发。当浏览器制造商正在实施这些标准时，我们可以在此期间使用

soft-apsapsulation

。

>让我们确切地查看CCSS是什么，以及如何在复杂的Web应用程序中为CSS架构中使用它。

CCSS 的元素 以下是完全或以修改的方式使用的主要元素，以实现CCSS体系结构的最佳配置。 > smacss 由乔纳森·斯诺克（Jonathan Snook）创建的Smacss代表CSS的可扩展和模块化体系结构。它更像是样式指南，而不是僵化的框架。在CCSS使用时，请阅读有关结构背景的SMACSS。

> bem

由Yandex的开发人员创建的 bem代表“块”，“元素”，“修改器”。这是一种前端方法，它是开发Web接口时的一种新思维方式。 Yandex的家伙提出了BEM，可以在Harry Roberts的出色文章中找到更多信息。

sass

Sass是具有超级大国的CS。我强烈推荐它，但是如果您愿意，您也可以少使用。请参阅SASS文档以获取更多信息。

指南针

指南针没有班级定义；这是SASS的扩展，可提供许多实用程序。它用于一般有用的混合蛋白和SASS汇编。在需要供应商前缀的情况下，应始终使用Compass Mixins。这再次是一个不错的选择和波旁威士忌，首先是一个很好的选择。

CCSS

的原理

现在让我们看一下CCSS的主要原理。> 基于组件的>

撰写可重复使用的小型和独立的组件。可重复使用的CSS组件是不仅存在于DOM树的特定部分或需要使用某些元素类型的组件。如有必要，应使用额外的HTML元素使组件可重复使用。

模块化和孤立的

>组件应具有UI某个部分所需的一切，并且具有一个焦点。每个组件都应隔离，这意味着它不会直接修改或取决于其他组件。

隔离比各个组件的代码重复使用更重要，因为重复使用可以增加依赖关系和紧密的耦合，最终使CSS易于管理。

综合

>以旨在减少花费时间写作时间的方式创作CSS时，应该以一种花费更多时间更改html课程的元素上的元素来修改或添加样式的方式来思考它。对于所有开发人员来说，当作者CSS就像组装乐高积木相比，比与CSS战争打架要容易得多。 CSS课程是应用来组成样式的构建块。

>

可预测的

>可预测性意味着当您作者CSS时，您的规则会按照您的期望。这对于拥有许多页面的大型应用程序很重要。避免使用过度复杂的选择器和通用类名称，因为这些名称可能会导致不可预测的CSS。

文档

大多数人认为CSS是不言自明的。实际上，通常情况并非如此！ CSS组件必须具有清晰的文档，以描述他们的工作以及应如何使用。

目录结构

下面的

是一个示例目录结构，可更容易可视化。我还在CCSS GitHub repo中包括了一个示例设置。

styles
    ├── bootstrap.css
    ├── ext
    │   ├── bootstrap
    │   │   ├── _settings.scss
    │   │   └── bootstrap.scss
    │   └── font-awesome
    │       └── font-awesome.scss
    ├── font-awesome.css
    ├── images.css
    ├── main.css
    └── scss
        ├── _config.scss
        ├── base
        │   ├── _animation-classes.scss
        │   ├── _base-classes.scss
        │   ├── _base.scss
        │   └── images.scss
        ├── components
        │   ├── directives
        │   │   ├── _empty-state.scss
        │   │   ├── _legend.scss
        │   │   └── _status-message.scss
        │   ├── pages
        │   │   ├── _404.scss
        │   │   └── _redirect.scss
        │   └── standard
        │       ├── _alarm-state.scss
        │       ├── _graph-message.scss
        │       └── _panel.scss
        ├── main.scss
        ├── mixins
        │   ├── _animation.scss
        │   ├── _bem.scss
        │   └── _icon.scss
        └── themes
            └── _light.scss

仅编辑/作者在上面显示的文件夹中的SCSS/文件夹中的文件。这允许在EXT/文件夹中轻松更新外部库。许多应用程序从Bootstrap或Foundation（例如Bootstrap或Foundation）等外部CSS框架开始，因此我将它们添加到ext/内的示例设置中。但是，所有CSS都从头开始写了绝对可以。上面提到的其他所有内容仍然适用。

示例组件/目录非常适合AngularJS应用程序，但可以针对其他框架或应用程序进行自定义。更多信息在下面的“体系结构”部分中。

> 在HTML页面中，包括来自样式/文件夹的所有.css文件，其中包含所有编译的CSS（来自Grunt，Compass等）。永远不要改变它们。

命名约定 - 简化的BEM

u-classname - 全球基础/实用程序类
> img-classname - 全局图像类
• componentName - 标准组件（b）
• componentName-ElementName - 组件的元素（e）
>
• componentName-modifierName - 组件的修饰符（M）
>请注意Uppercamelcase组件名称样式，以指示它是主元素；这表示它是组件

的边界。元素和修饰符名称分别是元素名称和modifierName。请勿使用连字符（ - ）将组件名称分开，因为它们表示元素/元素名称的开始。

架构和设计 让我们考虑CCSS鼓励的体系结构。

grunt

grunt是一个很棒的任务跑步者，可以自动化许多常见的琐事（例如编译CSS或验证HTML）。还有其他任务跑步者；理想的工作流程涉及使用一个在开发中的文件，并在更改时重新编译CSS。

>文件组织

再次查看源自SMACSS的目录结构。请注意包含所有外部框架（例如Bootstrap）的Ext/ Directory。为了保持轻松升级，不应修改这些；相反，应将覆盖和扩展放在基础/目录中。

>

base/是您保留全局基础样式的位置。

>

_base.scss仅是元素选择器的基本样式。这些是“ CSS重置”。

>

_base-classes.scss是在许多页面，视图和组件中使用应用程序的所有实用程序类。带有u-

的前缀类名称

images.scss用作SCSS汇编源。它应将所有站点图像定义为数据URI。 /app/styles/images.css是从此文件生成的。

>

_ANIMATE.SCSS保留所有应用程序范围的动画类。

_bootstrap-overrides.scss仅保存框架。有时，框架选择器的特异性水平是如此之高，以至于覆盖它们需要较长的特定选择器。在SCSS组件的背景下，不应在全球层面上覆盖。相反，所有全球覆盖都可以转到这里。

组件

>上述未提及的可重复使用的CSS的任何单位都被认为是“组件”。我们使用AngularJS，因此将它们分类为3种类型的CSS组件：查看/页面，指令和标准；因此，源自smacss的目录结构。

在GitHub存储库中的示例设置中，我创建了明确的明确文件夹。如果您的应用程序很小，则可以将它们放在一个文件夹中。所有组件都遵循修改后的BEM命名约定与骆驼的结合。这使我

伟大的胜利

鼓励其他团队成员遵循BEM风格的语法。当使用典型的bem样式与 - ， - 和__字符一起使用典型的bem样式时，它也避免了很多混乱，它们会生成类名称，例如module-name __child-name-modifier-name！> >组件中的CSS类定义顺序反映HTML视图也很重要。这使得更容易扫描，样式，编辑和应用类。最后，最好为Web应用程序拥有广泛的样式指南，并遵循CSS和SASS的指南（例如，避免@Extend）。

> ccss示例

>请参阅CSS的示例设置的代码。

>

这是sass中的一个示例组件：

此编译到以下CSS：

styles
    ├── bootstrap.css
    ├── ext
    │   ├── bootstrap
    │   │   ├── _settings.scss
    │   │   └── bootstrap.scss
    │   └── font-awesome
    │       └── font-awesome.scss
    ├── font-awesome.css
    ├── images.css
    ├── main.css
    └── scss
        ├── _config.scss
        ├── base
        │   ├── _animation-classes.scss
        │   ├── _base-classes.scss
        │   ├── _base.scss
        │   └── images.scss
        ├── components
        │   ├── directives
        │   │   ├── _empty-state.scss
        │   │   ├── _legend.scss
        │   │   └── _status-message.scss
        │   ├── pages
        │   │   ├── _404.scss
        │   │   └── _redirect.scss
        │   └── standard
        │       ├── _alarm-state.scss
        │       ├── _graph-message.scss
        │       └── _panel.scss
        ├── main.scss
        ├── mixins
        │   ├── _animation.scss
        │   ├── _bem.scss
        │   └── _icon.scss
        └── themes
            └── _light.scss

>您的HTML可能看起来像这样：

<span>.ProductRating {
</span>  <span>// nested element
</span><span>  <span>@include e(title) {</span>
</span>    <span>...
</span>  <span>}
</span>  <span>// nested element
</span><span>  <span>@include e(star) {</span>
</span>    <span>...
</span>    <span>// nested element's modifier
</span><span>    <span>@include m(active) {</span>
</span>      <span>...
</span>    <span>}
</span>  <span>}
</span><span>}</span>

>您可以参考简化的BEM Mixin，该Mixin使用参考选择器来实现此目标，并且比 @At-root更简单。与BEM合作在SASS 3.3中变得更加容易，这使我们能够编写易于理解的可维护代码。

贡献

在GitHub存储库中以问题/PR的形式贡献

<span><span>.ProductRating</span> {
</span>  ...
<span>}
</span><span>// nested element
</span><span><span>.ProductRating-title</span> {
</span>  ...
<span>}
</span><span>// nested element
</span><span><span>.ProductRating-star</span> {
</span>  ...
<span>}
</span>// nested element's <span>modifier
</span><span><span>.ProductRating-star--active</span> {
</span>  ...
<span>}</span>

添加更多示例，通过后处理，澄清等的改进等。

，请务必查看与CCSS相关的信用和有用资源的存储库。如果您有任何疑问或评论，请在下面的评论或github repo中发布它们。

>

经常询问有关组件CSS（CCSS）

的问题

> CCSS和传统CSS？

>传统CSS的主要区别是一种样式表语言，用于描述用HTML编写的文档的外观和格式。它旨在使内容与演示文稿的分离，包括布局，颜色和字体。另一方面，CCSS（组件CSS）是一种现代的样式方法，在该方法中，样式直接链接到其特定组件。这意味着样式在本地范围范围内范围范围为组件，从而降低了样式在应用程序中发生冲突的风险。这种方法使您的样式更加可维护，模块化且易于扩展。

> CCSS如何改善项目的可扩展性？

我可以使用任何JavaScript框架的CCSS吗？

是的，CCSS与任何JavaScript框架都兼容。无论您是使用React，Angular，Vue还是任何其他框架，都可以使用CCSS来样式组件。这使CCSS成为任何前端开发人员的多功能工具。

>

> CCSS如何处理全局样式？

，而CCSS主要用于造型单个组件，它也可以处理全球样式。您可以在单独的文件中定义全局样式，并根据需要将它们导入组件。这使您可以在应用程序中保持一致的外观和感觉，同时仍然从CCSS的模块化中受益。

>

>使用CCSS在内联样式上使用CCSS有什么好处？使用，有几个限制。他们无法使用媒体查询，伪级或伪元素。它们也具有最高的特异性，这可能会导致覆盖风格的困难。另一方面，CCSS提供了CSS的全部功能，包括使用媒体查询，伪级和伪元素的能力。它的特异性还低于内联样式，因此在必要时可以更轻松地覆盖样式。

>

> CCSS如何通过将样式范围范围范围划分到单个组件，CCSS，CCSS如何改善Web应用程序的性能？可以显着提高Web应用程序的性能。在传统的CSS中，浏览器必须解析整个CSS文件以渲染页面，这可以减慢渲染过程。但是，使用CCSS，浏览器只需要解析当前渲染的组件的样式，从而导致页面加载时间更快。

>我可以使用CCSS的CSS预处理器？这使您可以利用这些预处理器的功能，例如变量，混合素和嵌套规则，同时仍然从CCSS的模块化和可扩展性中受益。

> CCSS如何处理CSS特异性？ CCSS的主要优点之一是它消除了与CSS特异性相关的问题。由于每个组件都有自己的样式，因此无需担心样式相互冲突或互相覆盖。这使得管理样式并降低与CSS特异性相关的错误的风险变得更加容易。

>我可以使用CCSS进行响应式设计吗？

是的，您可以将CCSS用于响应式设计。就像传统的CSS一样，CCSS支持媒体查询，这使您可以根据设备的屏幕尺寸应用不同的样式。这使得创建一个在所有设备上看起来都很好的响应式设计变得容易。

>

CCSS如何改善项目的可维护性？

更容易管理。每个组件都有自己的样式，因此，如果您需要更新或修改组件，则只需要更改该特定组件的样式即可。这降低了引入错误的风险，并使更新或重构代码更加容易。

>

以上是引入CCSS（组件CSS）的详细内容。更多信息请关注PHP中文网其他相关文章！