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

101–110 of 129 posts

Re: Principles we use to write CSS for modern browsers

#101

Post by breatheoften »

Klathmon wrote: post #80
lisper wrote: post #75

Earlier quoted context omitted.

> CSS Modules is still a "naming convention," just one that is auto-generated for you. Yes, that's true, but your use of the word "just" implies that auto-generation is a detail. It's not. It's the the big win. At root, everything is machine code, which also has a flat namespace. Having that flat-namespace code auto-generated is a huge lever.

And it fixes a few other unexpected problems as well. We use SHA1 hashes of the CSS classes' contents as it's name when using CSS modules. This has the cool side effect of making any 2 classes that do the same thing to have the same name, and get de-duped in the final output, regardless of where they originated in the application. When I saw it happen the first time, it really kind of cemented in the idea that this c…

That's a nice trick -- thanks for sharing! Am I write in understanding that implementing this within webpack is simply using only [hash] as the localIdent configuration property for css-loader?

Re: Principles we use to write CSS for modern browsers

#102

Post by skrebbel »

ng12 wrote: post #68
skrebbel wrote: post #62

Earlier quoted context omitted.

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

Oh wow! Awesome, wish I knew before. This blows my mind, thanks!

Re: Principles we use to write CSS for modern browsers

#103

Post by eonw »

wvenable wrote: post #100
sjclemmy wrote: post #52

Earlier quoted context omitted.

That reminds me of a colleague complaining about a recent cohort of about 60 webdev graduates. Not a single one wanted to learn perl, but were quite happy to get stuck into anything Javascript preferably react! EDIT: why the downvotes?

I've worked in enough Perl at one point to actually like it but I would never recommend anyone learn it unless they absolute have to. At this point it's effectively a dead ended language. It's also a terribly difficult language to learn. I don't particularly like the Javascriptification of every technology but these webdev graduates have the right idea.

i didn't find perl terribly difficult to learn at all, but then again i learned it 12-15 years ago and maybe it was more on par with other languages at that time. don't think i would want to learn it now though, still have a strong appreciation for it though.

Re: Principles we use to write CSS for modern browsers

#104

Post by eonw »

rfrey wrote: post #58
sjclemmy wrote: post #52

Earlier quoted context omitted.

That reminds me of a colleague complaining about a recent cohort of about 60 webdev graduates. Not a single one wanted to learn perl, but were quite happy to get stuck into anything Javascript preferably react! EDIT: why the downvotes?

They're quite rationally looking for assignments that increase their own market value.

learning backwards can be good too.... i know a guy making $200k+ managing some old AS400s, part time, and he is too young to have grown up working on them. old school skills are worth money, and the unwillingness of new entrants to learn them just makes them that much more valuable.

Re: Principles we use to write CSS for modern browsers

#105

Post by wvenable »

eonw wrote: post #103
wvenable wrote: post #100

Earlier quoted context omitted.

I've worked in enough Perl at one point to actually like it but I would never recommend anyone learn it unless they absolute have to. At this point it's effectively a dead ended language. It's also a terribly difficult language to learn. I don't particularly like the Javascriptification of every technology but these webdev graduates have the right idea.

i didn't find perl terribly difficult to learn at all, but then again i learned it 12-15 years ago and maybe it was more on par with other languages at that time. don't think i would want to learn it now though, still have a strong appreciation for it though.

Perl is full of strange grammatical rules and even stranger conventions that it's one of the few languages I learned 15 years ago that I can't just pick up and use. I've forgotten basically everything I ever knew about it and yet other languages from the time period, even some odd ones, I can still grasp enough to restart the process.

Re: Principles we use to write CSS for modern browsers

#106

Post by talmand »

prashnts wrote: post #97

Personally, I very much dislike using CSS classes unless required. I prefer having a clean markup with classes used only where they make sense. For a context, I somehow can't wrap my head around writing something like: when ` ` makes more sense. Sure, if you have a case with alternate "inverse" navbar, go ahead with a class ` `. About the flexbox, ah, well, even now they have undefined behaviour on several elements s…

These days using "nav" instead of is the preferred method by default. The other two classes are just modifiers that may or may not be required. There's nothing wrong with them.

Also, I see "fixed" bug reports in both Chrome and Firefox when using flex with fieldset. To be fair, recent fixes.

Re: Principles we use to write CSS for modern browsers

#107

Post by ry_ry »

ng12 wrote: post #68
skrebbel wrote: post #62

Earlier quoted context omitted.

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

I'd be hesitant to use that in prod code - realistically you can achive fairly graceful degradation without it as long as you're prepared to accept a non pixel perfect layout.

Also, from the issues v2.X that polyfill appears be broken in IE9 atm, which is the last one with zero flex going on. (Fun fact, our metrics have ie9 and 10 with comparable userbases - fairly standard large public facing site. 9 is fully unsupported and IE10 is no longer an active target for our QA team beyond basic layout and functionality)

I do generally use a less mixin to shim all the tweener syntax tho.

Re: Principles we use to write CSS for modern browsers

#108

Post by Klathmon »

breatheoften wrote: post #101
Klathmon wrote: post #80

Earlier quoted context omitted.

And it fixes a few other unexpected problems as well. We use SHA1 hashes of the CSS classes' contents as it's name when using CSS modules. This has the cool side effect of making any 2 classes that do the same thing to have the same name, and get de-duped in the final output, regardless of where they originated in the application. When I saw it happen the first time, it really kind of cemented in the idea that this c…

That's a nice trick -- thanks for sharing! Am I write in understanding that implementing this within webpack is simply using only [hash] as the localIdent configuration property for css-loader?

yeah, specifically [hash:base64] because [hash] will print the hex of the hash which is a bit more verbose. I think it's actually the default for css-loader if you don't set localIdentName

During development we have it set to `[local]---[path]---[name]---[hash:base64:5]` which gives massive verbose class names but lets me pinpoint exactly where they came from.

There's also one step that I left out that helps, which is to have something like csscomb[0] to order the properties of each class into a set order. It really lets this optimization shine by ensuring that different property-order won't cause different hashes.

[0] https://github.com/csscomb/csscomb.js

Re: Principles we use to write CSS for modern browsers

#109

Post by talmand »

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 feel the interviewers didn't do their part in that exchange considering there are multiple valid ways of completing that task. As an interviewer I would have followed up with saying that method is not allowed for some made up reason, what's another way to do it?

Re: Principles we use to write CSS for modern browsers

#110

Post by netghost »

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…

At the point when you write fallbacks for IE, you might as well just use an approach that works for all your supported browsers, otherwise you've got twice as much to verify and maintain.

Check this out for an alternative to flexbox if you can't ignore that last n% of your users: https://kyusuf.com/post/almost-complete-guide-to-flexbox-wit...

Post reply on HN