# How to encapsulate styles for each component?

**URL:** <https://discourse.aurelia.io/t/how-to-encapsulate-styles-for-each-component/807>\
**Category:** Best Practices\
**Created:** [February 20, 2018, 10:42am UTC](https://discourse.aurelia.io/t/how-to-encapsulate-styles-for-each-component/807 "2018-02-20T10:42:06Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![HamedFathi](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/hamedfathi/32/2099_2.png) [@HamedFathi](https://discourse.aurelia.io/u/HamedFathi)\
**Post date:** [February 20, 2018, 10:42am UTC](https://discourse.aurelia.io/t/how-to-encapsulate-styles-for-each-component/807/1 "2018-02-20T10:42:06Z")

</div>

Recently, I wrote a component as `Divider` for [AureliaToolbelt](https://github.com/aurelia-toolbelt/aurelia-toolbelt). You can find it in [here](https://aurelia-toolbelt.github.io/#/vanilla/divider)

I used the following style and wrote a component based on it.

```auto
@-webkit-keyframes spinAround{
    from{
        -webkit-transform:rotate(0);
        transform:rotate(0)
    }
    to{
        -webkit-transform:rotate(359deg);
        transform:rotate(359deg)
    }
}
@keyframes spinAround{
    from{
        -webkit-transform:rotate(0);
        transform:rotate(0)
    }
    to{
        -webkit-transform:rotate(359deg);
        transform:rotate(359deg)
    }
}
.is-divider,.is-divider-vertical{
    display:block;
    position:relative
}
.is-divider-vertical[data-content]::after,.is-divider[data-content]::after{
    background:#fff;
    color:#b5b5b5;
    content:attr(data-content);
    display:inline-block;
    font-size:.75rem;
    padding:.5rem .8rem;
    -webkit-transform:translateY(-1.1rem);
    transform:translateY(-1.1rem);
    text-align:center
}
.is-divider{
    border-top:.1rem solid #dbdbdb;
    height:.1rem;
    margin:2rem 0;
    text-align:center
}
.is-divider-vertical{
    display:block;
    padding:2rem;
    position:relative
}
.is-divider-vertical::before{
    border-left:.1rem solid #dbdbdb;
    bottom:1rem;
    content:"";
    display:block;
    left:50%;
    position:absolute;
    top:1rem;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%)
}
.is-divider-vertical[data-content]::after{
    left:50%;
    padding:.4rem 0;
    position:relative;
    top:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%)
}

```

You can see [view](https://github.com/aurelia-toolbelt/aurelia-toolbelt/blob/master/src/components/vanilla/divider/aut-divider.html) an [viewmodel](https://github.com/aurelia-toolbelt/aurelia-toolbelt/blob/master/src/components/vanilla/divider/aut-divider.ts) here too.

Anyone can use this like

```auto
<aut-divider vertical>Or</aut-divider>

```

I used `InjectStyles()` for creating a custom style like different colors. but as you see this is a universal style for every `aut-divider` that the last style injection effects on all `aut-divider` components.

How can I encapsulate each style for each component to have separate style and injection for them while there is a common style for them?

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [February 20, 2018, 1:11pm UTC](https://discourse.aurelia.io/t/how-to-encapsulate-styles-for-each-component/807/2 "2018-02-20T13:11:43Z")

</div>

To avoid pollution, you could inject localized css based on id of the element.

---

<div class="post-metadata">

**Author:** ![HamedFathi](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/hamedfathi/32/2099_2.png) [@HamedFathi](https://discourse.aurelia.io/u/HamedFathi)\
**Post date:** [February 20, 2018, 4:38pm UTC](https://discourse.aurelia.io/t/how-to-encapsulate-styles-for-each-component/807/3 "2018-02-20T16:38:36Z")

</div>

Ok, If I get your point, for example, I should cut the following class from CSS file

```auto
.is-divider{
    border-top:.1rem solid #dbdbdb;
    height:.1rem;
    margin:2rem 0;
    text-align:center
}

```

and inject as

```auto
#id.is-divider{
...
}

```

Correct? If yes

1. I would be great when I own the CSS file If I work on a CSS file that is loaded from node\_modules How can I encapsulate it because I can not cut it and inject separately?

2. Another my concern is the size of injecting styles for each component.

3. How about `ShadowDOM`? I know Aurelia support is but I don’t know works with containerless components too or not Is it okay to use these two polyfills? (for supporting in all browsers)

[shadydom](https://github.com/webcomponents/shadydom)  
[shadycss](https://github.com/webcomponents/shadycss)

Which way do you prefer?

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [February 20, 2018, 6:00pm UTC](https://discourse.aurelia.io/t/how-to-encapsulate-styles-for-each-component/807/4 "2018-02-20T18:00:47Z")

</div>

Just as a sidenote, ui components having CSS selectors with high complexity tend to become cumbersome to consume. Might take a look at BEM or Atomic CSS which will result in flat selectors.

---

<div class="post-metadata">

**Author:** ![HamedFathi](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/hamedfathi/32/2099_2.png) [@HamedFathi](https://discourse.aurelia.io/u/HamedFathi)\
**Post date:** [February 20, 2018, 6:26pm UTC](https://discourse.aurelia.io/t/how-to-encapsulate-styles-for-each-component/807/5 "2018-02-20T18:26:20Z")

</div>

@zewa666

Great, based on your guidance I found some articles. for example this [structuring-sass](https://webdesign.tutsplus.com/articles/structuring-sass-saying-goodbye-to-atomic-design-ambiguity--cms-26679)

This is the structure that I saw in Bootstrap 4 and Bulma before  
If I get your point I should have something like this for every component as styling structure, Correct?

But the question is about CSS that is loaded from other projects and not mine, Should I get it and convert to Atomic CSS, BEM or SASS Structuring?

If I suppose that article is good, Do you prefer we create a SASS structure for every component?  
Working correctly with CSS is a challenge for creating any component.  
It seems like all of these structures can be created correctly when we create all of the components rather than using third-party libraries and styles.

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [February 20, 2018, 7:20pm UTC](https://discourse.aurelia.io/t/how-to-encapsulate-styles-for-each-component/807/6 "2018-02-20T19:20:01Z")

</div>

Right so If you use external components you’re pretty much bound to what they offer. For us often having proper styles was the reason to build components by ourselves. But I get its not easy in every case and i misunderstood your use case

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [February 21, 2018, 1:48am UTC](https://discourse.aurelia.io/t/how-to-encapsulate-styles-for-each-component/807/7 "2018-02-21T01:48:22Z")

</div>

You got me here 🙂 I did not think below surface, nor have exp on shadydom or shadycss.

---

<div class="post-metadata">

**Author:** ![shahabganji](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/shahabganji/32/1539_2.png) [@shahabganji](https://discourse.aurelia.io/u/shahabganji)\
**Post date:** [February 21, 2018, 5:24am UTC](https://discourse.aurelia.io/t/how-to-encapsulate-styles-for-each-component/807/8 "2018-02-21T05:24:03Z")

</div>

That takes a huge amount of time, particularly for us who are not front-end experts 😉