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

Modern CSS Code Snippets: Stop writing CSS like it's 2015

modern-css.com

Post reply on HN
Print view View original

251–260 of 318 posts

Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015

#251

Post by mattacular »

lawn wrote: post #13
h4x0rr wrote: post #9

Earlier quoted context omitted.

Yeah let's do that. You have everything related to your component on place instead of jumping between files.

Is jumping between files supposed to be difficult or something?

I find it to be more difficult. Especially if I can't pane the files in view comfortably (ie. beyond 2 or 3 it gets significantly harder to work across them).

Some frameworks or coding styles really lean into having lots of tiny files. That necessitates a more complicated directory structure for the project. Locating files eventually tends to requires search capability rather than being able to look through the tree in a sidebar.

None of this is "hard" per se but I find the opposite is nicer to work with typically.

Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015

#252

Post by WorldMaker »

azangru wrote: post #32
apsurd wrote: post #28

Earlier quoted context omitted.

react can be pure functions that take in props. Given a set of props, ideally data primitives, the outputted view is guaranteed. it's nice. In practice, the entire JS ecosystem enjoys flying off the rails, every season, but it's not strictly react's fault. To answer your question, however those props get into the component is up the the M & C. can be async server, or shoved in as json in the script tag.

If you move the data (the M and the C) entirely out of react, and only pass it in via props, there would be only one place — the root react node — where the props could get into react. Is this what you have in mind? Or are you envisioning multiple root nodes?

That is the classic Flow model or Redux model (if you prefer the common implementation name over the Facebook paper name). Build a central store. Pass the single store down to all necessary components via prop-drilling, then later Contexts (and HOCs) to skip layers as a nice-to-have.

Redux is a lot less fashionable today, but hasn't entirely disappeared as an M and C option.

Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015

#253

Post by 65 »

k33n wrote: post #171
65 wrote: post #67

The first example of not using absolute positioning isn't a good example because sometimes you do need to absolutely position things, like a modal. Also you can just use display: flex with justify-content: center and align-items: center for non absolutely positioned elements. Just because it uses CSS grid does not make it more "correct" than flexbox. I also only see one usage of custom @property properties here, whic…

Modal containers should be position: fix; with their own internal flexbox or grid btw.

Not always. That's assuming you have a full viewport modal. There are plenty of instances where you'll have a modal inside of another container somewhere on the page.

You also generally don't want to use position: fixed as it can allow the user to scroll behind the modal.

Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015

#256

Post by grabshot_dev »

The field-sizing: content one for textareas is the kind of thing that makes you wonder how we tolerated the JS workaround for so long. I've shipped that "measure scrollHeight, set height, reset" hack in probably a dozen projects. Same with scroll-state queries replacing IntersectionObserver for sticky headers.

What's nice about this collection is it's organized by the problem, not the property. Makes it easy to find the thing you're actually trying to solve rather than browsing a spec.

Would love to see one for the new anchor positioning API. That one could replace a lot of tooltip and popover JS.

Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015

#257

Post by dbbk »

halfcat wrote: post #99
dbbk wrote: post #85

Earlier quoted context omitted.

You can literally command click a class to go into a styled components css file. I do not understand what the big issue is.

Cognitive load of looking at 12 open files trying to understand what’s happening. Well, in fairness some of those 12 are the same file because we have one part for the default CSS and then one for the media query that’s 900 lines further down the file.

What do you mean 12 files? It’s 2 files. One for your component and one for its styles module.

Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015

#258

Post by yokuze »

Alternate title: "How to break your website's styling for 10-20% of your users"

This is a nice reference, and some properties like `scrollbar-gutter` can be used for progressive enhancement.

However, many options listed will require some kind of fallback if `autoprefixer`/`postcss`/etc. doesn't cover it, and if you don't want to exclude a large fraction of your users.

It's reasonable in some cases to have both "new" and the old fallback code side-by-side until _your users's_ browser adoption stats indicate that you can delete the old fallback code without breaking a substantial number of users.

But the reality of using the new CSS hotness is that if the code is not supported by a % threshold that is much higher than many of these techniques show, it actually _increases_ your workload in the near term. You write new + the fallback + ensure that they don't interfere with each other.

P.S. Note the emphasis on _your users_ in the paragraph above. Global browser stats are fine as a basic reference, but your specific site/app's userbase demographics affect the actual percentages tremendously. That may mean you can use ALL of these new techniques today, or some, or none of them.

If your audience is primarily software developers, then after measuring you may find you can use these without a fallback. If it includes people in less wealthy communities or countries, or in countries with restricted access to mobile phone markets, you likely cannot.

Post reply on HN