5 ms·

This just makes my eyes bleed. CSS-in-JS was bad enough but now you want to mix-in SASS and Tailwind? Is there a prize or something for the number of technologi

by cutler 6y ago

This just makes my eyes bleed. CSS-in-JS was bad enough but now you want to mix-in SASS and Tailwind? Is there a prize or something for the number of technologies which can be squeezed into a line of JS? Please stop it.

Tade0 6y ago
Have you seen this year's State of JS? https://stateofjs.com/ https://stateofjs.com/ Makes one wonder if anyone even bothers to learn CSS nowadays. Perhaps we wouldn't have Tailwind or CSS-in-JS if more people did.
- machinelabo 6y ago
  The word "Trend" makes me shiver in bitterness. Why are there trends in software development? Are we trying to solve problems or we're trying to be trendy? Is this a clothing industry? I would have thought we should use mature technologies that have been vetted and gone through the trough of disillusionment and onto the ramp of productivity. Proven tech stack that I can rely on gives me peace. Older the tech, the more reliable it is. The opposite of "trendy" is what we need to popularize and make it cool. It should be cool to use a 5 year old library in JS!
  - rado 6y ago
    Trends are the single worst thing in this industry on all executive and developer levels.
  - ketzu 6y ago
    When there is change, there are trends. You don't have to follow them, but some are working on what they think are improvements and others are interested in staying updated on them. Be it novel programming languages or javascript libraries. It is cool to use 5 year old JS projects like React. If you look at the projects listed in the report, you see the graphs going back to 2016. Which is 5 years ago. And how they have been popular for 5 years.
  - brundozer 6y ago
    How does a technology become mature if no one wants to test it? I get your point, but we need both type of people in the real world: cutting-edge tech enthusiasts and stable products users. The problem is not that some people try out some fancy new tool, it's that they try it at work and waste lots of money without even being worried about it because it's not theirs. But in few cases it also pays off.
    - machinelabo 6y ago
      We have RFCs, proper PEP proposals, committees and a proper academic + enterprise + indie developer communities beta testing it and providing inputs. Not haphazardly monkey patching anything you see, add emojis to make it look cute and get 30k stars on GitHub. I want formalization of software development. It is orthogonal to experimentation and trying out fresh ideas. Change is good. But not towards a local optimum and getting stuck there.
    - Tade0 6y ago
      True, but I feel like a lot of the new stuff gets adopted just because a tech celebrity endorsed it.
- 1_player 6y ago
  Excuse the French, but all the CSS libraries are bad because CSS itself is shit. Defending it is the classic textbook definition of Stockholm Syndrome. It is awful, disgusting, incredibly wrong and inflexible for the modern use case. If it weren't so bad, we wouldn't be here.
  - cutler 6y ago
    Flutter/web might be the first transpiler to offer an alternative to CSS.
  - tannhaeuser 6y ago
    Care to explain your issues with CSS in detail? I agree it's Stockholm's, but just never can't even begin to state all the things that are wrong with it without sinking into Tech Tourette (ok for me the original sin is that it started by redundantly defining properties and syntax when we had this already in the form of HTML attributes; in which world did that ever make sense?)
    - sbergot 6y ago
      Not OP but here is my version: - css is not scoped by default. Predicting the effect of adding a new rule is very hard if you are not using scoping solutions or if you are not constently writing new class names with a strict convention - because of the first point, css is never refactored in most places. It becomes an ever growing monster of a code base - css selectors are build to write css that depends on html. A lot of webapp should be writing html that depends on a small set of css rules in order to get a consistent ui - the initial "semantic html approach" is counter productive for most webapps. This blog post is a very good read about this particular point: https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-...
      - tannhaeuser 6y ago
        Ah I see you're coming from a webapp developer PoV. In that case, I just wouldn't bother with CSS at all as you've got all the dynamics in your hand anyway to set styles as you please. Except pseudo-classes (even hovers), media queries, transitions/keyframes can't be specified in inline style attributes - just one of the many CSS blunders. Personally, I'm more interested in HTML as a document format in the original sense. Limited as it is, I just can't fathom the blackout moment where, confronted with a very basic HTML document plus a CSS stylesheet about the same size or more written in a completely different yet redundant syntax, somebody would say "yup, that seems like a reasonable document format for exchanging most of the world's text". Edit: regarding your scoping requirement, isn't just including the id or class of a component in CSS selectors or, when necessary, sass-like nested CSS rules enough of a scoping mechanism?
- csunbird 6y ago
  Firefox claims that this site is trying to fingerprint me. I wonder why?
  - ev1 6y ago
    The loaded script appears to be some free geoip/country detection service, that as a side effect, also does maxmind.com/en/solutions/minfraud-services/device-tracking - unsure what it's used for but it's probably for giving a single page app access to language or country by geo
- andyhmltn 6y ago
  I fundamentally disagree with your point that CSS-in-JS is a result of developers not knowing CSS. That's ridiculous CSS-in-JS solves a lot of problems that people that have been writing 'real CSS' have been experiencing for a long time. Writing CSS for very large applications that deal with lots of shared components across engineering teams is a hard task. Some of those problems are alleviated by libraries like styled-components. It's not for every use case and should only be used when there is a genuine need (rather than 'because it's shiny.') But shrugging off CSS-in-JS because you don't understand it is a bit silly.
  - Tade0 6y ago
    CSS-in-JS solves a lot of problems that people that have been writing 'real CSS' have been experiencing for a long time. Namely?
  - cutler 6y ago
    'Trouble is some major frameworks like Material UI require CSS-in-JS. That's the crazy world of JS for ya.
- earthboundkid 6y ago
  The idea of learning Tailwind “instead of” CSS makes no sense, because Tailwind just gives short names to all the CSS properties.
iaml 6y ago
Your opinion that CSS-in-JS is bad is just your opinion. Styled-components can do everything sass/less/postcss can and more, you don't need random binaries installed globally to transpile it to css when building, you get theming for free, it is easier to understand because you can ditch the arbitrary mappings of state variables to css classes, and even get types, it works with SSR and promotes one-file-components which is heavily used in Vue. Oh, you can even extend css syntax to fix small annoyances or add features.
- cutler 6y ago
  Thanks but I'll stick with my global styles.css in the root directory.
  - zoover2020 6y ago
    To each there own I guess. I've been using twin for a few projects this year and absolutely love it. Overall I think opinions on HN are quite progressive, the only area where I've seen this being different so far is CSS-in-JS frameworks. I think a lot of people already have an opinion without trying it, oh well.
    - cutler 6y ago
      I tried it via Material UI with a React app and everything ground to a halt. What a mess it was.
- shureluck 6y ago
  I have been doing frontend dev for nearly 20 years and CSS in JS has always struck me as completely unnecessary. I have yet to see a need for any of it that doesn't introduce more problems than it solves. Do you have any examples of cases where it is needed? Im using SCSS with SSR super well. I dont get why JSS in CSS is seen as superior?
  - iaml 6y ago
    Styled components are basically html element + dynamically generated class, you get scoping for free (you'd have to use css-modules for that otherwise), and you can define custom props and dynamically modify that component's style. This is extremely useful because one pattern I use frequently is element that has a lot of different modifiers like isSelected or isDeleted, in css you need to define classes for each, but here you just don't return some styles if the prop is not set. You also get full typechecking with typescript for all components, their props and theme. You also get autoprefixer out-of-the-box, and as a bonus if you ever wanted to lazy-load parts of your app, the styles for it should tree-shake correctly without any modifications, unlike traditional css.
tannhaeuser 6y ago
You must be new here. New tech is all about connecting dots of random packages you absolutely must be using, and give a fancy name to it.
preommr 6y ago
SASS + Tailwind + Css Modules(to get scoped styles) + typescript + tsx(assuming react) + typings for everything + webpack
- iaml 6y ago
  If you want types for everything, twin+styled-components is going to have more type coverage by definition. Also, redux-toolkit is pretty good for minimal effort fully typed redux.

by cutler 6y ago

Tade0 6y ago

Have you seen this year's State of JS? https://stateofjs.com/ https://stateofjs.com/ Makes one wonder if anyone even bothers to learn CSS nowadays. Perhaps we wouldn't have Tailwind or CSS-in-JS if more people did.

machinelabo 6y ago
The word "Trend" makes me shiver in bitterness. Why are there trends in software development? Are we trying to solve problems or we're trying to be trendy? Is this a clothing industry? I would have thought we should use mature technologies that have been vetted and gone through the trough of disillusionment and onto the ramp of productivity. Proven tech stack that I can rely on gives me peace. Older the tech, the more reliable it is. The opposite of "trendy" is what we need to popularize and make it cool. It should be cool to use a 5 year old library in JS!
- rado 6y ago
  Trends are the single worst thing in this industry on all executive and developer levels.
- ketzu 6y ago
  When there is change, there are trends. You don't have to follow them, but some are working on what they think are improvements and others are interested in staying updated on them. Be it novel programming languages or javascript libraries. It is cool to use 5 year old JS projects like React. If you look at the projects listed in the report, you see the graphs going back to 2016. Which is 5 years ago. And how they have been popular for 5 years.
- brundozer 6y ago
  How does a technology become mature if no one wants to test it? I get your point, but we need both type of people in the real world: cutting-edge tech enthusiasts and stable products users. The problem is not that some people try out some fancy new tool, it's that they try it at work and waste lots of money without even being worried about it because it's not theirs. But in few cases it also pays off.
  - machinelabo 6y ago
    We have RFCs, proper PEP proposals, committees and a proper academic + enterprise + indie developer communities beta testing it and providing inputs. Not haphazardly monkey patching anything you see, add emojis to make it look cute and get 30k stars on GitHub. I want formalization of software development. It is orthogonal to experimentation and trying out fresh ideas. Change is good. But not towards a local optimum and getting stuck there.
  - Tade0 6y ago
    True, but I feel like a lot of the new stuff gets adopted just because a tech celebrity endorsed it.
1_player 6y ago
Excuse the French, but all the CSS libraries are bad because CSS itself is shit. Defending it is the classic textbook definition of Stockholm Syndrome. It is awful, disgusting, incredibly wrong and inflexible for the modern use case. If it weren't so bad, we wouldn't be here.
- cutler 6y ago
  Flutter/web might be the first transpiler to offer an alternative to CSS.
- tannhaeuser 6y ago
  Care to explain your issues with CSS in detail? I agree it's Stockholm's, but just never can't even begin to state all the things that are wrong with it without sinking into Tech Tourette (ok for me the original sin is that it started by redundantly defining properties and syntax when we had this already in the form of HTML attributes; in which world did that ever make sense?)
  - sbergot 6y ago
    Not OP but here is my version: - css is not scoped by default. Predicting the effect of adding a new rule is very hard if you are not using scoping solutions or if you are not constently writing new class names with a strict convention - because of the first point, css is never refactored in most places. It becomes an ever growing monster of a code base - css selectors are build to write css that depends on html. A lot of webapp should be writing html that depends on a small set of css rules in order to get a consistent ui - the initial "semantic html approach" is counter productive for most webapps. This blog post is a very good read about this particular point: https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-...
    - tannhaeuser 6y ago
      Ah I see you're coming from a webapp developer PoV. In that case, I just wouldn't bother with CSS at all as you've got all the dynamics in your hand anyway to set styles as you please. Except pseudo-classes (even hovers), media queries, transitions/keyframes can't be specified in inline style attributes - just one of the many CSS blunders. Personally, I'm more interested in HTML as a document format in the original sense. Limited as it is, I just can't fathom the blackout moment where, confronted with a very basic HTML document plus a CSS stylesheet about the same size or more written in a completely different yet redundant syntax, somebody would say "yup, that seems like a reasonable document format for exchanging most of the world's text". Edit: regarding your scoping requirement, isn't just including the id or class of a component in CSS selectors or, when necessary, sass-like nested CSS rules enough of a scoping mechanism?
csunbird 6y ago
Firefox claims that this site is trying to fingerprint me. I wonder why?
- ev1 6y ago
  The loaded script appears to be some free geoip/country detection service, that as a side effect, also does maxmind.com/en/solutions/minfraud-services/device-tracking - unsure what it's used for but it's probably for giving a single page app access to language or country by geo
andyhmltn 6y ago
I fundamentally disagree with your point that CSS-in-JS is a result of developers not knowing CSS. That's ridiculous CSS-in-JS solves a lot of problems that people that have been writing 'real CSS' have been experiencing for a long time. Writing CSS for very large applications that deal with lots of shared components across engineering teams is a hard task. Some of those problems are alleviated by libraries like styled-components. It's not for every use case and should only be used when there is a genuine need (rather than 'because it's shiny.') But shrugging off CSS-in-JS because you don't understand it is a bit silly.
- Tade0 6y ago
  CSS-in-JS solves a lot of problems that people that have been writing 'real CSS' have been experiencing for a long time. Namely?
- cutler 6y ago
  'Trouble is some major frameworks like Material UI require CSS-in-JS. That's the crazy world of JS for ya.
earthboundkid 6y ago
The idea of learning Tailwind “instead of” CSS makes no sense, because Tailwind just gives short names to all the CSS properties.

iaml 6y ago

Your opinion that CSS-in-JS is bad is just your opinion. Styled-components can do everything sass/less/postcss can and more, you don't need random binaries installed globally to transpile it to css when building, you get theming for free, it is easier to understand because you can ditch the arbitrary mappings of state variables to css classes, and even get types, it works with SSR and promotes one-file-components which is heavily used in Vue. Oh, you can even extend css syntax to fix small annoyances or add features.

cutler 6y ago
Thanks but I'll stick with my global styles.css in the root directory.
- zoover2020 6y ago
  To each there own I guess. I've been using twin for a few projects this year and absolutely love it. Overall I think opinions on HN are quite progressive, the only area where I've seen this being different so far is CSS-in-JS frameworks. I think a lot of people already have an opinion without trying it, oh well.
  - cutler 6y ago
    I tried it via Material UI with a React app and everything ground to a halt. What a mess it was.
shureluck 6y ago
I have been doing frontend dev for nearly 20 years and CSS in JS has always struck me as completely unnecessary. I have yet to see a need for any of it that doesn't introduce more problems than it solves. Do you have any examples of cases where it is needed? Im using SCSS with SSR super well. I dont get why JSS in CSS is seen as superior?
- iaml 6y ago
  Styled components are basically html element + dynamically generated class, you get scoping for free (you'd have to use css-modules for that otherwise), and you can define custom props and dynamically modify that component's style. This is extremely useful because one pattern I use frequently is element that has a lot of different modifiers like isSelected or isDeleted, in css you need to define classes for each, but here you just don't return some styles if the prop is not set. You also get full typechecking with typescript for all components, their props and theme. You also get autoprefixer out-of-the-box, and as a bonus if you ever wanted to lazy-load parts of your app, the styles for it should tree-shake correctly without any modifications, unlike traditional css.

tannhaeuser 6y ago

You must be new here. New tech is all about connecting dots of random packages you absolutely must be using, and give a fancy name to it.

preommr 6y ago

SASS + Tailwind + Css Modules(to get scoped styles) + typescript + tsx(assuming react) + typings for everything + webpack

iaml 6y ago
If you want types for everything, twin+styled-components is going to have more type coverage by definition. Also, redux-toolkit is pretty good for minimal effort fully typed redux.