css - 如何考虑 AngularJS 组件的样式？

Question

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

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

为了说明我的困境，想象一个名为 alert 的简单组件为您希望用户注意的各种类型的消息提供样式。它接受两个绑定(bind)，一个 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;
    }
}

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