animate.ccss_引入CCSS（组件CSS）

子车新立

2023-12-01

animate.ccss

CCSS, or Component CSS, is an architecture that simplifies the CSS authoring experience for large web applications.

CCSS或Component CSS是一种体系结构，可简化大型Web应用程序CSS创作体验。

Large web applications generally have a lot of CSS files and often have many developers working on those files simultaneously. With the advent of so many frameworks, guidelines, tools, and methodologies (OOCSS, SMACSS, BEM, etc.), developers need a CSS architecture that is maintainable, manageable, and scalable.

大型Web应用程序通常具有许多CSS文件，并且经常有许多开发人员同时处理这些文件。随着如此众多的框架，指南，工具和方法论(OOCSS，SMACSS，BEM等)的出现，开发人员需要一种可维护，可管理和可扩展CSS架构。

As a frontend engineer, I believe that component-based web development is the way forward. Web components are a collection of standards that are working their way through the W3C. They allow us to bundle up markup and styles into reusable HTML elements that are truly encapsulated. What this means is we need to start thinking about component-based CSS development. While the browser makers are implementing these standards, we can use soft-encapsulation in the meantime.

作为前端工程师，我相信基于组件的Web开发是前进的道路。 Web组件是通过W3C运行的一系列标准。它们使我们能够将标记和样式捆绑到真正可封装的可重用HTML元素中。这意味着我们需要开始考虑基于组件CSS开发 。在浏览器制造商实施这些标准的同时，我们可以同时使用软封装 。

Let’s take a look at exactly what CCSS is and how you can use it in you are setting up the CSS architecture for a complex web application.

让我们来看看CCSS是什么以及如何在为复杂的Web应用程序设置CSS体系结构时使用它。

CCSS的要素 (Elements of CCSS)

Below are the major elements used either fully or in a modified way to achieve the best configuration for the CCSS architecture.

以下是为实现CCSS架构的最佳配置而完全或以修改方式使用的主要元素。

SMACSS (SMACSS)

SMACSS, created by Jonathan Snook, stands for Scalable and Modular Architecture for CSS. It is more of a style guide than a rigid framework. Read about SMACSS for background on the structure as CCSS uses it.

由Jonathan Snook创建的SMACSS代表CSS的可伸缩和模块化体系结构。它更多的是样式指南，而不是严格的框架。在CCSS使用SMACSS时，请阅读有关该结构的背景知识。

边界元 (BEM)

BEM, created by developers at Yandex, stands for “Block”, “Element”, “Modifier”. It is a front-end methodology that is a new way of thinking when developing web interfaces. The guys at Yandex came up with BEM and more information can be found in Harry Roberts’ excellent article.

由Yandex的开发人员创建的BEM代表“块”，“元素”，“修饰符”。它是一种前端方法，是开发Web界面时的一种新思维方式。 Yandex的团队提出了BEM，更多信息可以在Harry Roberts的精彩文章中找到。

萨斯 (Sass)

Sass is CSS with superpowers. I highly recommend it but you can also use Less if you prefer. Please refer to the Sass documentation for more information.

Sass是具有超能力的 CSS。我强烈推荐它，但是如果您愿意，也可以使用Less 。请参阅Sass文档以获取更多信息。

罗盘 (Compass)

Compass has no class definitions; it is an extension for Sass that provides a lot of utilities. It is used for general useful mixins, and sass compilation. Compass mixins should nearly always be used in cases where vendor prefixes are required. This again is a nice-to-have and Bourbon, on the first look is a great alternative.

指南针没有类定义；它是Sass的扩展，提供了许多实用程序。它用于一般有用的mixin和sass编译。在需要供应商前缀的情况下，几乎应始终使用指南针mixin。这又是一个不错的选择，波旁威士忌(Bourbon)乍一看是一个不错的选择。

CCSS原则 (Principles of CCSS)

Let’s now look at the main principles of CCSS.

现在让我们看一下CCSS的主要原理。

基于组件 (Component-based)

Write small and independent components that are reusable. A reusable CSS component is one that does not exist only on a specific part of the DOM tree or require the use of certain element types. If necessary, extra HTML elements should be used to make a component reusable.

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

模块化和隔离 (Modular and Isolated)

Components should have everything necessary for a certain part of the UI and have a single focus. Each component should be isolated, meaning it does not directly modify or depend on another component.

组件应具有UI特定部分所需的一切，并具有单一焦点。每个组件都应该隔离，这意味着它不会直接修改或依赖于另一个组件。

Isolation is more important than code reuse across components as reuse can increase dependencies and tight coupling, eventually making the CSS less manageable.

隔离比跨组件的代码重用更为重要，因为重用会增加依赖性和紧密耦合，最终使CSS的可管理性降低。

可组合 (Composable)

When authoring CSS in a way that aims to reduce the amount of time spent writing it, one should think of it in a way to spend more time changing HTML classes on elements for modifying or adding styles. It is much easier for all developers to author CSS when it is like assembling lego blocks than to fight the CSS war. CSS classes are the building blocks that should be used to compose styles.

以旨在减少花费在编写CSS上的时间的方式编写CSS时，应该以花费更多时间来更改元素上HTML类以修改或添加样式的方式来思考CSS。对于所有开发人员而言，编写CSS(就像组装乐高积木)比打CSS战争要容易得多。 CSS类是应用于构成样式的构造块。

可预测 (Predictable)

Predictability means when you author CSS, your rules behave as you expect. This is important for large applications that have many pages. Avoid using overly complicated selectors and generic class names, as these can lead to unpredictable CSS.

可预测性意味着当您编写CSS时，您的规则将按预期运行。这对于具有许多页面的大型应用程序很重要。避免使用过于复杂的选择器和通用类名，因为它们可能导致无法预测CSS。

文献资料 (Documentation)

Most people assume CSS is self-explanatory. In fact, this is usually not the case! CSS components must have clear documentation that describe what they do and how they should be used.

大多数人认为CSS是不言自明的。实际上，通常不是这种情况！ CSS组件必须具有清晰的文档，以描述它们的用途以及使用方法。

目录结构 (Directory Structure)

Below is an example directory structure for easier visualization. I have also included an example setup in the CCSS GitHub repo.

下面是一个目录结构示例，可简化可视化过程。我还在CCSS GitHub存储库中包含了示例设置。

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

Only edit/author the files in the scss/ folder in the folder tree shown above. This allows for updating external libraries easily, which are in the ext/ folder. Many applications start out with an external CSS framework like Bootstrap or Foundation, so I added them in the example setup inside ext/. But it’s absolutely fine to have all the CSS written from scratch; everything else mentioned above still applies.

仅编辑/创作上面显示的文件夹树中scss/文件夹中的文件。这样可以轻松更新位于ext/文件夹中的外部库。许多应用程序都是从外部CSS框架(如Bootstrap或Foundation)开始的，所以我在ext/的示例设置中添加了它们。但是从头开始编写所有CSS绝对没问题。上面提到的所有其他内容仍然适用。

The example components/ directory is well-suited for an AngularJS application, but can be customized for other frameworks or applications. More information is in the “Architecture” section below.

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

In the HTML page, include all the .css files from the style/ folder, which contains all the compiled CSS (from Grunt, Compass, etc.). Never alter them.

在HTML页面中，包括来自style/文件夹的所有.css文件，其中包含所有已编译CSS(来自Grunt，Compass等)。切勿更改它们。

命名约定–简化的BEM (Naming Conventions – Simplified BEM)

u-className – Global base/utility classes
u-className –全局基类/实用程序类
img-className – Global image classes
img-className –全局图像类
animate-className – Global animation classes
animate-className –全局动画类
ComponentName – Standard Components (B)
ComponentName –标准组件(B)
ComponentName-elementName – Component’s Element (E)
ComponentName-elementName –组件的元素(E)
ComponentName--modifierName – Component’s Modifier (M)
ComponentName--modifierName –组件的修饰符(M)

Note the UpperCamelCase Component name style to indicate that it is the master element; this denotes that it is the boundary of the component. Element and modifier names are elementName and modifierName, respectively. Do not use a hyphen (-) to separate out component names, as these signify the start of an element/element name.

注意UpperCamelCase Component名称样式，以指示它是主元素。这表示它是组件的边界。元素和修饰符名称分别是elementName和modifierName 。请勿使用连字符( - )分隔组件名称，因为它们表示元素/元素名称的开头。

建筑与设计 (Architecture and Design)

Let’s consider the architecture encouraged by CCSS.

让我们考虑一下CCSS鼓励的体系结构。

咕unt声 (Grunt)

Grunt is a great task runner that can automate many common chores (such as compiling CSS or validating HTML). There are also other task runners; an ideal workflow involves using one to watch files under development and recompile the CSS when changes are made.

Grunt是出色的任务执行程序，可以自动执行许多常见的杂事(例如，编译CSS或验证HTML)。还有其他任务赛跑者；理想的工作流程包括使用一个工作流程来监视正在开发的文件，并在进行更改时重新编译CSS。

文件组织 (File Organization)

Look again at the directory structure, which is derived from SMACSS. Notice the ext/ directory, which contains all external frameworks (like Bootstrap). To keep upgrading easy, these should not be modified; instead, overrides and extensions should be placed in the base/ directory.

再次查看从SMACSS派生的目录结构。注意ext/目录，其中包含所有外部框架(例如Bootstrap)。为了易于升级，请勿修改这些内容。相反，替代和扩展名应放在base/目录中。

base/ is where you keep global base styles that are used application-wide.

base/是您保留用于整个应用程序的全局基本样式的位置。

_base.scss are base styles for element selectors only. These are sort of “CSS resets”.

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

_base-classes.scss are all utility classes used application-wide across many pages, views, and components. Prefix class names with u-

_base-classes.scss是跨许多页面，视图和组件在应用程序范围内使用的所有实用工具类。带有u-前缀类名称

images.scss is used as an SCSS compilation source. It should define and inline all site images as Data URIs. /app/styles/images.css is generated from this file.

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

_animate.scss holds all application-wide animation classes.

_animate.scss保存所有应用程序范围的动画类。

_bootstrap-overrides.scss holds the framework overrides only. Sometimes the level of specificity of framework selectors is so high that overriding them requires long specific selectors. Overriding at a global level should not be done in the context of an SCSS component. Instead, all global overrides go here.

_bootstrap-overrides.scss overrides.scss仅保留框架替代。有时，框架选择器的特殊性水平很高，以至于覆盖它们时需要较长的特定选择器。不应在SCSS组件的上下文中进行全局覆盖。相反，所有全局替代都在此处。

组件 (Components)

Any unit of reusable CSS not mentioned above is considered a “component”. We use AngularJS so I categorized them to 3 types of CSS components: view/page, directive, and standard; hence the directory structure derived from SMACSS.

上面未提到的任何可重用CSS单元均被视为“组件”。我们使用AngularJS，所以我将它们分为3种类型CSS组件：视图/页面，指令和标准；因此，目录结构源自SMACSS。

In the example setup in the GitHub repository, I created explicit folders to be clear. If your application is small, you may put them in one folder. All components follow the modified BEM naming convention in combination with the CamelCase. This got me great wins in encouraging other team members to follow BEM-style syntax. It also avoided a lot of confusion when moving away from using the typical BEM style with the -, --, and __ characters, which generate class names like module-name__child-name--modifier-name!

在GitHub存储库中的示例设置中，我创建了明确的文件夹以进行清理。如果您的应用程序很小，则可以将它们放在一个文件夹中。所有组件与CamelCase结合使用修改后的BEM命名约定。这在鼓励其他团队成员遵循BEM风格的语法方面取得了巨大的胜利 。当不再使用带有- ， --和__字符的典型BEM样式时，这也避免了很多混乱，BEM样式生成了类名，例如module-name__child-name--modifier-name名__ module-name__child-name--modifier-name ！

It is also important that the CSS class definition order in a component reflects the HTML view. This makes it easier to scan, style, edit, and apply classes. Finally, it’s a good idea to have an extensive style-guide for the web application and follow guidelines for CSS and Sass (e.g. avoid @extend).

组件中CSS类定义顺序反映HTML视图也很重要。这使扫描，设置样式，编辑和应用类变得更加容易。最后，最好是为Web应用程序提供广泛的样式指南，并遵循CSS和Sass的指南 (例如，避免使用@extend )。

CCSS示例 (CCSS Example)

Refer to the code for an example setup of the CSS.

请参阅代码以获取CSS的示例设置。

Here is an example component in Sass:

这是Sass中的示例组件：

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

This compiles to the following CSS:

这将编译为以下CSS：

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

And your HTML might look something like this:

您HTML可能看起来像这样：

<div class="ProductRating">
  <img alt="Company logo" class="img-logo">
  <h3 class="ProductRating-title">Title</h3>
  <div class="u-starHolder">
    <span class="ProductRating-star ProductRating-star--active"></span>
    <span class="ProductRating-star ProductRating-star--active"></span>
    <span class="ProductRating-star ProductRating-star--active"></span>
    <span class="ProductRating-star"></span>
  </div>
</div>

You can refer to the simplified BEM mixin, which uses reference selector to achieve this and is simpler than @at-root. Working with BEM became much easier in Sass 3.3+, which gives us the ability to write maintainable code that is easy to understand.

您可以参考简化的BEM mixin ，它使用引用选择器来实现此目的，并且比@at-root更简单。在Sass 3.3+中，使用BEM变得更加容易，这使我们能够编写易于理解的可维护代码。

贡献 (Contributing)

Contributions in the GitHub repo in the form of issues/PRs for adding more examples, improvements with post processing, clarifications, etc. are most helpful.

GitHub存储库中以问题/ PR的形式提供的贡献，用于添加更多示例，后期处理方面的改进，说明等，是最有用的。

And be sure to check out the repo for credits and useful resources related to CCSS. If you have any questions or comments, post them in the comments below or on the GitHub repo.

并确保检查出回购，以获取与CCSS相关的信用和有用资源。如果您有任何问题或意见，请将其发布在下面的意见或GitHub存储库中。

翻译自: https://www.sitepoint.com/introducing-ccss-component-css/