CSS management is easy with <web-component/>

I've coded CSS for more than 15 years. CSS in complex WebApp nowadays is getting messy. That's why many CSS methodologies have been invented so far such as OOCSS, BEM, SMACSS, Atomic CSS. However, each methodology still has it's own advantages and disadvantages to debate.

Although there're many methodologies to choose. I still feel pain to manage CSS which make me always think that there's something still missing. After thinking and researhing, I think I've found the conclusion that CSS is just a styling language. It lacks of Object Oriented features. That's why it's hard to maintain and scale.

What's so close to make CSS becomes like Object is OOCSS. However, CSS methodology alone can't help much. That's why I've created Adapter project to introduce a new concept which use Javascript and <web-component/> technology together with CSS . Start with simple APIs :

// Javascript
define('el-card', Card);
Card.tagStyle(`background-color: white;`);
Card.classStyle('lift', `
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 50%);
`);

const card_id_highlight = document.querySelector('#highlight');
card_id_highlight.addStyle(`font-size: 1.5rem;`);

<!-- HTML -->
<el-card id="highlight">
    Card content goes here.
</el-card>

<el-card class="lift">
    Lifted card.
</el-card>

I think that's a very interesting idea. With this implementation, I can use CSS in Object-Oriented space. import export variables function scope class module packaging .. that's a lot of features which can help to maintain and scale CSS.

The rest of this story is in Adapter project. You can take a look at Adapter : Adaptive Style Web Component . Hope that it can blow CSS pain away. ;)