How to encapsulate styles for each component?

Best Practices
1

Recently, I wrote a component as Divider for AureliaToolbelt. You can find it in here

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

@-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 an viewmodel here too.

Anyone can use this like

<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?

2

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

1 Like
3

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

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

and inject as

#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
shadycss

Which way do you prefer?

4

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.

2 Likes
5

@zewa666

Great, based on your guidance I found some articles. for example this structuring-sass

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.

6

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

1 Like
7

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

2 Likes
8

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

1 Like