[HN Gopher] Old CSS, New CSS (2020)
___________________________________________________________________
Old CSS, New CSS (2020)
Author : pferde
Score : 148 points
Date : 2021-12-12 18:08 UTC (4 hours ago)
(HTM) web link (eev.ee)
(TXT) w3m dump (eev.ee)
| chilling wrote:
| Man! That was a really, long and funny read. It brought me so
| much memories.
|
| I remeber seeing a great site around 2003 and spending night-time
| reading its code and trying to grab all the details on how they
| did it. Copy pasting its code to the Notepad and trying to
| replicate it in Microsoft FrontPage.
| thought_alarm wrote:
| > this company Netscape had been selling its Navigator browser
| (to businesses; > it was free for personal use), and then
| Microsoft entered the market with its > completely free
| Internet Explorer browser, and then Microsoft had the >
| audacity to bundle IE with Windows. Can you imagine?
|
| I believe the larger problem was that Microsoft offered companies
| and OEMs discounts on their Windows license fees if they agreed
| to stop purchasing _any_ Netscape software, client and server,
| thereby collapsing Netscape 's revenue from both ends.
| conception wrote:
| BeOS has entered the chat.
| dkdbejwi383 wrote:
| Could you expand on this for someone unfamiliar with the
| reference you're making?
| marcosdumay wrote:
| Basically, MS offered discounts for anybody that wouldn't
| sell alternative OSes too. That includes OS2 (well I
| imagine it as aimed at it, and Be was unintentional), that
| IBM developed in a partnership with MS.
|
| After they settled that case, they stopped offering
| discount, instead they just billed Windows copies by
| computer sold, independently of the OS.
| _HMCB_ wrote:
| You, sir, deserve a Pulitzer Prize for this. I smiled and yet
| shed tears of pain reading this. I worked for a web dev studio in
| the mid '90s. That was so rare. We had a partnership with a
| design and marketing firm because we were really the only ones in
| quite a wide area that knew how to code. To top it off, we were
| an Oracle database partner and would service big and upcoming
| companies. A database tied to a website, that was next level.
| LOL.
|
| Those were the days. I kinda miss them. Everything was new and
| unexplored.
| edoceo wrote:
| Fantastic read for a geezer like me. Web-safe colour is why my
| logo is #336699 blue
| kingcharles wrote:
| I still use web safe all over the place, because OCD.
| mmcgaha wrote:
| I am pretty much shit at using CSS correctly. I am working on a
| 38 page site and looking at the CSS is disgusting. The html is
| clean, the back end is simple and easy to understand, and the
| database is something to be proud of (well except where I used
| those seductive postgresql arrays instead of relations.) Some day
| though I am going to come back to make a change and that CSS is
| going confound me to no end.
| lloydatkinson wrote:
| I recommend trying out Tailwind
| krono wrote:
| > The html is clean
|
| Bye clean html
| armchairhacker wrote:
| Html can't be clean without custom components, you have to
| add elements to alter layout.
|
| Unless you're making a "classic" HTML page like an article,
| but then you wouldn't have trouble with CSS.
| [deleted]
| aasasd wrote:
| I gotten off the frontend train ten years ago. Then just the
| other day I decided that generating some stuff for printing in
| HTML should be way easier than fussing around with spreadsheets
| (and was right)--so finally looked up how one positions things
| with the flexbox. Where back in the day things were like literal
| masochism and still even selling your soul wouldn't get you far,
| now it's just 'put these properties on your divs to tell the
| browser which way each of them goes'. Whoa daddy.
| agumonkey wrote:
| HN source is also a testimony of css2 era. Inline attributes
| still present.
| nine_k wrote:
| I don't see a stark difference between inline attributes and,
| say, tailwind CSS.
| rvense wrote:
| To me it's the other way around. If you have a class that's
| only used once, is it better than inline styles? To me it's
| worse. You've just moved it to a different file.
|
| With Tailwind, I work from the bottom up, with small
| composable classes, I notice common combinations and bundle
| them together in new classes. The end result is a lot better.
| [deleted]
| agumonkey wrote:
| fair point, i was thinking about tailwind actually .. i guess
| it just provide shorter encoding and a few shortcuts to get
| done quickly (at the cost of ad-hoc names)
| 1123581321 wrote:
| Utility classes are typically fewer characters, can contain
| multiple declarations and benefit from cascading, can benefit
| from responsive selectors, and can be updated in one place in
| the code when changes are required.
| yRetsyM wrote:
| Side note: the comments in this are all almost as valuable as the
| content itself. Remember when comments were a way people used to
| enhance content rather than attack or degrade it?
| [deleted]
| geektips wrote:
| Thank you for the reminder, I went back to read the comment
| section.
| eCa wrote:
| I still have an old personal website[1] that uses Server Side
| Includes. I've been meaning to convert it to something newer for
| many years, but it chuggs along.
|
| Next time I switch servers I won't setup Apache so then it would
| need to be solved.
|
| [1] It maybe gets updated once a year.
| KarlKemp wrote:
| This is indeed something I've noticed. The discussion about
| browser engines seems to draw heavily on late-90s folklore while
| entirely missing the point: browser engines today are _extremely_
| easy to work with, in the sense that it 's entirely possible to
| develop something on, say, Safari, and expect it to work
| flawlessly on Chrome and Firefox, as well.
|
| Back in the days, you had to budget twice the time to make
| something work in two browsers that it took for one. This is not
| hyperbole. You'd gain a bit from doing something the second time,
| but lose just as much trying to make it work in more-or-less the
| same way.
|
| Then, there are the complaints about Chrome: there is _absolutely
| nothing wrong_ with the way Google manages Chrome, with the
| possible exception of what they are doing to adblocking. Their
| approach is to try to make the browser platform an equal among
| the walled gardens they fear, primarily iOS and, to a lesser
| degree these days, Facebook. _None of the lessons of Internet
| Explorer apply_ , because the problem with IE was that it was
| using Windows-only extensions such as ActiveX.
| thrower123 wrote:
| That's because Safari is now the laggard that IE used to be
| notpachet wrote:
| It was even worse than that: you often had to budget for
| different version _numbers_ of the same browser, or even
| different versions of a single version number. I 'm a little
| foggy on the details, but I believe IE7 would force pages into
| "compatibility mode" if they were hosted via intranet. I was
| working for the government at the time and our apps were all
| hosted on the agency network. It was hell.
| kingcharles wrote:
| Especially if you were doing anything clever with Javascript.
| You pretty much had to code from scratch for several versions
| of every browser. Some you could do client-side and others
| would have to be rendered server-side. As poster above said,
| you would spend half your design time on getting the thing to
| look/run the same everywhere. Things are a _lot_ closer now.
| kall wrote:
| I saw the examples like `<img border=0>` and kept thinking "wtf
| why are they using styled-system here? Is this supposed to be
| pseudo code?" until I realized it must be something browsers
| supported (and probably still do). That should date me as a web
| developer.
| kingcharles wrote:
| That early image of Internet Explorer is very advanced. The page
| has a white background. When I first got into web design the page
| background was whatever the default color of the window control
| was. Usually light grey. I don't remember being able to change
| it?
| warpech wrote:
| I wouldn't be surprised if this ended with a smirky one-liner
| presented in a popular CSS framework, making a full circle from
| (early HTML): <H1><FONT
| COLOR=red>...</FONT></H1>
|
| to (Tailwind CSS) <h1 class="text-
| red-500">...</h1>
|
| I totally acknowledge the accomplishments that the Web standards
| and their implementations have made since the early days.
|
| On the other hand, while I am no Tailwind proponent, for many
| applications "worse is good" and Tailwind is a bridge to the
| straightforward beginnings of the web design.
| seanwilson wrote:
| > On the other hand, while I am no Tailwind proponent, for many
| applications "worse is good" and Tailwind is a bridge to the
| straightforward beginnings of the web design.
|
| The difference here is with utility classes, you're meant to be
| using UI components to share styles between pages (e.g. you
| have a `button` file that contains all the styles for that
| button), instead of CSS features (classes, cascading styles and
| specificity) so it's not the same as just reverting back to
| inline styles.
|
| The article is a great read on how current best practices
| evolve and how the initial attempt to solve something (e.g.
| with a new standard) doesn't work out as we learn more about
| the problem. There's nothing to say the traditional CSS
| approach is going to be the best approach, especially since
| complex single page web apps weren't even a thing when CSS was
| invented.
| iratewizard wrote:
| Remember that text-red-500 can be changed in one place across
| the application and allows you to apply general design ideas to
| quickly build layout. I don't personally use anything like
| tailwind, but the self-rolled css library I do use has a whole
| section of one liners like "flex" or "vertical-center" that
| saves me hours.
| mcntsh wrote:
| What if you want it to be red on hover?
|
| hover:text-red-500
|
| What about just at the medium breakpoint?
|
| md:text-red-500
|
| Only in dark mode?
|
| dark:text-red-500
|
| Tailwind is much more powerful than inline styles.
| wildrhythms wrote:
| What do you mean by 'worse is good'? Remember the 'separation
| of concerns' wrt HTML/CSS was at a time when JSX, lit-html, web
| components et al did not exist. There was no easy way on the
| front end to do something like this: function
| PrimaryHeader({children}){ return <h1
| className="text-red-500">{children}</h1> }
| <PrimaryHeader>...</PrimaryHeader>
|
| Thus, the 'separation of concerns' and many thousands of hours
| of developer toil ensued to both completely separate, yet still
| closely bind, style to markup by way of class names. There's no
| point to have a .PrimaryHeader class in a world of web
| components and atomic CSS (Tachyons, Tailwind, etc.)
|
| Even absent of an atomic CSS library, I still prefer inline CSS
| to making up arbitrary class names; my entire codebase can be
| JSX files, and every component is self encapsulating. I don't
| see this as 'worse' in any way.
| [deleted]
| [deleted]
| junon wrote:
| Needs the (2020) tag.
| rectang wrote:
| Now _If Only_ (tm) debugging CSS and organizing CSS hierarchies
| to avoid conflicts were easier...
| dexwiz wrote:
| Proper use of chrome dev tools will help you here. Instant
| feedback based on modifying css in the page is about as good as
| you get when debugging. The computed tab really helps also.
| extra88 wrote:
| All browser dev tools are good for that. I like Firefox's
| slightly more that Chrome's for it, Safari's is third. I
| don't know if Edge is different than Chrome for write,
| debugging CSS.
___________________________________________________________________
(page generated 2021-12-12 23:00 UTC)