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

21–30 of 129 posts

Re: Principles we use to write CSS for modern browsers

#21

Post by daurnimator »

ulkesh wrote: post #7

Some thoughts: - Good CSS design needs zero !important statements. Fix your specificity or your component architecture if you have a need to use !important. - DRY is a good thing, not a bad thing. Maybe straight CSS isn't quite there yet but... - Why not use the tools at your disposal to aid in development (and DRY) such as SASS/LESS? - Flexbox will be great once IE dies the well-earned death it deserves. I'm very ha…

> - Why not use the tools at your disposal to aid in development (and DRY) such as SASS/LESS?

Because there is so much tooling churn + barrier to entry. The point is that sometimes it's better to repeat yourself than to use the tool of the month.

Re: Principles we use to write CSS for modern browsers

#22

Post by gotofritz »

fizzbatter wrote: post #13
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.

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 respons…

Supporting old browsers should be treated as a special case though, like "people with js disabled" or something. Then of course you don't use flexbox (or serve different css fles or have a scaled down design or whatever). But the "norm" is that flexbox is now safe for most users.

Re: Principles we use to write CSS for modern browsers

#23

Post by ggurgone »

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?

Most of them are fixed in https://github.com/suitcss/components-grid

Re: Principles we use to write CSS for modern browsers

#24

Post by NKCSS »

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.

It's still common to find Citrix environments with IE 8/9 here in .nl healthhcare sector

Re: Principles we use to write CSS for modern browsers

#25

Post by asb »

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 .

Honestly that sounds like a case where you could improve your interview technique (or perhaps the interviewers could have done better on drilling down into your thinking). The fact you considered multiple options, evaluated them mentally and decided to describe the approach that would have highest compatibility is great, and explaining your thinking to the interviewers could have helped.

Re: Principles we use to write CSS for modern browsers

#28

Post by al2o3cr »

".ComponentName-descendentName" nested inside ".ComponentName"?

Remember kids, the cascade is TEH B4DZORS - so always include everything you would have gotten from it in every class name. headdesk

Solidly delivered on the "no DRY" premise. Maybe they should coin a new acronym like "WET": "Write Everything Thrice"

Re: Principles we use to write CSS for modern browsers

#30

Post by davidkpiano »

MatekCopatek wrote: post #14

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...

CSS Modules is still a "naming convention," just one that is auto-generated for you. Naming conventions in CSS are as much of a good practice as naming/linting conventions in JS.
Post reply on HN