4 ms·

Personal viewpoint alert: I deeply despise React, and have turned down job offers simply because they made that framework choice. Vue is so much more simple and

by aabhay 4y ago

Personal viewpoint alert: I deeply despise React, and have turned down job offers simply because they made that framework choice. Vue is so much more simple and concise, and its CSS markup in particular is just incredibly good. If anything, React gives you way too much rope to hang yourself and you end up with some mess like quoting CSS inside of some object to apply to another object

bayesian_horse 4y ago
In my opinion CSS should not go anywhere near the component code. With bootstrap or something similar (even some dissimilar frameworks), much of the "extra styling" is achieved with utility classes. Not using utility classes and a consistent, thought-out CSS frameworks leads to great pain when scaling the codebase. Bootstrap is a lot like React. You don't appreciate the "bloat" until you need it. Or worse, you recognize you reimplemented the wheel a dozen times without noticing and most of your "wheels" are polygons with a different number of edges.
- mgkimsal 4y ago
  The majority of my Vue SFC have no css/styling in them - using the utility classes of a general library (bootstrap/etc) is generally pretty good. There are times when you do need some override, or something custom local to a specific component. Scoped CSS in an SFC is very useful. I had to do some react a couple of years back and I was more than a bit surprised it wasn't supported. "Oh, you can use this plugin" but... the other 4 people on the team didn't use it, discouraged it, and saw nothing wrong at all with needing to coordinate style changes specific to one component in relatively disconnected style files. I got one "it's better this way" but I think he was meaning "this is what I already know".
  - bayesian_horse 4y ago
    In my opinion it is harder to get stuff like alignment right. The various utility classes in Bootstrap (and other framework) are a blessing because you can have things like "give me two times the usual margin to the right" without having to hardcode the margin value. Using any specific CSS - scoped or unscoped - for a particular component is not a good sign. This might not always be avoidable. Vue has a mechanism for that, but you can't really exchange it for something that fits your needs. It's going to be there, trying to please you with all the features the upstream developers thought you'd need and you have to program around those feature.
    - mgkimsal 4y ago
      > Using any specific CSS - scoped or unscoped - for a particular component is not a good sign. This might not always be avoidable. I don't generally disagree. Component-level CSS is something I don't do all that often, but when I do, in Vue, I'm glad I can keep it in the same file (generally scoped). For me, it's easier to spot the edge cases (oh, this is modified, and here's where it's being done). Even at the component level, you can see use system-wide offsets. "give me two times the usual margin to the right" may be a general rule, but for componentX, something needs to be three timex the usual margin, so... you can still reference a system-defined margin variable, but have that 3x override where it's needed. Again, not something I do often but, imo, the Vue SFC style scoping makes it easier/safer to do when needed.

by aabhay 4y ago

bayesian_horse 4y ago

In my opinion CSS should not go anywhere near the component code. With bootstrap or something similar (even some dissimilar frameworks), much of the "extra styling" is achieved with utility classes. Not using utility classes and a consistent, thought-out CSS frameworks leads to great pain when scaling the codebase. Bootstrap is a lot like React. You don't appreciate the "bloat" until you need it. Or worse, you recognize you reimplemented the wheel a dozen times without noticing and most of your "wheels" are polygons with a different number of edges.

mgkimsal 4y ago
The majority of my Vue SFC have no css/styling in them - using the utility classes of a general library (bootstrap/etc) is generally pretty good. There are times when you do need some override, or something custom local to a specific component. Scoped CSS in an SFC is very useful. I had to do some react a couple of years back and I was more than a bit surprised it wasn't supported. "Oh, you can use this plugin" but... the other 4 people on the team didn't use it, discouraged it, and saw nothing wrong at all with needing to coordinate style changes specific to one component in relatively disconnected style files. I got one "it's better this way" but I think he was meaning "this is what I already know".
- bayesian_horse 4y ago
  In my opinion it is harder to get stuff like alignment right. The various utility classes in Bootstrap (and other framework) are a blessing because you can have things like "give me two times the usual margin to the right" without having to hardcode the margin value. Using any specific CSS - scoped or unscoped - for a particular component is not a good sign. This might not always be avoidable. Vue has a mechanism for that, but you can't really exchange it for something that fits your needs. It's going to be there, trying to please you with all the features the upstream developers thought you'd need and you have to program around those feature.
  - mgkimsal 4y ago
    > Using any specific CSS - scoped or unscoped - for a particular component is not a good sign. This might not always be avoidable. I don't generally disagree. Component-level CSS is something I don't do all that often, but when I do, in Vue, I'm glad I can keep it in the same file (generally scoped). For me, it's easier to spot the edge cases (oh, this is modified, and here's where it's being done). Even at the component level, you can see use system-wide offsets. "give me two times the usual margin to the right" may be a general rule, but for componentX, something needs to be three timex the usual margin, so... you can still reference a system-defined margin variable, but have that 3x override where it's needed. Again, not something I do often but, imo, the Vue SFC style scoping makes it easier/safer to do when needed.