SMN(): CSS in JS? Oh, you mean the possible future on front-end coding?

2021/4/19 Monday Day 13

Once having any experience of UI design, you’re surely realizing it’s common to use markup language and cascading style sheets, so-called HTML and CSS itself, as a tool kit to decorate, and with a typical coding language JavaScript could make a refined webpage happened in reality. HTML, CSS and JavaScript are always regarded as a set-up, like siblings, taking a major part on the stage of front-end operating systems. Somehow, this flavored situation would NOT stand for good in a forming trend, named “CSS in JavaScript”. Yes, it’s becoming a trend in its community in the past years!

What is CSS in JavaScript, exactly?

We could remind ourself it’s NOT an informative library, but a dependent tool applying into documents written in JavaScript, of which signifies .css or .scss are NOT allowed. Some typical JavaScript features modular programmings, definitions on its variable and even a conditional operator could be properly utilized in a range of flexible extensibility. Furthermore, we could declaim CSS in JavaScript is a delightful concept to decrease troubles and could be able to write our codes directly into the suitable components, in a maintainable and declarative way. Rarely know as a holistic conception was made by its creator, Christopher Chedeau, well-recognized as Vjeux, by the year of 2014. Since then, many talented developers’ worked to make this idea into a reality, turning this notion into a brighter picture.

Under such this booming background, libraries related with CSS in JavaScript have been developed by far, from less papular as Aphrodite and Radium, to the most-flavored one as Styled Components and CSS Modules, showing the sum total reveals more than 61 types of CSS-in-JavaScript-library are being created and operating currently. Though they are most virtually the same in term of solving problems, its syntax and methods among these libraries could be far different from each other.

CSS in JavaScrip could help? Like what?

Indeed, enthusiasts are not just asking for troubles to make CSS in JavaScript practical, this technique

• 解決 code spliting 可能出現的順序問題
• 解決命名互相覆蓋，在撰寫樣式檔時也可以用 BEM 的命名規則避開或導入原子化樣式設計
• 維護時不需要再去找到底被哪個樣式檔影響
• 自動幫樣式加上瀏覽器的前綴，樣式檔就要再加上 postCSS 幫忙處理

預處理器繞過 CSS，帶來一組自己的新功能，CSS-in-JS 的函示庫以 JavaScript 的力量走出自己的路，不等 CSS 追上來了。