9 ms·
You suck at CSS and that's okay (2022)
- froginspector 2y agoI am not convinced anyone is truly good at CSS unless its their only job
- CottonMcKnight 2y agoCSS is a language, but it is 0.1% syntax and 99.9% memorizing the standard library, which expands monthly.
- gnabgib 2y ago(2022) You've turned your/rriepe's substack series (https://news.ycombinator.com/from?site=yousuckatcss.substack.com https://news.ycombinator.com/from?site=yousuckatcss.substack...) into a book? Or actually maybe it's the other way around (based on rriepe's profile[0]) [0]: https://news.ycombinator.com/user?id=rriepe https://news.ycombinator.com/user?id=rriepe
- kyleyeats 2y agoEdited the year into the title. CASS (the CSS library) and YSAC (this book) have been a huge marketing mess, to be honest. And yeah the substack was part of it-- I think the book came first though. Kyle Yeats (rhymes with stylesheets) was going to be a Youtube persona but I could never really get the feel of it right. The book morphed into being more about project management. I think there's a lot of value in it still, in that respect, so I'm putting it all online for free.
- haburka 2y ago> The last big driver of time-wasting in CSS is the drive for pixel perfection I agree. Also users/product managers do not care. They will see UI that is a little bit “off” and think negatively about your brand. Congrats, now you have a ticket to make the UI look pixel perfect. I suppose the audience for this isn’t people who actually get paid to write CSS, but instead casual blog writers. It’s definitely ok and normal to have little blips on your side project.
- goatlover 2y agoIt's amazing how much the initial intent of the web has been perverted. Not all for the worse, but still.
- kyleyeats 2y agoThe perfection should be downstream of the project's coded standards, not downstream of the faithful implementation of the designer's work. Some designers are really good about maintaining standards-- but the book would argue all that effort should be spent elsewhere. It's basically "the arbitrary padding the designer liked in the moment" vs. "the standard padding that's everywhere in the project." This book argues you should always use the standard padding. Your product should be pixel-perfect, just not in the PSD-to-HTML sense.
- jamesfinlayson 2y ago> It's basically "the arbitrary padding the designer liked in the moment" vs. "the standard padding that's everywhere in the project." This book argues you should always use the standard padding. Your product should be pixel-perfect, just not in the PSD-to-HTML sense. Oh yeah - I remember my first job things had to be pixel perfect to what the boss had mocked up in Photoshop. Thankfully at my next job it was just use whatever the project's CSS gives you unless it looks terrible. I don't do much frontend any more but my current marketing team is happy with anything that looks reasonable.
- ozim 2y agoNot even pixel perfection but also coming up with UX ideas by people who don’t understand technical details. Like QA not passing some detail because they think it should be different. Where in reality it is what it is because of framework etc. Yes you mostly can do everything - but not everything is worth spending time/money on.
- jasonthorsness 2y agoOn the other hand, personal sites and side-projects are where you can afford to take as much time as you want in order to achieve pixel perfection without the pressure of shipping anything.
- boyter 2y agoI detest writing CSS and HTML. I just find it boring fiddly and annoying. I have started doing "vibe" coding with LLM's. Giving a decent prompt produces results that are... pretty good. Almost 100% in lighthouse for both mobile and desktop, responsive, reusable components, dark/light mode and a design that was better than I could do in the 2-3 hours I spent doing it (while sipping wine). I know its not a solution for everyone, and probably won't work for the prettier designs out there, but you can go a long way with these tools this day. I know there is a reluctance to not use LLM's for code tasks, and I am one of the largest critics, but for me this solves a real pain point. I don't want to write CSS/HTML anymore and these tools do a good enough job of it that I don't have to.
- kyleyeats 2y agoI agree. CASS (the library this book was promoting) is actually really great paired with LLMs. If I revisit this project, it'll be along the lines of using it with LLMs.
- colonCapitalDee 2y agoLLMs are great for building frontends for backend projects and backends for frontend projects
- boyter 2y agoFor CRUD I agree. A lot of what I am doing is a bit more complex then that. I actually would be happy to just "vibe" code my way through most of the problems I deal with if LLM's were able to do it. That said, they make a great intern or jnr developer you can hand tasks off. You have to review either way, but the LLM does it faster.
- tombert 2y agoI never got very good with CSS or HTML styling. I know enough to generally fix obvious stuff, but I'm kind of a luddite and still use Bootstrap for most of my stuff. I've mostly stopped doing web stuff, so the only time I touch CSS is when I'm doing an admin screen or something, so it doesn't have to look great. Still, a part of me wonders how different my life would be if I had taken to frontend programming enough to make things that look nice. It's not like there isn't anything enjoyable about it, I just ended up taking to backend distributed systems work a bit sooner.
- kyleyeats 2y agoThe predecessor to this project was a Bootstrap 3 theme: https://rriepe.github.io/1pxdeep/ https://rriepe.github.io/1pxdeep/ The book has a lot of content over what to make pretty and what not to make pretty. I think knowing what not to bother with is an underrated skill. A lot of what inspired me to write it was backenders handing off markup that they tried to make semi-passable. Unstyled HTML, please!
- hinkley 2y agoI did for a while when CSS3 was new. Big problem with evergreen standards: if you try to come back to a standard that is now twice as big but still has the same version number, there is nobody writing books to teach you what you missed out on. Want to come from CSS2 to 3? They got you. Want to do backend development for five years and then get a summary on what you missed? Go fuck yourself.
- DicIfTEx 2y agoFWIW you're not alone in thinking that: there's a W3C CSS4 Community Group[0] now, and you can find more detail on their proposal at https://github.com/w3c/csswg-drafts/issues/4770 https://github.com/w3c/csswg-drafts/issues/4770 and ongoing CSS[3|4|5|Next] categorisation work at https://css-levels.netlify.app/ https://css-levels.netlify.app/ [0]: https://www.w3.org/community/css4/ https://www.w3.org/community/css4/
- tombert 2y agoYeah, that's the thing. I'm not saying that this is a "bad" thing, but the last time I did any significant amount of frontend stuff was back in ~2014, and it was AngularJS, which was considered pretty ok at the time I think. I left that job and started doing almost exclusively backend stuff for several years, and when I looked back, the entire world had switched to React and transpiling JSX and a lot more CSS than I was familiar with. It seemed pretty intimidating to try and pick that up again, so I never really left the backend stuff, and now I've managed to even avoid web stuff for awhile, because I kind of hate web programming.
- ZYbCRq22HbJ2y7 2y agoTell that to a decent number of people I have worked with over the past 20 years. In fact, I know people to this day who have been writing CSS for decades who don't really know fundamental things like specificity, inheritance, or the cascade. Pattern matching into the sunset, not a single fundamental piece of CSS specifications ever internalized, still getting paid (its okay). https://www.w3.org/Style/CSS/specs.en.html https://www.w3.org/Style/CSS/specs.en.html You can read this and know most things about CSS. For a bit anyway. You'll forget things you don't use. You might remember them again one day.
- _benton 2y agoOne reason I think Tailwind became so popular is that it makes it much easier to pattern match CSS. I don't think it's a good or bad thing, it's just a thing.
- ZYbCRq22HbJ2y7 2y agoYeah, I am not saying its bad in all applications, just that people who use CSS these days rarely really know CSS (who can know it all?), which isn't really any different from the past on a general level. Yet, I think we should push our peers to view the entirety of CSS as meaningful and worthy of attention.
- _benton 2y agoI'm forcing myself to use raw CSS in my recent work just so I can gain a better understanding of it. It's nice what you can achieve without JS, but man sometimes it just feels like arranging arcane symbols until you achieve the desired result.
- bigbuppo 2y agoI tried to use a framework on a web project recently, but looking at the two most popular frameworks... one of the results in every site looking the same, while the other is a step backwards to the bad old days in the worst possible ways. It was simpler to start from scratch, and I finally understood the cascade. I was actually able to drop most of the explicit class attributes, which led to a significant reduction in page size. The primary purpose of frameworks was to work around the quirks in all the different web browsers out there, and to implement grid-like layouts before we had css grid, and to deal with the impossibility of centering a div natively. None of that is necessary these days, and hasn't been for a decade.
- kayodelycaon 2y agoThere’s a reason everything I’ve done in the last 5 years uses bootstrap. And doesn’t have to look like bootstrap. Our internal graphic designer loathes bootstrap and didn’t recognize I had used it until I told them.
- pupppet 2y agoThe worst part of CSS is trying to come up with the class names. .every-stupid-ass__naming-scheme-falls-short{}
- ZYbCRq22HbJ2y7 2y agoWhy? Just ask an LLM if your taxonomy skills are weak. They'll transfer eventually. Things like BEM give you the most flexibility for extension, things like atomic CSS (tailwind) give you the most velocity for not giving a fuck about ever touching the markup again.
- sampton 2y agoI recently started a green field project using copilot and tailwind. I’m blown away by how good ai is with css. I’m just glad no one has to try wrestle with css like we did back in the days.
- hn_throwaway_99 2y agoI wrote a similar comment yesterday, https://news.ycombinator.com/item?id=43316939 https://news.ycombinator.com/item?id=43316939. CSS styling used to take me forever, now I basically just tell AI the contours of what I want, and it gives me the vast majority of what I want. It often has some bugs, and I always need to edit/tweak it to get things right, but it probably saves me 90% of the time I used to waste on CSS (I'm primarily a backend dev).
- kyleyeats 2y agoIt's true. Between atomic CSS libraries and LLMs, there's almost no reason to write CSS nowadays.
- KingLancelot 2y ago[dead]
- sunami-ai 2y agoMy view is that those who designed CSS suck when it comes to designing intuitive systems. I would not advocate constraint solvers, in the future I hope ViTs are so cheap to run that they can infer the right layout of things at any orientation and size in single digit milliseconds, solving the layout problem for good =)
- robocat 2y ago[flagged]
- dang 2y agoPlease don't respond to a bad comment, or one you feel is bad, by breaking the site guidelines yourself. That only makes everything worse. https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html
- sunami-ai 2y ago[flagged]
- dang 2y agoPlease don't respond to a bad comment, or one you feel is bad, by breaking the site guidelines yourself. That only makes everything worse. https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html Edit: you've unfortunately been breaking the site guidelines so badly with this account that I think we have to ban it as well. See https://news.ycombinator.com/item?id=43350269 https://news.ycombinator.com/item?id=43350269.
- kindeyoowee 2y ago[dead]
- blululu 2y agoAgreed that there is no need to be a jerk on this discussion. The points you make are generally true in the abstract, but we are talking about CSS here which really is one of the most convoluted and confusing pieces of UI software out there. And the problems are not cruft from success and time: the core parts of the spec are terrible and confusing. The basic idea of a Cascade is a bad idea for a variety of reasons and nobody uses this feature if they can avoid it. The over all layout spec is really convoluted and requires you to figure out the difference between absolute and fixed position and top vs bottom. (Making a horizontal row of images is shockingly difficult). There is also a whole system of units for "absolute length" that are defined in relation to the inch (including the terribly named pixel which is 1/96th of an inch (inches being defined for printers but not for screens). These are issues were all features of the very first release. The later updates have provided alternatives, but the core spec sets people up to fail.
- skipps 2y agoThe CASS site on iOS WebKit has bullets overflowing into the border and a mix of fonts that doesn’t look great: https://casscss.github.io/cass/ https://casscss.github.io/cass/
- kyleyeats 2y agoThanks! Lists were the bane of my existence with this project. I could never make all the browsers happy. This is a #wontfix (sorry), but I might fork it into a new, LLM-oriented CSS project. Fonts and lists will be the first things I look at.
- bigbuppo 2y agoAnd the fix is another framework, because of course it's another framework. Frameworks are to CSS what greige paint is to a house. Trying to implement the missing 5% of a CSS framework without knowing how to implement "complex" CSS from the ground up means you are never implementing the missing 5%. Your site or app or whatever is just going to look like every other site that uses that framework. Now that CSS is more or less feature complete and the fact that there's just one web browser means you don't need the clever tricks rolled up in a framework to center a div or to have a grid layout that works without resorting to tables. It's literally part of the CSS spec and has been implemented in every browser for a decade now.
- kyleyeats 2y agoThe argument I make in the book is that the last 5% of CSS/design should be written by people who can write CSS. Nobody else should even be writing CSS because it turns into a huge mess when everyone jumps in. I mothballed this project because people were so incredibly cruel about it (a CSS project!). Remember that people who work on this stuff are people, and we're just trying to make things better. Also, you can pry .vertical-center from my cold, dead hands.
- bigbuppo 2y agoHow do you expect anyone to learn CSS if they're being told to not even think about writing CSS unless they already know CSS? The whole premise demotivates learning. Experts weren't always experts. They had to start somewhere. If the world were to follow your advice, CSS would soon become dead knowledge. I am absolutely perplexed that you could write something, an act of conveying knowledge, and that you wanted to convey "don't learn this". Do you not see how weird that is?
- kyleyeats 2y agoYep, it's weird and controversial. That's why I wrote a book explaining it and used a pseudonym. Now: ~60% of devs know some CSS, rest feel guilty YSAC's pitch: ~10% of devs know lots of CSS, rest avoid it without guilt (they suck and that's okay) I guess 0% would mean a dead CSS, so it's closer to dead, sure. If you get a more powerful saw, you can either cut down more trees or you can spend less time cutting down trees. CSS is a more powerful saw now. I'm suggesting spending less time cutting down trees instead of cutting down more trees.
- nativeit 2y agoHN Confessional: I wrote a custom theme for my server management software a few years ago that's basically just a rewrite of the stock theme's rather large CSS file. Among a little more than 1200 lines, I include `!important` 175 times. I imagine that causes hives among our more discerning front-end devs.
- nativeit 2y agoIt looks great, specifically for me. I can't comment on anyone else, but I have to imagine it's dysfunctional. I abstracted as many color and style options as possible to allow for a lot of variable-setting. I unreservedly apologize for the affront to common decency (but I'm probably still gonna use it). Gotta have that transparent glass effect on ma' netstats.
- firefoxd 2y agoHot take: you suck at CSS because you never bothered learning it. A long time ago, everyone in my team kept making excuses why they hate css. I went to Lynda.com and found a pretty good class. I can't remember the instructor, but it was so good that I still use the same patterns more than a decade later. I tried to get the whole team to take it, but no one wanted to. "It's a waste of time", "It's not even a programming language." They built all kinds of tooling around css, trying to avoid css. We had dormant css that no one could ever figure out if it was used, we had important and position absolute everywhere. Today, it's not so different. You see divs with 20 or 30 classes in them. Just learn css. Any class is better than no class.
- thiht 2y agoThere are a few basic skills that lots of developers stubbornly refuse to learn properly: - Regex - SQL (if you do some backend work) - CSS (if you do some frontend work) - Bash + basic CLI tools (vim, grep, find, sed, awk) - Git Really learning these makes your life sooo much easier.
- what 2y ago> you see divs with 20 or 30 classes in them Isn’t that exactly how you’re supposed to use tailwind?
- kazinator 2y agoJust try not to be better at CSS than the latest version of any major browser.
- deleted 2y ago[deleted]
- appleorchard46 2y agoI enjoy working with CSS immensely. It takes some thought to get things right from the beginning, but I find it's always clear what can be done to improve it. With modern features like CSS nesting, anyway; just a few years ago when IE support and whatnot was more relevant it was a different story. Now you can just throw everything into a flexbox.