4 ms·

> You can't just apply it to an arbitrary element to make it center in its parent. You can with grid-first. With the proviso that third party components may n

by nailer 4y ago

> You can't just apply it to an arbitrary element to make it center in its parent. You can with grid-first. With the proviso that third party components may not work (which is fine, third party components are usually very low quality). I'd recommend, right after your existing: *, *:before, *:after { box-sizing: border-box; } Adding: div { display: grid; } You can now remove: - all margins (there's just padding and gap now) - margin auto centering hacks - clearfix hacks - translateY -50% hacks - a billion wrappers around every UI element (per all those low quality third party components, particularly common in the react space which seems to have a culture of "add divs until it looks right") plus a bunch of other code. In 99% of cases, using grid-first, there will be a 1:1 match of element to UI - getting around the div-soup of older web apps. The app I'm developing now is 1:1 with the exception of rounded gradient borders, which still needs a hack.

DaiPlusPlus 4y ago
> ...your existing I don't use CSS Reset techniques: don't try to fight the browser. > div { display: grid; } I'm concerned this will have a nontrivial impact on browser layout performance. Existing browser layout engines are heavily optimized for flow/block layout, but defaulting every div to grid breaks that major assumption all the browser-makers made and... for what gain? I actually don't want every div to potentially be a grid layout container by default. > You can now remove $things: I don't use any of those tricks/hacks anyway - and clearfix hasn't been relevant since IE8 came out. > rounded gradient borders Just use border-radius combined with `border-image: some-gradient-function()`. No hacks or tricks required.
- 867-5309 4y ago
  >some-gradient-function() >which still needs a hack
- nailer 4y ago
  I've been doing grid-first for a few years now (last major update was when buttons hot grid support) across apps including high performance google docs-type collab interfaces. It's fine. Optimising for existing behavior reminds me of when people didn't want to use async/await as V8 'wasn't optimised' for it. await never felt slow in their apps anyway, but now it's similar fast to what callbacks were. Skate to where the puck going to be. > for what gain? I don't use any of those tricks/hacks anyway OK. Everyone else does but maybe you're the exception. > For rounded gradient borders... just use border-radius combined with `border-image: some-gradient-function()`. No hacks or tricks required. Are you sure? https://stackoverflow.com/questions/51496204/border-gradient-with-border-radius https://stackoverflow.com/questions/51496204/border-gradient... - judging by the views on that question, if you have a codepen there's at least 42,000 people who'd love to see, it my understanding is that the W3C spec says it shouldn't work. Probably obvious, you sound like you know what you're doing but: adding additional elements, pseudoelements etc counts as hacks. Here's border-radius combined with `border-image: some-gradient-function()`: https://codepen.io/mikemaccana/pen/QWVpdmo https://codepen.io/mikemaccana/pen/QWVpdmo
  - DaiPlusPlus 4y ago
    Thank you for that info - I honestly didn't know that border-radius didn't work with border-image.
    - nailer 4y ago
      It’s OK! Thanks for replying politely. HN can be combative sometimes.
- lelandfe 4y ago
  > I'm concerned this will have a nontrivial impact on browser layout performance. Existing browser layout engines are heavily optimized for flow/block layout Layout and paint performance is pretty low stakes. Unless you’re doing a lot of painting, or your demographic is surprising, your users are going to be fine.
- frosted-flakes 4y ago
  > I'm concerned this will have a nontrivial impact on browser layout performance. I've experienced this with iOS Safari. I was experimenting with different layout methods, and at one point a display:grid didn't get deleted, and some days later when I was testing with Safari it was taking at least half a second to render a page. I'm talking 5 paragraphs of text, possibly with subgrid I was experimenting with, nothing crazy. I had no idea CSS could ever get that so slow and I thought it had to be something with React, and it took way longer than it should have to narrow it down to that single property.

by nailer 4y ago

DaiPlusPlus 4y ago

> ...your existing I don't use CSS Reset techniques: don't try to fight the browser. > div { display: grid; } I'm concerned this will have a nontrivial impact on browser layout performance. Existing browser layout engines are heavily optimized for flow/block layout, but defaulting every div to grid breaks that major assumption all the browser-makers made and... for what gain? I actually don't want every div to potentially be a grid layout container by default. > You can now remove $things: I don't use any of those tricks/hacks anyway - and clearfix hasn't been relevant since IE8 came out. > rounded gradient borders Just use border-radius combined with `border-image: some-gradient-function()`. No hacks or tricks required.

867-5309 4y ago
>some-gradient-function() >which still needs a hack
nailer 4y ago
I've been doing grid-first for a few years now (last major update was when buttons hot grid support) across apps including high performance google docs-type collab interfaces. It's fine. Optimising for existing behavior reminds me of when people didn't want to use async/await as V8 'wasn't optimised' for it. await never felt slow in their apps anyway, but now it's similar fast to what callbacks were. Skate to where the puck going to be. > for what gain? I don't use any of those tricks/hacks anyway OK. Everyone else does but maybe you're the exception. > For rounded gradient borders... just use border-radius combined with `border-image: some-gradient-function()`. No hacks or tricks required. Are you sure? https://stackoverflow.com/questions/51496204/border-gradient-with-border-radius https://stackoverflow.com/questions/51496204/border-gradient... - judging by the views on that question, if you have a codepen there's at least 42,000 people who'd love to see, it my understanding is that the W3C spec says it shouldn't work. Probably obvious, you sound like you know what you're doing but: adding additional elements, pseudoelements etc counts as hacks. Here's border-radius combined with `border-image: some-gradient-function()`: https://codepen.io/mikemaccana/pen/QWVpdmo https://codepen.io/mikemaccana/pen/QWVpdmo
- DaiPlusPlus 4y ago
  Thank you for that info - I honestly didn't know that border-radius didn't work with border-image.
  - nailer 4y ago
    It’s OK! Thanks for replying politely. HN can be combative sometimes.
lelandfe 4y ago
> I'm concerned this will have a nontrivial impact on browser layout performance. Existing browser layout engines are heavily optimized for flow/block layout Layout and paint performance is pretty low stakes. Unless you’re doing a lot of painting, or your demographic is surprising, your users are going to be fine.
frosted-flakes 4y ago
> I'm concerned this will have a nontrivial impact on browser layout performance. I've experienced this with iOS Safari. I was experimenting with different layout methods, and at one point a display:grid didn't get deleted, and some days later when I was testing with Safari it was taking at least half a second to render a page. I'm talking 5 paragraphs of text, possibly with subgrid I was experimenting with, nothing crazy. I had no idea CSS could ever get that so slow and I thought it had to be something with React, and it took way longer than it should have to narrow it down to that single property.