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

Things I wish I’d known about CSS

cssfordesigners.com

Post reply on HN
Print view View original

241–250 of 340 posts

Re: Things I wish I’d known about CSS

#241

Post by jitendrac »

IggleSniggle wrote: post #132
jitendrac wrote: post #82

That is really useful. I have been writing small html front-ends since 2008-09. HTML5,CSS3 made many things easier like gradients, Round borders, and many things that now developer do takes as granted. I clearly remember, how boring and frustrating it was to slice borders and corners from photoshop psd. CSS3 and HTML5 made many good changes, but new css feature like grid, Flex-box all are still confusing. I have to l…

I felt the totally opposite about grid. I spent a little time learning it, and now EVERYTHING is easy (except for things that aren't, of course)

yes everything is easy now, except for things that aren't/

Re: Things I wish I’d known about CSS

#242

Post by epicureanideal »

ibdf wrote: post #128
miiiiiike wrote: post #75

Earlier quoted context omitted.

Last year. Around November and 91% unprefixed usage ( https://caniuse.com/#search=display%3Agrid )

Too bad you had a bad experience with your dev, but seriously, you just picked up css, people have been fighting it for years because of browser support. There's a reason why there are css reset stylesheets, and frameworks out there. If you are using it in one project great, but when you do it for living you will ended up building your own framework if you are not already using one. SASS also saves you so much time i…

Yes, one of the issues with people who've recently learned the 2020 version of JS/CSS/frameworkX is that they assume what they've learned is the correct way to do things according to "the best, latest standard". It's a variation of Dunning-Kruger almost.

As you said, experienced engineers have been dealing with CSS browser support issues for years, so as a habit try to avoid using the latest shiny new features.

Also, experienced engineers do refresh their knowledge from time to time, but you might have caught them between refreshes. Remember that these engineers are also working 40-60 hours per week producing work output in addition to periodically refreshing their skillset. And depending on the environment they've worked in previously they may not have had the ability to use the latest features of whatever technology. Maybe they were working on a legacy app that didn't support ES6, for example. That would be less common now in the days of Babel, but there was a time a few years ago when it would have been reasonable for a working JS engineer not to be familiar with every detail of ES6, as an example.

Re: Things I wish I’d known about CSS

#243

Post by leephillips »

chrismorgan wrote: post #240
leephillips wrote: post #228

Earlier quoted context omitted.

I’m confused by your reply. Did your eye skip over the word “not” in my comment?

Sorry, you are correct. Drop the final parenthetical, then, but I stand by the rest.

Yes, your other point was something I hadn’t thought about. I guess his advice would be good for some people, but I’m not sure about the 99%. It’s not uncommon to use small images as text-like elements, and when you do that, if you have this reset, you will need to explicitly make them inline. Not a huge deal, but people tend to copy and paste their own CSS libraries between projects, and redefining basic default semantics of elements may create confusion and extra work down the line when things don’t behave the way that any documentation you may consult assumes.

Re: Things I wish I’d known about CSS

#244

Post by epicureanideal »

tr1coder wrote: post #127
bigmanwalter wrote: post #93

Earlier quoted context omitted.

CSS Grid has only been widely supported for a couple years now. Not so hard to believe a frontend dev was still using bootstrap grid.

The inexcusable fact here is that he said that he didn't know how it works. A font-end developer not knowing grid is not worth 6 figures.

I disagree, as both an engineer and a manager.

CSS grid is only recently becoming a reasonable tool to use in practice. I don't think any of the top 1% of front end engineers I know would be able to use CSS grid without looking at the documentation.

Based on experience, the kind of person who would be able to use it from memory either 1) is very skilled AND had a reason to use it recently, or 2) someone of medium skill who just recently read the spec but in almost all other ways is less skilled than the people I mentioned in the first paragraph.

Re: Things I wish I’d known about CSS

#245

Post by epicureanideal »

techbubble wrote: post #81
_the_inflator wrote: post #33

Earlier quoted context omitted.

CSS and HTML are constantly evolving, and so its demands. However for me CSS is way more straight-forward than in the 90th and 00th. The standards addressed a lot of the pains and struggles we had with floats/clearfix etc. This was challenging but nothing im comparison to supporting IE 6-9, FF, Safari, Opra etc. at the time. Also hacking in JavaScript added to the complexity. Nowadays I can do with 10 lines of grid a…

"div soup" – I like that. The present-day CSS frameworks use "class soup." For example, tailwind (which I like):

I avoid Tailwind-style CSS frameworks. I prefer SCSS and, if needed, mixins. Meaningful class names are much better, IMO.

Re: Things I wish I’d known about CSS

#246

Post by symmitchry »

aliswe wrote: post #94

A little secret opinion of mine is that I think the global usage of rem instead of px is a fad. The only real argument I've heard is that the mobile devices have their own definition of it, and will thus optimize in their own way, but then again I see that benefit as being nearly non-existant and definitely not demonstrated.

When I read that section about rems and ems and ch and px it made me think of Python's "There should be one-- and preferably only one --obvious way to do it."

CSS and front-end browser work drives me up the wall.

Re: Things I wish I’d known about CSS

#247

Post by c-smile »

I believe that focal point of CSS understanding is that horrible display property. People just need to get that one as other stuff is relatively trivial.

display:xxx on some elements defines three things ( sorry, that is terrible architectural mistake authors of CSS have made initially )

1. display defines "sibling requirement" how that element wants to be replaced among its neighbors. `div {display:inline-box}` tells container to treat that div a single glyph placed inline among other glyphs.

2. In some cases it also defines "layout manager" of element's content. E.g. display:table and display:inline-table tells the renderer that content shall be treated as table having tbody , rows, cells, etc. Same thing for display:flexbox, grid, etc.

3. In some cases it defines other things like display:none; display:list-item; Note: there is still no display:inline-list-item ...

Ideally we should have these instead:

1. display: inline | block; - and just these two.

2. flow: auto | text | table | vertical | horizontal | grid...; - defines layout manager of element's content.

3. visibility: visible | hidden | none; - Note: visibility:none instead of display: none;

Re: Things I wish I’d known about CSS

#248

Post by chrismorgan »

leephillips wrote: post #243
chrismorgan wrote: post #240

Earlier quoted context omitted.

Sorry, you are correct. Drop the final parenthetical, then, but I stand by the rest.

Yes, your other point was something I hadn’t thought about. I guess his advice would be good for some people, but I’m not sure about the 99%. It’s not uncommon to use small images as text-like elements, and when you do that, if you have this reset, you will need to explicitly make them inline. Not a huge deal, but people tend to copy and paste their own CSS libraries between projects, and redefining basic default sem…

I’m going to stick with the >99% figure. I think it is uncommon, rare even. Other than chat systems with custom emoji rendered as an img, I honestly can’t think when I last saw a site with inline tags. (I’d guess it to be within the last month, maybe even the last week, but it wouldn’t surprise me if it wasn’t.) Twenty years ago, sure, but they’ve gone out of fashion stylistically as well as technically. Technically, I suspect background-image and icon fonts are both used more commonly for small iconography.

Re: Things I wish I’d known about CSS

#249

Post by towb »

rimliu wrote: post #155
towb wrote: post #91

Earlier quoted context omitted.

I think we picked up a lot more of the basics back in the days because doing CSS was much less forgiving than it is now. And the whole struggle with pixel perfect between browsers just forced you to spend hours on these tiny things.

I was also waaay more limited. All those clever hacks to get equal height columns, "sliding doors", workarounds for IE5/6/7…

Yep, for sure! It was a fun ride but I'm happy it's over, though I don't enjoy CSS the same these days. Could be age and all that, who knows.

Re: Things I wish I’d known about CSS

#250

Post by IggleSniggle »

egfx wrote: post #214
IggleSniggle wrote: post #201

Earlier quoted context omitted.

Have you looked at Definitive CSS? It's up to date and a massive 1000 page tomb of encyclopedic knowledge and guidance. Anyone who digests that entire thing is not being dismissive of CSS. Digesting that is taking CSS more seriously than most people take learning new programming languages...which is appropriate! Because with CSS, you not only need to learn the language, you are effectively learning something like a l…

> Technically, you do have everything you need. And with a decade of work under your belt using those things, you can build some amazing and good robust systems. It's also easy to build total junk that nobody can understand but you. This is what’s beautiful about the frontend. It’s “magic” and underneath in code speak it may be ugly but the work speaks for itself. Arguably that is only if you own it and maintain it.…

Or, you know, using a well vetted, well organized resource that has already done all the digging and collating of techniques and organized into a well structured Definitive Guide.
Post reply on HN