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

Principles we use to write CSS for modern browsers

gist.github.com

Post reply on HN
Print view View original

11–20 of 129 posts

Re: Principles we use to write CSS for modern browsers

#11

Post by ggurgone »

davedx wrote: post #4

> Flexbox is awesome. No need for grid framework; Yes, great, if you can ignore all the IE users. Is that what "modern" means? I'd love to use flexbox where I work, but it's just not feasible to give up all the customers we would lose.

There is a suit component for making flexible layouts in legacy browsers https://github.com/suitcss/components-arrange

It is not as feature-rich as flexbox is but it works great - I built a similar one when I used to work at Yelp https://www.yelp.com/styleguide#section-arrange and it scales well.

Re: Principles we use to write CSS for modern browsers

#12

Post by freshyill »

hackerboos wrote: post #9
kilian wrote: post #8

Earlier quoted context omitted.

Flexbox is supported in all versions of IE that Microsoft themselves still support (IE 11 and up). You can still support it in IE10 too, albeit with a different syntax. That means even windows installations that haven't been updated since 2012 will support flexbox.

CanIUse reports bugs in IE11. Anyone had issues in day-to-day development?

Check here for a pretty comprehensive listing of flexbox-related bugs.

https://github.com/philipwalton/flexbugs

I haven't come across anything in IE 10 or 11 that I haven't been able to work around pretty easily.

Re: Principles we use to write CSS for modern browsers

#13

Post by fizzbatter »

kilian wrote: post #8
davedx wrote: post #4

> Flexbox is awesome. No need for grid framework; Yes, great, if you can ignore all the IE users. Is that what "modern" means? I'd love to use flexbox where I work, but it's just not feasible to give up all the customers we would lose.

Flexbox is supported in all versions of IE that Microsoft themselves still support (IE 11 and up). You can still support it in IE10 too, albeit with a different syntax. That means even windows installations that haven't been updated since 2012 will support flexbox.

Unfortunately that still leaves out a ton of users. I know that's a tiny percentage, but tiny nonetheless. The shop i'm heading to soon has a small number of clients (ancient systems. IE8/9 iirc. We use Table layouts for our "old compatible" product, and i don't think we'll ever move on from that. Some clients just refuse to update it seems.

Luckily (for my sanity) we have a "new age" product that we can use responsive layouts for.

Re: Principles we use to write CSS for modern browsers

#14

Post by MatekCopatek »

IMHO, naming conventions such as SUIT, BEM, OOCSS and the like are NOT a good practice, but merely a workaround for dealing with the limitations of a global namespace.

My preferred solution are CSS Modules[1], Vue's scoped styling[2] or something similar.

[1] https://github.com/css-modules/css-modules

[2] https://github.com/vuejs/vue-loader/blob/master/docs/en/feat...

Re: Principles we use to write CSS for modern browsers

#15

Post by thirdsun »

hackerboos wrote: post #9
kilian wrote: post #8

Earlier quoted context omitted.

Flexbox is supported in all versions of IE that Microsoft themselves still support (IE 11 and up). You can still support it in IE10 too, albeit with a different syntax. That means even windows installations that haven't been updated since 2012 will support flexbox.

CanIUse reports bugs in IE11. Anyone had issues in day-to-day development?

Of course. there are lots of minor issues and surprising results with flexbox in modern IE and Firefox once you use it in more advanced ways. See https://github.com/philipwalton/flexbugs for an overview.

Nevertheless I use flexbox almost everywhere. It's a great system to arrange anything from general layout to smaller components. There's absolutely no way that I'll deal with any kind of hacks to get basic things like vertical centering right.

Re: Principles we use to write CSS for modern browsers

#16

Post by guessmyname »

davedx wrote: post #4

> Flexbox is awesome. No need for grid framework; Yes, great, if you can ignore all the IE users. Is that what "modern" means? I'd love to use flexbox where I work, but it's just not feasible to give up all the customers we would lose.

Last week I was in an interview with Amazon for a position in their web development team. One of the questions was related to this, they asked me to describe how to create the layout for a web page with two columns, I immediately thought about Flexbox but decided to describe the code using "float: (left|right)" and box-sizing, I felt that the two interviewers didn't like my answer because it is outdated.

Re: Principles we use to write CSS for modern browsers

#17

Post by [deleted] »

freshyill wrote: post #10
davedx wrote: post #4

> Flexbox is awesome. No need for grid framework; Yes, great, if you can ignore all the IE users. Is that what "modern" means? I'd love to use flexbox where I work, but it's just not feasible to give up all the customers we would lose.

Why not both? Global flexbox support is >96% and in the US it's >97%. Unless you're aiming for a 1:1 pixel-perfect experience in crappy old versions of IE, it's negligibly simple to detect IE (or lack of flexbox support), and just use something else. You can usually get pretty close to a lot of flexbox layouts with display: table and related properties, and also falling back to floats for others. In a worst case scen…

[deleted]

Re: Principles we use to write CSS for modern browsers

#18

Post by [deleted] »

MatekCopatek wrote: post #6
davedx wrote: post #4

> Flexbox is awesome. No need for grid framework; Yes, great, if you can ignore all the IE users. Is that what "modern" means? I'd love to use flexbox where I work, but it's just not feasible to give up all the customers we would lose.

This largely depends on your target audience. Flexbox is only problematic for IE But this should always be checked against more relevant stats (your country, old website you're redesigning, etc.), so yeah, if you know you have a lot of people on IE9 and lower, flexbox is out of the question.

[deleted]

Re: Principles we use to write CSS for modern browsers

#19

Post by kowdermeister »

I've developed my last 5 projects (corporate websites with many different layouts) with SASS + Foundation 6 an no naming convention. Instead I relied on nesting selectors.

I can behave and usually not go deeper than 4-5 levels. It's a really neat way unambiguously tell a CSS rule where it should belong to. For example I can create a

    section.hero-block{ /* things inside are scoped */ }
CSS selectors who live outside are pretty basic, utility style ones, they exists on one level, so they can be easily overwritten by the scoped ones if needed.

Re: Principles we use to write CSS for modern browsers

#20

Post by Brendinooo »

guessmyname wrote: post #16
davedx wrote: post #4

> Flexbox is awesome. No need for grid framework; Yes, great, if you can ignore all the IE users. Is that what "modern" means? I'd love to use flexbox where I work, but it's just not feasible to give up all the customers we would lose.

Last week I was in an interview with Amazon for a position in their web development team. One of the questions was related to this, they asked me to describe how to create the layout for a web page with two columns, I immediately thought about Flexbox but decided to describe the code using "float: (left|right)" and box-sizing , I felt that the two interviewers didn't like my answer because it is outdated .

I can't find the source right now, but I've read that flexbox for page layout can still be problematic because a lot of times when you use flexbox it'll rely on the content inside of it to determine its flex width. So you'll get a bunch of page reflows while content is being loaded, which is less than ideal.
Post reply on HN