Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

CSS Modules

glenmaddern.com

Post reply on HN
Print view View original

41–50 of 93 posts

Re: CSS Modules

#42

Post by yari_ashi_zero »

HTML is for hypertext documents, and CSS an organ of the same organism called 'HTML/CSS'. It's made for text documents, and applying it to the implementation of GUI-centric applications has always been an ugly hack. For awhile (90s to 00s AJAX) it was necessary, and now the whole professional ecosystem has built up tremendous inertia over the millions of accumulated people/hours of perfecting this 'competency'/hack. Now though, I would recommend to switch over to building 2D webapps entirely out of SVGs (say with React + Flux) e.g.: https://github.com/Terebinth/Vickers or, even better, to building them entirely out of WebGL. SVGs are easy and would lead to a wonderfully efficient workflow, but I think WebGL holds the advantage for performance considerations, given the way it goes to the hardware.

Re: CSS Modules

#43

Post by wereHamster »

yari_ashi_zero wrote: post #42

HTML is for hypertext documents, and CSS an organ of the same organism called 'HTML/CSS'. It's made for text documents, and applying it to the implementation of GUI-centric applications has always been an ugly hack. For awhile (90s to 00s AJAX) it was necessary, and now the whole professional ecosystem has built up tremendous inertia over the millions of accumulated people/hours of perfecting this 'competency'/hack.…

I don't believe WebGL is suitable for rendering applications. Look at game UIs, they usually are either crap (low-cost games, where devs didn't sped too much time and simply blit button sprites somewhere on screen), or the authors had to implement a widget set on top of GL (WoW comes to mind). But a widget set is exactly what React and web components give you (built in top of basic building blocks like divs and spans and of course CSS for styling).

And while HTML was initially created for hypertext documents, it doesn't mean it can't be used for somthing else. I disagree that it's an ugly hack. Some parts may not be suitable for GUI apps (uhm, like ), but then simply don't use them in your application. Or implement something better on top of the good parts (like React did). Eventually the good parts may be come standard.

Re: CSS Modules

#44

Post by Davertron »

yari_ashi_zero wrote: post #42

HTML is for hypertext documents, and CSS an organ of the same organism called 'HTML/CSS'. It's made for text documents, and applying it to the implementation of GUI-centric applications has always been an ugly hack. For awhile (90s to 00s AJAX) it was necessary, and now the whole professional ecosystem has built up tremendous inertia over the millions of accumulated people/hours of perfecting this 'competency'/hack.…

Moving entirely to svg for user interface has some of its own issues (i.e. there's no default layout engine in svg; everything is essentially absolutely positioned...) but would be interesting to think about. Moving entirely to WebGL would only be viable if you don't care at all about accessibility though. For some subset of applications that might be acceptable (i.e. games), but for something like gmail or other similar applications it's definitely not.

Re: CSS Modules

#45

Post by Kequc »

It feels to me that this conversation is quite old I'm finding myself not convinced by the examples put forward in the article. It looks like a lot of unnecessary complexity. You can have a lot of success by simply picking a common css convention.

  .mybutton
    /* all styles for Normal */
  .mybutton.disabled
    /* overrides for Disabled */
  .mybutton.error
    /* overrides for Error */
  .mybutton.in-progress
    /* overrides for In Progress */
This is simpler and works incredibly well with javascript because I don't have to find replace remove a subset. I just addClass('disabled') removeClass('disabled').

Re: CSS Modules

#46

Post by lo_fye »

"The composes keyword says that .normal includes all the styles from .common" -- great, except you have the meaning of the word reversed. In the context above it actually means ".normal is part of .common", which is clearly not the intent. If you wanted it to mean that ".normal includes all the styles from .common" then .normal should be "composedOf: common"

Re: CSS Modules

#47

Post by chinchang »

This seems like too much abstraction (magic) of things. Plus those auto generated classes really look odd and would make debugging difficult.

Re: CSS Modules

#48

Post by martin-adams »

lo_fye wrote: post #46

"The composes keyword says that .normal includes all the styles from .common" -- great, except you have the meaning of the word reversed. In the context above it actually means ".normal is part of .common", which is clearly not the intent. If you wanted it to mean that ".normal includes all the styles from .common" then .normal should be "composedOf: common"

Correct. Would the word 'comprises' be more appropriate?

Re: CSS Modules

#50

Post by lo_fye »

martin-adams wrote: post #48
lo_fye wrote: post #46

"The composes keyword says that .normal includes all the styles from .common" -- great, except you have the meaning of the word reversed. In the context above it actually means ".normal is part of .common", which is clearly not the intent. If you wanted it to mean that ".normal includes all the styles from .common" then .normal should be "composedOf: common"

Correct. Would the word 'comprises' be more appropriate?

Oh, yes, I like that much more :) I've created this as an issue on their github repo, at https://github.com/css-modules/css-modules/issues/24
Post reply on HN