如何考虑样式化 AngularJS 组件？

Question

我正在开发一个 AngularJS 项目，目的是慢慢地为 Angular 6 或我们开始升级时发布的任何版本做好准备。其中一项重要工作是将现有指令转换为组件。

我最苦恼的事情是，组件的每个实例都会在 DOM 中引入一个额外的元素，该元素包装了我的实际组件 HTML 并破坏了层次结构，这使得编写能够满足其需要的 CSS 变得非常困难到。

为了说明我的困境，想象一个名为alert 的简单组件，它为您希望用户注意的各种类型的消息提供样式。它接受两个绑定，一个message 和一个type。根据type，我们将添加一些特殊样式，并可能显示不同的图标。所有的显示逻辑都应该封装在组件中，所以使用它的人只需要确保他们正确地传递数据并且它会工作。

<alert message="someCtrl.someVal" type="someCtrl.someVal"></alert>

选项 A：将样式放在额外元素内的 <div> 上

组件模板

<div
    class="alert"
    ng-class="{'alert--success': alert.type === 'success', 'alert--error': alert.type === 'error'}">
    <div class="alert__message">{{alert.message}}</div>
    <a class="alert__close" ng-click="alert.close()">
</div>

萨斯

.alert {

    & + & {
        margin-top: 1rem; // this will be ignored
    }

    &--success {
        background-color: green; // this will work
    }

    &--error {
        background-color: red; // this will work
    }
}

只要组件完全不了解它周围的一切，它就可以正常工作，但是当你想将它放在 flex-parent 中，或者使用像“+”这样的选择器时，它就会中断。

选项 B：尝试直接设置额外元素的样式

组件模板

<div class="alert__message">{{alert.message}}</div>
<a class="alert__close" ng-click="alert.close()">

萨斯

alert {

    & + & {
        margin-top: 1rem; // this will work now
    }

    .alert--success {
        background-color: green; // nowhere to put this
    }

    .alert--error {
        background-color: red; // nowhere to put this
    }
}

现在我遇到了相反的问题，因为我无法为成功和错误状态附加修饰符类。

我在这里遗漏了什么吗？处理这个超出组件本身范围的附加元素的最佳方法是什么？

Answer 1

我个人选择选项 A。这使您可以轻松识别和创建组件的特定样式，而不必担心它们会覆盖站点范围的样式。例如，我将使用嵌套样式来完成此操作：

#componentContainer {
    input[type=text] {
        background-color: red;
    }
}

这将允许您为组件创建通用样式，而不会溢出到解决方案的其余部分。