[HN Gopher] CSS Hell
___________________________________________________________________
CSS Hell
Author : gaws
Score : 228 points
Date : 2025-04-22 21:58 UTC (1 days ago)
(HTM) web link (csshell.com)
(TXT) w3m dump (csshell.com)
| skeptrune wrote:
| It would be fun to use this as a motivational punishment lol.
| Something like "team member who does the least amount of code
| review has to go through CSS hell" :).
| MarcelOlsz wrote:
| "team member quits on the spot .003s later"
| spaghetti-code wrote:
| OC here :) I originally made this two years ago as a gift for
| my friend who hates front-end development, so not too far off
| haha. Although he didn't do anything wrong, it was just his
| birthday -\\_(tsu)_/-
| riggsdk wrote:
| I spent waaay too long trying to figure out why my CSS rule
| didn't work. It doesn't accept me to overwrite an already
| existing one. The rules did not specify this at all. It is not
| clear that the game wants me to find _another_ rule that fixes
| the problem instead of adding a single perfectly valid line of
| CSS that does it. There is a huge difference between those two.
| CSS being cascading meaning that any CSS property coming after an
| initial rule will overwrite the previous one (in part or fully).
| It would be really nice if the game would tell me if the rule I
| added wasn 't allowed instead of just silently failing to do
| anything with no feedback.
| marktolson wrote:
| I thought the site was broken for the exact same reason.
| Instead of being a troubleshooting / practice type test it's
| more of a puzzle that I do not care to solve.
| craftkiller wrote:
| You can still play that way if you want. Just open your
| browser's dev tools and edit the CSS rules inside the dev
| tools. Once you have them overlapping, you just need to do
| something to trigger the victory check which can be
| accomplished by doing basically anything (resize the window,
| click on a circle, type something, I haven't found any action
| that doesn't trigger the victory check yet).
| npodbielski wrote:
| Exactly what I did to the first one. `left: 12xxpx` did it.
| Then I got back here to check if I am only one dumb enough to
| not understand why it does not work.
| tobinfekkes wrote:
| I ran into the same thing and just quit. I would have greatly
| appreciated this little piece of feedback in the UI.
| archerx wrote:
| Yea I found that stupid as well. I opened the inspector and did
| it there and it accepted my answer. I decided not to continue
| afterwards.
| 1dom wrote:
| It's a perfect representation of CSS: it looks and feels like
| it should do what you need, but it doesn't _technically_ do
| what it's supposed to do, so you spend a few hours _trying_ to
| make sense of it, falling back to just random fuzzing and trial
| and error, before concluding it's all broken and finally
| accepting it in its current wonky form, trusting that in some
| browser, somewhere, it works.
| Devasta wrote:
| HTML -> JSX
|
| CSS -> Tailwind
|
| JS -> Typescript
|
| It must be maddening working as a browser dev knowing that
| the very first thing most devs worth their corn do is
| immediately go to abstracts so they are able ignore your work
| as much as they can.
| whstl wrote:
| I feel however that trendy tech is moving closer to the
| browser.
|
| Previously we had things like CoffeeScript, HAML, Pug,
| SASS/SCSS.
|
| Tailwind is just plain CSS classes and the code generation
| step is just an optimisation.
|
| For TS there is a proposal for adding type annotations to
| Javascript. Dunno how far it is, though.
|
| JSX is the odd one out but still closer to HTML than things
| like HAML, which also had embedded logic but looked nothing
| like HTML.
| bryanrasmussen wrote:
| I'm pretty good at handling the cascade and knowing how
| things work, so this experience you are describing is not
| mine where CSS is concerned, I doubt I've had to do several
| hours of trying to make sense of any CSS for probably 5-6
| years.
|
| As such that the game does not actually allow you to use the
| cascade as it should be used is a downside.
| damnitbuilds wrote:
| C++ I can do.
|
| CSS I leave to masochists.
| thiht wrote:
| Same, because of the lack of feedback I genuinely thought it
| didn't work. Especially considering the fact many editing
| things don't work (double click doesn't select,
| cmd+(shift+)arrows doesn't work, etc.)
| wjdp wrote:
| Ah just assumed it was broken, found the dev tools 'hack' Game
| is very much missing an intro
| simonw wrote:
| I got this message on my phone:
|
| "I mean, would you write code on your phone? Actually, don't
| answer, because I don't want to know."
|
| Yes I would - I do that pretty often these days (partly because
| LLMs called from my phone do the frustrating typing part for me.)
| jeffgreco wrote:
| Mostly in ChatGPT Canvas/Claude Artifacts or the like?
| simonw wrote:
| Yes exactly - usually in Artifacts, which I then copy and
| paste into the GitHub web editor in order to ship them via
| GitHub Pages to https://tools.simonwillison.net/
| edoceo wrote:
| From your phone?! With that tiny screen?
| simonw wrote:
| I always buy the iPhone with the largest screen, but
| yeah.
| lucb1e wrote:
| Depends what you call tiny. I've only found one "tiny"
| phone (that is, a normal smartphone size ten years ago)
| with a modern chipset (so I don't need to replace it in
| <=3 years) and that's the Jelly Max... but it's only
| purchasable directly from China and their warranty page
| is broken so I don't want to throw my coins into a slot
| machine. Can't find even a single other model, no matter
| the price. Xperia 5 V comes close but is only available
| second hand; Xperia 10 VI has a pretty slow SoC.
| Everything else is a size that people amusedly called
| "phablet", or was literally a tablet
|
| Phones are definitely usable as desktops nowadays,
| especially if you stick it in a cardboard and can
| actually see (make use of) most of the pixels on the
| screen. People just haven't gotten used to it yet.
| They're not slow either, and for some workloads
| apparently very fast: I recently also noticed my phone is
| faster at certain ffmpeg codecs than my laptop!
| archerx wrote:
| I feel like the touch inputs are a bigger hinderance than
| the screen. Manipulating text with a touch screen
| keyboard is torture.
| cess11 wrote:
| I find PentiKeyboard to strike a nice balance. You get
| six circles sized depending on where you put your
| fingers, and they contain most of what you expect from a
| regular keyboard, plus convenience chord for Ctrl+b to
| hasten tmux actions, in-keyboard cheat sheet and a
| character lookup and picker.
|
| Ergonomically it's quite good, your fingers end up in a
| convenient place and when you want to reallocate your
| body you remove and reset the circles to new positions.
| The drawback is that on a phone you need to use both
| hands to type, but if you're doing something like
| programming or text editing you'll likely be rather
| involved anyway.
|
| It's also nice that the keyboard doesn't hide half the
| screen, instead you can look through the circles or touch
| outside of them to temporarily hide the keyboard
| entirely.
|
| Edit: Right, forgot to mention perhaps the best
| functionality, the sixth circle repeats the last bytes it
| sent, so if you do some action you have a button to just
| do it again and again. Comes in handy all the time.
|
| https://play.google.com/store/apps/details?id=de.software
| _la...
| archerx wrote:
| Wow that's interesting but I don't think I would ever use
| that. I can actually type really quickly with the touch
| keyboard but the problem is going back to correct things.
| On iOS getting the cursor to move back to a previous part
| of the text to fix an error is and adventure in
| frustration. Even holding down the space button and
| draggging the text cursor around is awful. A lot of the
| times it's just faster and easier to erase large chunks
| of text and rewrite it.
| cess11 wrote:
| Yeah, I really missed Penti when I had to use an iOS
| device for work for a while.
|
| I'm mostly in a terminal, commonly in vim, where the
| 'regular keyboard' experience makes text and code editing
| quite convenient compared to the usual software keyboard
| suspects. In web forms and the like it's also fairly
| convenient, one can send move left and then hit repeat
| until the correct position (or any number of arrow key
| equivalents for moving rows). I hardly ever move the
| cursor by pointing somewhere in the text.
|
| It took me something like three weeks to become really
| fluent in Penti, back in 2017-2018 I think.
| ivanjermakov wrote:
| I can't stand when websites block me off like that. At least
| let me freaking see what it is about...
| bombela wrote:
| In Firefox Android I can request the desktop page explicitly.
| lolinder wrote:
| Doesn't work on my phone on this site--it's detecting the
| viewport size, and even in landscape with desktop page mode
| turned on the site refuses to show anything.
| thegeekpirate wrote:
| Desktop mode using Firefox v137.0.2 as well as Chrome
| v135.0.7049.100 on a Pixel 7a worked for me, in both
| portrait and landscape.
| pfg_ wrote:
| Firefox on android makes the viewport size bigger, but
| maybe it depends on the original size of your phone
| mediumsmart wrote:
| iOS safari requesting desktop site no luck. But Orion from
| Kagi shows the desktop version.
| dtj1123 wrote:
| Vivaldi also lets you do this
| cess11 wrote:
| Tried that on some service promoted here yesterday, they
| still figured out I was on Android and kept blocking me.
| Happens rather often, actually.
|
| I find it convenient to do both some programming and
| exploring documentation and new technologies on a tablet,
| and just discard those that don't allow me to. If you're
| selling to computer professionals you shouldn't try to
| preempt the expected problem of customers complaining that
| your services don't render right on a small iPhone.
| asplake wrote:
| I started the SolidJS tutorial on my iPhone this morning. Was
| impressed that it worked at all, but I couldn't find a way to
| copy & paste, and switched to my MacBook. Better than giving up
| I guess...
| Biganon wrote:
| I think I'm going to be sick
| eek2121 wrote:
| "Your viewport concerns me. Hey! You're seeing this message
| because of your screen- specifically, the width of it. I'm hyped
| you're here, but this game wasn't designed for small screens, and
| you will not enjoy attempting it. I mean, would you write code on
| your phone? Actually, don't answer, because I don't want to know.
| Anyway, hope to see you soon on a desktop. -Marcos"
|
| Hopefully "Marcos" doesn't need a job any time soon! :D
|
| Unsure if the site is supposed to be satire or something because
| that is the message I received, however, CSS, including
| responsive design, is actually simple to pick up.
|
| Note that I'm not a designer at all (because THAT requires actual
| skill), just a dev.
| sampullman wrote:
| Like many things, CSS is easy to pick up and hard to master.
|
| There's any number of reasons the author might not support
| mobile for this personal, free project. "I don't feel like it"
| would be a perfectly valid one.
|
| Also, based on their GitHub profile, they already have a job
| (at Google).
| bpev wrote:
| My mind went something more like this:
|
| You dare to call this game "CSS Hell", and then tell me that it
| will be TOO hell for me to play on a phone???
|
| I USE CSS EVERY DAY. YOU UNDERESTIMATE MY TOLERANCE FOR SELF-
| HARM, MORTAL.
|
| *opens site in mobile in desktop mode
| ForOldHack wrote:
| Uh uh... I am going to count your response as 'Challange
| accepted.' What multi pain/pane does your phone run?
| bpev wrote:
| ngl running in phone was definitely not ideal
| overhead4075 wrote:
| Guess I'll go back to coding on my phone :'(
| kevinsync wrote:
| I'm very, very good at CSS and this is absolutely maddening. I
| grudgingly respect it a lot more because it's really fuckin tough
| LOL. No overwrites, no transforms, locked elements you can't
| manipulate, limited amount of CSS property "slots" you're allowed
| per puzzle. In the age of AI where answers are immediate, hats
| off to something this absolutely infuriating hahaha
| agos wrote:
| at the second puzzle I went all cocky with a transform and the
| pop up message telling me I couldn't use it really got me
| hooked - now, this is a challenge
| jeffgreco wrote:
| I got stuck on #2 and had to look up the solution, which still
| doesn't seem to make sense?
| thrownaway561 wrote:
| how do you look up the solutions?
| jeffgreco wrote:
| The intro instructions link to https://github.com/marcos-
| acosta/css-hell/blob/main/solution...
| thrownaway561 wrote:
| https://github.com/marcos-acosta/css-
| hell/blob/main/solution...
|
| Just an FYI... Your screen size plays into the solutions.
| Make your browser width 1350px.
| jeffgreco wrote:
| Does it? Aren't units viewport relative?
| brianush1 wrote:
| apparently the pegs only have to touch the holes, they don't
| have to line up perfectly
| jeffgreco wrote:
| ahhhhhhh thanks
| kirjavascript wrote:
| transform is forbidden but -webkit-transform seems to work :^)
| dheera wrote:
| I did exactly this too haha
| 90s_dev wrote:
| I like how I can click-drag one of the CSS text fields and still
| move the box.
| Dansvidania wrote:
| /s ?
| Kamillaova wrote:
| > Web site created using create-react-app bro...
| SadWebDeveloper wrote:
| I didn't understand what is the point of the first challenge?
| anyone care to explain me what is the objective/task because
| there are just two circles and basically no instructions, kinda
| feels like a real job (lol)
| degamad wrote:
| From the opening page of the site:
|
| > The mechanics of the puzzles are simple: for each peg, there
| is a hole, and each peg must overlap with its corresponding
| hole. To accomplish this, you will add CSS properties to
| certain divs.
| spartanatreyu wrote:
| 1. Peg A and Hole A to see the CSS on both elements 2. Peg A
| can have one more rule added to it (that you can specify)
|
| Your objective is to get Peg A over Hole A.
|
| Spoiler free hint (reverse text to read):
|
| )tnetsisnoc yats ot tsuj stinu wv esu ot tnaw yam uoy dna(
| nigram gnisu sevlovni noitulos ehT
| gaoryrt wrote:
| #9 really got me.
| odo1242 wrote:
| By the way: the website restricts use of properties like
| transform() and animation, but the same restriction doesn't apply
| to the transition property. Might be worth noting.
| yakshaving_jgt wrote:
| I'm confused. I completed the first two puzzles just applying a
| simple transform: translate(x, y)
|
| I thought I wasn't allowed to?
|
| It seems like I can trivially complete the third puzzle with the
| same approach.
| agos wrote:
| did you do it with your browser's developer tools?
| yakshaving_jgt wrote:
| Yes. Maybe I was supposed to write the code somewhere else
| and I didn't realise.
|
| Aah... Now I see. You're meant to click on each element to
| view its properties and add your own. Silly me.
| manuhabitela wrote:
| cool stuff :)
|
| I got some warnings like "this is not a best practice and I don't
| like bad practices". Like hey, who are you to judge me like that?
| I'm offended.
| zcror wrote:
| an extension to run with my phone would be nice
| KolyaKornelius wrote:
| It doesn't allow margin-right, you have to use margin to set the
| right margin. This may be someone's personal hell, not mine.
| h1fra wrote:
| First puzzle was hard, margin-right was not working. But you
| can't double click or use ctrl-arrow or ctrl-backspace which is
| infuriating.
|
| Also typo in "Unfortuantely" message when you use the forbidden
| transform
| rightbyte wrote:
| Nice. Feels abit like TAS-100, "the assembler game nobody asked
| for", but a bit more realistic.
| hapidjus wrote:
| On the first level margin-left:660px got accepted as a solution
| even though the peg barely overlaps.
| jasonlotito wrote:
| That's literally the challenge. Get the peg to overlap the
| holes. That's it. It literally says this on the first page:
|
| > for each peg, there is a hole, and each peg must overlap with
| its corresponding hole
| hapidjus wrote:
| Sure, I just assumed that the peg should overlap the entire
| hole and not just by a couple of pixels. No need to be salty
| about it.
| unangst wrote:
| Normalize adding a screenshot of what we are missing when you
| decide for us that a site isn't mobile friendly.
| prokopton wrote:
| Yeah, I'm not gonna go back on a desktop later.
| crazygringo wrote:
| Also, I'm viewing this on a large iPad screen. It's plenty
| wide. Talk about being user-hostile.
| spaghetti-code wrote:
| OC here- I think that's a really good suggestion, I'll add
| something like that :) I added that screen while I was quickly
| cleaning up an old project and didn't have the time to do a
| full responsiveness redesign. +1 that it's a little
| inconsiderate to all the small-screen users
| esschul wrote:
| https://www.youtube.com/watch?v=0yXJ4t6Ax1U
| UltraSane wrote:
| I never understood why anyone would want to learn CSS
| meew0 wrote:
| This was a great challenge, thanks for sharing! I do agree that
| the messaging could be improved a bit about what is possible and
| what is not.
|
| Here are my solutions, for anyone who is interested:
| https://gist.github.com/meew0/98cca86cd3f64ee71fe39bf747aa01...
| gbalduzzi wrote:
| It wasn't clear at all to me that the peg doesn't need to
| overlap the holes perfectly, I was almost ready to give up at
| lvl 2! Thank you for the solution
| djoldman wrote:
| Is it possible to construct a meta-system or constraint-system
| under which it's impossible or very difficult to construct 2
| functions that effectively result in the same outcome? Does this
| exist?
|
| It seems to me that CSS suffers from the "1 billion ways to do
| the same thing but very slightly differently" problem.
| butz wrote:
| !important does not work? This is really hell.
| croemer wrote:
| typo of blasphemized in: "you blashpemized Cascading Style
| Sheets", actually should be blasphemed even
| croemer wrote:
| The peg is bigger than the hole in #1 making me think I need to
| scale the peg down. Turns out you don't actually need to get the
| peg inside the hole, you only need them to touch!
|
| Fun once one figures it out. Text editing is a little annoying as
| one can't highlight with the cursor and delete.
| egonschiele wrote:
| I'd love to plug Josh Comeau's excellent CSS course https://css-
| for-js.dev/ Expensive but worth every penny.
|
| <I'm not affiliated with Josh in any way>
| kyle-rb wrote:
| Cool game!
|
| Ran into a weird bug on puzzle 2 where adding a `flex-flow`
| property and then deleting it also seems to unset the `flex-
| direction` property on the underlying element. Probably should be
| disallowed under the no-mixing-shorthand rule I guess.
|
| Also could you make it so that clicking inside a text box doesn't
| trigger the drag effect? It would be nice to be able to
| highlight/double-click text to delete/replace it.
| cantrecallmypwd wrote:
| Doesn't work on Mobile Safari or Brave on an iPad Pro m4. (x)
| button and add css don't do anything.
___________________________________________________________________
(page generated 2025-04-23 23:02 UTC)