21–30 of 255 posts
In my opinion this is a workaround for a language flaw in the React concept. Look at this beauty for comparison: https://vuejs.org/v2/guide/single-file-components.html
In my opinion this is a workaround for a language flaw in the React concept. Look at this beauty for comparison: https://vuejs.org/v2/guide/single-file-components.html
Earlier quoted context omitted.
- Were there moments when you cried back SASS or vanilla CSS? - In your react example, I see you created as styled.h1, but that's an awkward way of bootstrapping a component. Even if I used SC, I would still put the style information outside my component code in the same directory. At this point I don't see the benefit over doing something like: import * from './login.scss'; What can SC do that regular CSS or SASS ca…
The big win for me is if you're making an SPA, all the knowledge of the app state is already stored in JS (redux, or local state, or handed down as props if using React). So instead of toggling styles on a class, you just hand the state to the styled component, since it's just a function that returns css.
How do you deal with mobile, where sometimes I have to override dozens of declarations with media queries?
If style becomes out of fashion, you have to modify files that contain logic. If framework (react/vue) becomes out of fashion, keeping styles will be difficult.
The other down-side is thousands of web developers having to re-learn CSS and the tooling behind your app instead of just changing CSS files.
Author here, happy to respond to any questions. AMA!
Instead we have used CSS Modules (https://github.com/css-modules/css-modules), first by including it manually in webpack, now it's already built into create-react-app so I just have to install node-sass and call my Sass files ComponentName.module.scss and I can use them the same way in my .tsx/.jsx files that you use CSS-in-JS. IMO that's a lot less messy and makes your jsx files smaller and better to read. Also it's easier to write Sass and have the pros of that language on top.
Did you consider this approach at all and what did you not like about it?
How do you handle advanced CSS Level 3/4 selectors, CSS grid, and media queries?
With regard to media queries, it depends on the library. For the library the author is using, the media queries are defined inline: https://www.styled-components.com/docs/advanced#media-templa...
Earlier quoted context omitted.
How do you plan to accommodate NoScript users?
I know this will be unpopular, but after a certain point, noscript users just get a bad experience and that can't be helped. If a developer wants to provide a rich experience, then there will always be certain platform requirements. Without them, you will have a lacklustre experience. It's like saying "I want to have all the whizzy functionality of your app, but I want to access it using a standard, run of the mill,…
By knowing how the sausage is made, I'm also aware that the line marking the aforementioned certain point is often drawn too early, at informational (i.e. document) stuff where HTML and CSS are fully capable on their own.
Author here, happy to respond to any questions. AMA!