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

61–70 of 129 posts

Re: Principles we use to write CSS for modern browsers

#61

Post by skrebbel »

ooqr wrote: post #49
skrebbel wrote: post #3

A bit meta, but I need this off my chest: I love how this document starts off saying "this is for react apps". IMO every discussion about CSS coding standards needs to start with context. A lot of old CSS lore came from people who build websites. I mean those fairly uninteractive things, focus on content. Blogs, restaurants, newspapers. Building an application that happens to use the DOM as their UI toolkit is totall…

I would love to read a long-form article about this if you're ever inclined.

I'm flattered, but I'm not sure I have much more to add! What would you expect to be explored more deeply in such an article?

Re: Principles we use to write CSS for modern browsers

#62

Post by skrebbel »

gbog wrote: post #60
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…

I'm surprised there is no polyfill-like thing for flexbox, or is there?

Can't be. Hm maybe with lots and lots of JS moving stuff around with absolute positioning, but otherwise you simply can't port flexbox to older css.

Re: Principles we use to write CSS for modern browsers

#63

Post by gbog »

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…

"Refuse to update" well yes, I would too, refuse to do something that is notoriously breaking a lot of working stuff for no known benefit. For example java applets developped for IE6 that is vital, because it drives the 10 years old exotic scanner, and nobody dares touching it.

Re: Principles we use to write CSS for modern browsers

#64

Post by andruby »

daurnimator wrote: post #21
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.

SASS is almost a decade old [0] and has been in wide-spread use for a long time. The tool churning you talk of is something I have only seen in JS land to such a degree.

Moreover, the barrier to entry to learning SCSS/LESS is really low if you know CSS.

[0] https://github.com/sass/sass/tree/4acf5158734013f08fca4be6e2...

Re: Principles we use to write CSS for modern browsers

#65

Post by intrasight »

spdustin wrote: post #48
intrasight wrote: post #44

Earlier quoted context omitted.

My experience is that that ceased to be the case about a year ago. Now everyone also has Chrome.

Your experience isn't in healthcare, finance, military, manufacturing or oil and gas (to pop a few verticals off the top of my stack), it would seem. Literally 80% of my (adult, American-enterprise-employed) students in 2015-2016 so far have IE9 as their desktop standard, and have to beg for a special exemption to be allowed to install Chrome or Firefox.

Besides military (haven't done that in 10+ years), I'm in all those other verticals and more. All desktops now have IE11 (because MSFT pretty much says "you must") and Chrome.

Re: Principles we use to write CSS for modern browsers

#66

Post by Guillaume86 »

al2o3cr wrote: post #28

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

The whole point is probably to avoid cascading and issues it creates when you will start to nest different components.

Re: Principles we use to write CSS for modern browsers

#67

Post by adregan »

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…

Secretly, I'm not that happy with flexbox. I think it's more intuitive in some cases, but I don't think it's more intuitive than floats and the like.

For example, I always feel like I want a `justify-self` property like `align-self`, but instead I must use `margin: auto` on the opposite side—in a flex row of elements, if I want the last one to be right aligned while the rest are hanging out in the center, I have to tell that last element to be `margin-left: auto`.

I think it's just an issue that it has taken so long to be useable (IEs :( ), there has been a lot of hype, and it's not quite the panacea I imagined it would be.

Re: Principles we use to write CSS for modern browsers

#68

Post by ng12 »

skrebbel wrote: post #62
gbog wrote: post #60

Earlier quoted context omitted.

I'm surprised there is no polyfill-like thing for flexbox, or is there?

Can't be. Hm maybe with lots and lots of JS moving stuff around with absolute positioning, but otherwise you simply can't port flexbox to older css.

There is a JS polyfill. It's relatively popular, but I've never tried it. https://github.com/jonathantneal/flexibility

Re: Principles we use to write CSS for modern browsers

#70

Post by frankwiles »

seag64 wrote: post #69

So, I don't do any front end work in my day-to-day, so this may be a stupid question. This article starts out with how CSS gets a lot of negativity. What alternatives are there? Do browsers understand anything but CSS for styling?

There isn't an alternative really. Like Javascript, it's all there is.
Post reply on HN