12 ms·
Hell Yes CSS
- memonkey 6y agoCSS is not as traditional an experience but is so fundamental to succeeding as a front-end developer. I really love that this is a Zine as well!
- Santosh83 6y agoWould you explain what you mean by CSS not being as traditional an experience? Compared to what? Agree with the rest of your comment...
- wpietri 6y agoProgramming, I'm guessing. Page layout was its own weird world even before HTML came along, and the explosion of devices and use cases has made the domain much weirder. Put 25 years of CSS evolution on top of that and it's very much its own beast. As somebody who's done mostly back-end work lately, whenever I approach CSS it's one WTF after another. I keep hearing that it has settled down, though, so I am looking forward to learning it properly next I need to do something interface-y.
- varrock 6y agoMy biggest tip of advice for anyone dipping into CSS is to focus on _why_ CSS is behaving the way it is instead of memorizing the different properties and selectors. Some principles in CSS won't ever go away, and they will even explain how the newer features that "settled down" CSS work and make then even easier to use.
- wpietri 6y agoWhere do you recommend learning those principles?
- ericmcer 6y agoFor the bottom two columns on the page, shouldn't the second column break below the first column in a mobile/responsive view? I normally don't get picky about css stuff except for when it is in css tutorials lol.
- chrismorgan 6y agoI think you’re saying that you think the “I want this!” and “Commonly asked questions” should appear after the “Table of contents” and “take a peek inside” on small screens, because on larger screens they appear to the right of it (rather than to the left). Why? Having it this way round is definitely less common than the other, but by no means is it rare, and there’s nothing at all wrong with it.
- dheera 6y agoSo many years into CSS and it's still damn near impossible to (a) vertically center multi-line text in a div (b) set the width of a div or video in units other than pixels and let the height be set based on an aspect ratio. Both result in nested div hell.
- brundolf 6y agoThe answer to (a) (along with many other things) is to use Flexbox: .my-container { display: flex; justify-content: center; align-items: center; } This should work for (b) as long as the height isn't in terms of a percentage: .my-video { --my-video-height: 120px; height: var(--my-video-height); width: calc(var(--my-video-height) * 16/9); }
- pineconewarrior 6y agoYou can also use grid and the place-content shorthand! These things are getting better. CSS was a nightmare in the 2000s.
- brundolf 6y agoEven I'll admit that Grid is complicated. It serves a valid use-case, but it's honestly a very rare one in my experience and the learning curve is steep
- innocenat 6y agoPersonally I love CSS Grid. It allows me to move contents around easily from Desktop to Mobile view just by defining different grid-template-areas.
- tsujp 6y agoGrid is nice but overused in my opinion. However, at the end of the day whatever gets the job done and is sane is a valid solution in my eyes but I prefer to think of grid as anything requiring centering on two-axis and/or macroscopic to the task at hand. So for instance I would do the responsive page layout in grid, probably. Then I would do positioning the elements within a article or section with flexbox.
- zelly 6y agopaywalled article
- kaichanvong 6y agohow unconventional
- deleted 6y ago[deleted]
- samoa42 6y agonot for me. try w/o .js but yes, linking to non-free resources should be discouraged
- gscott 6y agoI paid $60 to a guy on Fiverr to do css for me just a few days ago. I should have been able to do it myself but after fooling with it for awhile I gave up.
- tachyonbeam 6y agoI'm sure someone will come and say they disagree, but I find CSS extremely unintuitive as well. The primitives it has compose very poorly. There are too many ways to do the same thing, each with their own weird quirks. Sometimes it's really hard to get it to render something simple. I mean... Just centering something on the screen is needlessly complicated. I wish CSS was more like a programming language, with a minimal set of primitives that are nicely composable, instead of 1000 bells and whistles that go in every direction.
- tephra 6y agoI agree with your comment mostly but just to note that it is no longer complicated to center things. .centered { display: flex; justify-content: center; align-items: center; } Indeed there are two (at least) more ways to both horizontally and vertically center something (using CSS Grid and the good old translate(-50%, -50%)) and with flex I always have a hard time remembering if it is justify-items or justify-content..
- divbzero 6y agoI’m chuckling because (a) parent is right that it’s easier than before, and (b) grandparent is right that it’s still infuriatingly obscure to anyone not fluent in CSS.
- strenholme 6y agoWith “display: table”, “margin-left” and “margin-right” horizontally center the content. For example: <style> .foo { display: table; margin-left: auto; margin-right: auto; } </style> <div class=foo> <h1>Hello, world!</h1> </div> Here, it is only centered when “display: table” is present. e.g. this is not centered: <style> .foo { /* display: table; DISABLED */ margin-left: auto; margin-right: auto; } </style> <div class=foo> <h1>Hello, world!</h1> </div> Simple “display: table” two-column layout: <style> .all { display: table; margin-left: auto; margin-right: auto; } .sub { display: table-row; } .left { display: table-cell; } .right { display: table-cell; } </style> <div class=all> <div class=sub> <div class=left> <h1>Hello, world!</h1> Left side. </div> <div class=right> <h1>Right bar</h1> Right side. </div> </div> </div> There are ways to vertically center content, but since that wasn’t something CSS was designed to do (for the kinds of things where something vertically centered makes sense, we were supposed to be making web apps in Java), they are all clunky.
- bartvk 6y agoJust a question as a non native speaker. Is the "hell yes" in the title considered slightly offensive? On par with "Damn LLVM" or something?
- TylerE 6y agoOnly to anyone over 70. Anyone who would take offense at that is going to find something to be offended by in anything ediger than Mr. Roger's Neighborhood.
- elcritch 6y agoIt is used in the positive sense with an extra emphasis of excitement.
- brodie 6y agoYour elementary school teacher would give you dirty looks if you said it, but your teenaged and adult friends would give you high fives and "hell yeahs" right back.
- josephg 6y agoIt also depends on where you are. Here in Australia, hell / damn aren't considered bad words. I think americans have a perception that australians swear a lot. We do - but also, a lot of what my american coworkers considered swearing doesn't register as swearing in my head. Here in australia (at least how I was raised), "hell" is just a word.
- brodie 6y agoAmerica is culturally all over the map (and literally too I suppose?), maybe more so than Australia. While the child-in-school thing might be universal across each state, there are many places were the word hell isn’t profane. Hell, sometimes it would be weird and just plain confusing not to say the word!
- asicsp 6y ago>there's a bonus "heck yes!" no swears version [0] [0] https://twitter.com/b0rk/status/1327291869471059968 https://twitter.com/b0rk/status/1327291869471059968
- petre 6y agoWow! A perfect example of thinking outside the box and a fresh new perspective on technical documentation. This is just one reason why we need more talented women in tech.
- yashap 6y agoSo, I’m an experienced backend dev, who only occasionally dabbles in frontend. And whenever I do, my CSS experience is basically: https://media1.giphy.com/media/13FrpeVH09Zrb2/giphy.gif https://media1.giphy.com/media/13FrpeVH09Zrb2/giphy.gif I’d like to fix that, and learn CSS well. I’m not looking for a quick zine like this, more of an in-depth course, say roughly 5-10 hrs. Ideally free, but I’d pay if it’s good. Anyone have any favourites?
- varrock 6y agoI know you asked for a course, but I cannot recommend MDN's Learn CSS section enough [0]. It's long, but it was the only resource that got me over my CSS imposter syndrome. They go over so many great principles and have wonderful examples. I'm a huge advocate of tutorial videos, so I was surprised at how helpful I found their documentation. [0] https://developer.mozilla.org/en-US/docs/Learn/CSS https://developer.mozilla.org/en-US/docs/Learn/CSS
- archarios 6y agoYo, with Flexbox and CSS grid frontend styling is liek nbd anymore. I've been doing frontend for a while now tho so I might be biased..
- archarios 6y agoI guess the trickiest thing still is some layout stuff that isn't covered by ^ and usually when I'm dealing with that kind of stuff I use https://learnlayout.com/ https://learnlayout.com/ as a reference
- cheshire_cat 6y agoSomeone else recommended https://every-layout.dev/ https://every-layout.dev/ last week in another thread. Not sure how in-depth it is, since I haven't bought it (yet).
- systemvoltage 6y agoI do not recommend this (despite of how cool it looks). It is using algorithmic aspects of CSS which is not what it was designed for. These aspects were added later on in CSS3+. Learn the basics of CSS first. Even after then, it is hard to recommend this Every-Layout approach.
- brundolf 6y agoI wrote a (much shorter) article in a similar vein a few years ago: https://css-tricks.com/css-is-awesome/ https://css-tricks.com/css-is-awesome/ I find it fascinating (saddening, but fascinating) that so many programmers are so turned-off by CSS and find it so unintuitive. I almost want to set out on a research project to figure out why that is. My experience with it couldn't be more different. Here's one way of looking at CSS (which I didn't think of until just now): CSS is not a language you build something up out of. It's more like you're carefully taming a wild horse, or pruning a plant. You have to embrace the natural movement of the thing, and strategically redirect it only where necessary. If you come in with the mindset of constructing the world from scratch (which works in most programming languages), you're just going to be fighting the beast the whole way, and you're going to lose.
- ianbooker 6y agoCSS has a fundamentally different cognitive kalkül. You can do things fast, but if you do not have a deeper understanding, it can get pretty frustrating. At least historically. It is like asking a Python programmer to write Prolog. Anyone can write Prolog, but only if you are willing to learn. The difference is: Prolog is an optional choice for most, CSS is a must for certain applications..
- jheruty 6y agoI'll bite. I'm not a fan of CSS. I learned it well enough to build a decent UI toolkit (draggable modals, collapsible, etc.) I hate how CSS tries to mix layout and style. A million articles about not using tables for layout, and it took 20+ years to get a grid. I tried to do some fancy text and element alignment with CSS, and it was not having it (and, yes, I know about display: table). In the end I reverted to a table. It worked, and I moved on with life. It is ridiculously hard to draw things in absolute positions. In many cases, it is easier to do a tiny bit of math and compute the positions of objects, rather than have to define parent/child relationships. But for true absolute positioning, you have to throw divs into a "portal" of some sort, and move that object into the root element. This makes doing things like pretty drag and drop extremely painful. Browsers are buggy as hell, and often something works on everything but [insert your most hated browser]. That's a hint that the spec is too complicated. I agree with your assessment, in that if you try to construct the world from scratch, you'll be "fighting the beast the whole way." I disagree that this is positive quality of the thing.
- cush 6y agoJulia is amazing. Love her zines!
- deleted 6y ago[deleted]
- strenholme 6y agoI’m just glad we’re no longer in the IE6 days where getting something as simple as a stable three-column pure CSS layout was a nay-to-impossible challenge. IE9 was probably the first version of IE with decent CSS (read ”display: table” which wasn’t broken); all of the other browsers (which didn’t have IE9’s market share at the time) had already added “display: table” support. Before “display: table” was widely supported, people would either mix CSS with a <table> layout, or have a fixed width (usually) single column design.
- loloquwowndueo 6y agoLOL IE :)
- strenholme 6y agoAnyone who learned CSS in the first 2000s decade was living in a world where designing a webpage was 5% getting the design down and working in Firefox, and 95% getting something to kinda sorta work in IE6. Just be glad we’re not trying to use “float” to make multi-column layouts anymore.
- olau 6y agoThe trick was to know beforehand what would work and what wouldn't. That way you only had to spend a couple of hours in the end fixing small things that were broken in IE. A couple of well-placed "zoom: 1" could fix a lot.
- josefresco 6y agoHaving lived through the "IE days", we're now in the "Chrome days" and the outcome will be no better.
- Puts 6y agoWhen people complain about CSS they seem to forget that HTML and CSS started as basically an Word-alternative, or actually more like an RTF-format for the web. Doing anything other than that is simply misuse, and all features we slap on to CSS3 and HTML5 does not change this. That's the reason you can not center a div without "hacks". It's like those creative kids building super Mario-clones in Excel, It's certainly possible but it's still madness. But I guess those kids don't complain about Excel being a lousy game engine...
- strenholme 6y agoI agree with the general gist of what you’re saying: The web was originally designed to share text documents with some light formatting. As it turns out, HTML wasn’t even originally a Word alternative. The original web, as envisioned by Tim Berners-Lee used something called “semantic” markup. For example, a HTML page would have <STRONG>, and it was up to the browser and end user whether <STRONG> was bold, italic, or in another color. It was only in the late 1990s, during the Netscape-IE wars, that CSS was tacked on to HTML; that’s why CSS syntax looks nothing like HTML syntax. CSS changed the web from a world where <STRONG> could look any of a number of different ways in to a world where <STRONG> would be, say, Lora Serif 600 weight italic at 24point. Javascript dynamically altering webpages to make applications was never the plan. It only ended up that way because Java applets on the web were effectively killed by Microsoft when Internet Explorer won the IE-Netscape wars, and no other plugin was widely available to fill the gap Java left. Flash was too proprietary and closed-source to take over the web, but it was huge for a while until Javascript finally caught up in the post-IE web of the 2010s.
- fourthark 6y ago> that’s why CSS syntax looks nothing like HTML syntax Also because CSS is rule-based rather than hierarchical.
- MrPatan 6y agoI really like CSS and find it relatively straightforward. Now, I think what helps me is that I've had 20 years to learn it as changes appeared. If I had to learn it all in one go now, how confused would I be? Very? Lots? It could be that a good way to learn CSS would be to try and replicate that experience and learn the history of it, not just the current state.
- open-source-ux 6y agoI think someone learning CSS today with an eye to targeting modern browsers with have an easier time. They won't have to learn those old hacks like floating elements, correcting box-sizng across browsers, centering elements etc. CSS has endless ways of writing and representing the same thing which actually makes things harder, not easier in my opinion.
- petr25102018 6y agoFor folks who bought this or consider buying it, help me please understand why? I know I am not the target audience since I know CSS enough but I think that this is just a very short reference to some aspects of CSS that can't help you much?
- atrus 6y agoI bought it. I'm not very good with CSS, as I haven't spent much time trying to learn it, and like the author, spent lots of time trying to puzzle over snippets I've been able to Google search. So, it's a nice ground level for me. I think it helped me understand CSS a little bit better. I also quite enjoy her other writings, so it was also purchased to support her as well!
- eurasiantiger 6y agoThe amount of ignorance around CSS is astounding. CSS doesn’t control how a page looks, it controls how the browser ”flows” a sequence of boxes and text onto the page one by one. Block boxes are 100% wide, grow to fit their content, and stack vertically with other boxes. Inline boxes grow to fit their content, and flow into the same rows with other inline content. They cannot have margins or paddings like block boxes. Inline-block boxes flow with other inline content like inline boxes, but can be styled like block boxes. Never have different types of boxes directly as siblings. Instead, create block wrappers for any inline content. This alone saves a lot of headache.
- olau 6y agoSome of these are self-inflicted wounds, though. For instance, why do you have to declare inline boxes to be inline-block before you can add padding to them? Perhaps just because of backwards compatibility, which could perhaps have been solved a bit more elegant.
- eurasiantiger 6y agoYou’re right; inline-block is a later addition. It doesn’t change the mental model, though. For example, it makes perfect sense for an empty inline-block to get aligned to the text baseline, while an inline-block with text also gets aligned to the text baseline. That is precisely what ”vertical-align: baseline” means: align this element’s line of text to the surrounding baseline. If the element doesn’t contain a text node, the inline-block does align correctly, but by default does not have a size unless explicitly specified. And if there’s something in CSS that is to be avoided unless necessary, it’s specifying things explicitly.
- cutler 6y agoCSS is an utter timesink. If I could only recover the time I've wasted fiddling with CSS layouts over the years. If Dart for web makes it we'll finally have an alternative. Thankfully there's now SwiftUI and Jetpack Compose for mobile.
- eecks 6y agoCSS sucks and I don't think I'll ever be convinced otherwise.. it's just a mess of tricks you have to remember. The people that do spend time memorizing the tricks turn around and say "hey! look! it's awesome" but that doesn't convince me.
- open-source-ux 6y agoModern CSS (e.g. flexbox and grid) is much less painful for layout, although the number and naming of properties makes it unpleasantly complex. Additionally, I'm still baffled why CSS gained transitions and animations as features. Now it's a jumbled mix of layout, styling, transitions and animation. Despite the recent improvements to CSS, I agree that it is quite horrible to work with.
- jvns 6y agohey, author here. I always find it weird to see HN posts where you have to pay to read what it says (what's the point?) so here are 6 sample pages from the zine if you're interested in seeing more of what's in it: * CSS isn't easy: https://wizardzines.com/comics/css-isnt-easy https://wizardzines.com/comics/css-isnt-easy * Inline vs block: https://wizardzines.com/comics/inline-vs-block/ https://wizardzines.com/comics/inline-vs-block/ * Specificity: https://wizardzines.com/comics/css-specificity/ https://wizardzines.com/comics/css-specificity/ * Centering: https://wizardzines.com/comics/css-centering/ https://wizardzines.com/comics/css-centering/ * Hiding elements: https://wizardzines.com/comics/css-hiding/ https://wizardzines.com/comics/css-hiding/ * The box model: https://wizardzines.com/comics/box-model/ https://wizardzines.com/comics/box-model/ I also put together a site with a few examples of CSS behaviour I find surprising here: https://css-examples.wizardzines.com/ https://css-examples.wizardzines.com/
- thadjo 6y agoLove this! This is going to help so many people. Thank you!
- ant6n 6y agoGreat content!
- nateweiss 6y agoHi, bought the zine, it's great. PS Separately, if you ever felt like it, it would be lovely to have a poster (or similar short thing in your style) about CSS Selectors specifically, to give to our customers. (To use our stuff, it's good to know about selectors but don't need to know about styling/positioning and such.)
- ENOTTY 6y agoWhile I haven’t read this one just yet, I’ve found all of the author’s previous zines incredibly useful. They’re densely packed with information, presented in a way that makes them great quick reference material. My only wish is that someone could print and bind them into a book.
- jvns 6y agoin case you haven't seen it: No Starch Press published a box set of all my free zines called "Your Linux Toolbox". I have some links to places you can get that here: https://jvns.ca/blog/2019/10/21/print-collection-of-my-first-7-zines/ https://jvns.ca/blog/2019/10/21/print-collection-of-my-first...
- ENOTTY 6y agoWow, I was just on No Starch's site for their Thanksgiving sale. How did I miss this? Thanks!
- codethief 6y agoI have a love-hate relationship with CSS. It's now been 18 years since I learned it and I still regularly get bitten by - browser incompatibilities (Last bug I fought: top/left/right/bottom behave differently in Chrome vs. Firefox when `position: sticky`. Fantastic.) - messy refactorings: Sure, CSS3 variables are nice but you can still tell that they were bolted onto the language. Moreover, elements and their rules can interact in lots of ways and CSS code (especially code by other people haha) often doesn't make these interactions immediately clear. Besides, everything is global state and IDs and classes are the only way modularize CSS code. - the fact that it's impossible to use HTML only for semantics and do all the layouting in CSS. (Wrapper divs, I'm looking at you!) - weird precedence of CSS rules / specificity (https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) - missing type separation and missing type checks. All CSS properties live in the same namespace and may or may not interact with one another. For instance, top/left/bottom/right, margin etc. behave completely differently depending on what you set `position` and `display` to. Things are getting better with web components now but I'm still not sure I'll ever be entirely happy with CSS.