4 ms·

Next looks very interesting and feels very much like the PHP of old where stuff just works with sane defaults. Very cool stuff. My one criticism of this is: Co

Next looks very interesting and feels very much like the PHP of old where stuff just works with sane defaults. Very cool stuff. My one criticism of this is: Component CSS is cancer. I've worked on a large scale javascript project and it was riddled with duplicated CSS in every component, all in the name of being conflict-free. You know what I call that? Not knowing how to scope your styles properly with something like BEM. http://getbem.com/ http://getbem.com/

Kiro 10y ago
I completely disagree. After working with component CSS I vomit when I see any CSS not encapsulated to one single component. I don't want to change a global CSS declaration and accidentally change something completely different. You can always import the stuff you really want shared.
- tlrobinson 10y ago
  Yeah, I'm still not sure what the "best" solution is but I'm pretty sure it will allow for better composition and static analysis than "global" CSS.
- WA 10y ago
  Do you have some reading material on how to do this properly? Because I never worked with component-based CSS yet, but want to have a look at it and wondered about what your parent posted, too.
  - idreyn 10y ago
    There's a set of libraries like Aphrodite, Glitter, jsx-style, and JSS that help you do this. I'd look at some benchmarks [1] and do some comparison before you make a decision yourself. I've worked extensively with Aphrodite (disclaimer, my employer maintains it) and have found it works with React to make a pretty good workflow for SPAs. It does require some buy-in from everyone involved with the codebase since you'll have Aphrodite-defined styles clashing with stuff in external stylesheets, and there are occasional edge cases where you'd like to use some crazy CSS selector that Aphrodite doesn't support, but this is often a sign that you should be restructuring your component in a more straightforward way. The style reuse and composability story is very good, since all styles are wrapped around bare JS objects which are super easy to manipulate and the ES6 spread syntax [2] makes it all look very elegant. If it's important to you to keep styles and markup in different files, you can do that too as long as you're happy giving them all .js/.jsx/.ts extensions. In general it is frustrating to me that total buy-in into the React model comes at the cost of support for actual standards like Web Components, but I never want to write UI in a non-declarative way again so I'm hoping someone smarter than I can figure out how to bring these two worlds together so we can let the browser properly namespace our CSS rather than relying on randomly generated class name infixes as Aphrodite does. [1] https://engineering.hellofresh.com/the-css-in-js-battle-89c34a7a83ea#.cae5q4lkd https://engineering.hellofresh.com/the-css-in-js-battle-89c3... [2] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
andrewingram 10y ago
The end result of CSS in components is literally the same as BEM. BEM is the gateway drug, the most vocal advocates of CSS-in-JS came via BEM (or similar). It's just as easy to duplicate CSS in BEM as it is with encapsulated components, it's simply an indication you haven't reached the right granularity of components yet. Finding the right unit of reuse for any project is hard, it's not something that's magically solved just by saying "use X".
imron 10y ago
> very much like the PHP of old where stuff just works with sane defaults 'sane defaults' and 'PHP of old' are not things that go in a sentence together cough magic quotes cough
- sergiotapia 10y ago
  Dude, you FTP'd a php file to a server and it ran automagically. It was really beautiful and turned so many people to programming. World-changing!
  - always_good 10y ago
    Needing WAMP just to do some local development was definitely not beautiful. That stuff was opaque and confusing to me as a beginner. The modern embedded server is what's beautiful.
    - nilliams 10y ago
      It sucks that you didn't get a local PHP env working easily, but I think you're an outlier there. The ease to get up and running with PHP is widely credited as a big factor in its success. I used a thing called 'easyphp' (executable that just gave you a wamp stack and just told you which dir to stick your php files in).
      - always_good 10y ago
        Well, I'm talking about easy vs simple. I never got a local PHP(+Apache+MySQL) env working simply back then. easyphp.exe and wamp.exe are two good examples of what I mean.
  - imron 10y ago
    I'm not saying that it was difficult to get up and running, my point of contention was sane defaults.

Kiro 10y ago

I completely disagree. After working with component CSS I vomit when I see any CSS not encapsulated to one single component. I don't want to change a global CSS declaration and accidentally change something completely different. You can always import the stuff you really want shared.

tlrobinson 10y ago
Yeah, I'm still not sure what the "best" solution is but I'm pretty sure it will allow for better composition and static analysis than "global" CSS.
WA 10y ago
Do you have some reading material on how to do this properly? Because I never worked with component-based CSS yet, but want to have a look at it and wondered about what your parent posted, too.
- idreyn 10y ago
  There's a set of libraries like Aphrodite, Glitter, jsx-style, and JSS that help you do this. I'd look at some benchmarks [1] and do some comparison before you make a decision yourself. I've worked extensively with Aphrodite (disclaimer, my employer maintains it) and have found it works with React to make a pretty good workflow for SPAs. It does require some buy-in from everyone involved with the codebase since you'll have Aphrodite-defined styles clashing with stuff in external stylesheets, and there are occasional edge cases where you'd like to use some crazy CSS selector that Aphrodite doesn't support, but this is often a sign that you should be restructuring your component in a more straightforward way. The style reuse and composability story is very good, since all styles are wrapped around bare JS objects which are super easy to manipulate and the ES6 spread syntax [2] makes it all look very elegant. If it's important to you to keep styles and markup in different files, you can do that too as long as you're happy giving them all .js/.jsx/.ts extensions. In general it is frustrating to me that total buy-in into the React model comes at the cost of support for actual standards like Web Components, but I never want to write UI in a non-declarative way again so I'm hoping someone smarter than I can figure out how to bring these two worlds together so we can let the browser properly namespace our CSS rather than relying on randomly generated class name infixes as Aphrodite does. [1] https://engineering.hellofresh.com/the-css-in-js-battle-89c34a7a83ea#.cae5q4lkd https://engineering.hellofresh.com/the-css-in-js-battle-89c3... [2] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

andrewingram 10y ago

The end result of CSS in components is literally the same as BEM. BEM is the gateway drug, the most vocal advocates of CSS-in-JS came via BEM (or similar). It's just as easy to duplicate CSS in BEM as it is with encapsulated components, it's simply an indication you haven't reached the right granularity of components yet. Finding the right unit of reuse for any project is hard, it's not something that's magically solved just by saying "use X".

imron 10y ago

> very much like the PHP of old where stuff just works with sane defaults 'sane defaults' and 'PHP of old' are not things that go in a sentence together cough magic quotes cough

sergiotapia 10y ago
Dude, you FTP'd a php file to a server and it ran automagically. It was really beautiful and turned so many people to programming. World-changing!
- always_good 10y ago
  Needing WAMP just to do some local development was definitely not beautiful. That stuff was opaque and confusing to me as a beginner. The modern embedded server is what's beautiful.
  - nilliams 10y ago
    It sucks that you didn't get a local PHP env working easily, but I think you're an outlier there. The ease to get up and running with PHP is widely credited as a big factor in its success. I used a thing called 'easyphp' (executable that just gave you a wamp stack and just told you which dir to stick your php files in).
    - always_good 10y ago
      Well, I'm talking about easy vs simple. I never got a local PHP(+Apache+MySQL) env working simply back then. easyphp.exe and wamp.exe are two good examples of what I mean.
- imron 10y ago
  I'm not saying that it was difficult to get up and running, my point of contention was sane defaults.