DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Nitipit Nontasuwan
Nitipit Nontasuwan

Posted on

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;`);
Enter fullscreen mode Exit fullscreen mode
<!-- HTML -->
<el-card id="highlight">
    Card content goes here.
</el-card>

<el-card class="lift">
    Lifted card.
</el-card>
Enter fullscreen mode Exit fullscreen mode

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 : A Web Component with Styles . Hope that it can blow CSS pain away. ;)

Top comments (0)

Classic DEV Post

brain computer interface

Experimenting with brain-computer interfaces in JavaScript