91–100 of 109 posts
Earlier quoted context omitted.
No, because like I said, CSS later introduced other layout systems that weren’t based upon this.
I reccomend listening to the podcast that the thread is about, where Casey Muratori discusses the many failings of CSS as a layout specification language. https://twitter.com/sw_unscripted/status/1730707950518309109
I cannot look at a UI design and intuitively know what CSS attributes would generate that exact output. I think part of it for me is that I do not have an intuitive understanding of the box model and how layouts are calculated. On top of that, since CSS cascades, you have to be able to mentally keep track of all the parent attributes to understand how they affect a specific element on the page. I was working on a Rea…
> I ended up just playing around with putting attributes on various components until I found what worked. I think that's what everyone actually does when doing CSS.
For me, CSS is easy even though I rarely work with it professionally (I mostly work on backend and infrastructure these days). Yes, there are scenarios where I get stumped but a vast amount of literature and helpful community gets me to places I need to be, just like many other technologies.
I cannot look at a UI design and intuitively know what CSS attributes would generate that exact output. I think part of it for me is that I do not have an intuitive understanding of the box model and how layouts are calculated. On top of that, since CSS cascades, you have to be able to mentally keep track of all the parent attributes to understand how they affect a specific element on the page. I was working on a Rea…
Box model + flex box + the display modes + "positioning" (stacking contexts) are typically the most confusing parts of CSS, I feel. Add maybe margin and padding, and how they interact (margin collapse, no margin collapse in flex or grid context, box model again, auto values). But then, that's basically all the hard conceptual parts. But they are mostly intuitive and well-designed! I know I'm alone with this opinion.…
slightly OT but can someone recommend how to learn CSS in 2023 for a backend web developer, who 30ish years ago grokked mainframe Assembly reasonably well (and since then developed in c, php, python, ruby, bash, etc etc)? Can/do I start with tailwind? Do I start with old-school CSS or jump straight into flexbox? Do I need to care and learn about BEM, Sass, etc? Do I start with an empty page and build it? Do I need to…
slightly OT but can someone recommend how to learn CSS in 2023 for a backend web developer, who 30ish years ago grokked mainframe Assembly reasonably well (and since then developed in c, php, python, ruby, bash, etc etc)? Can/do I start with tailwind? Do I start with old-school CSS or jump straight into flexbox? Do I need to care and learn about BEM, Sass, etc? Do I start with an empty page and build it? Do I need to…
I would jump right into modern things like flexbox and the grid system as the old ways of floating are basically useless. I mean they still work, but I can't remember the last time I had to use a float to create new layout. Start with flex, as it's a bit more beginner friendly than grid is. I've been doing this for nearly 20 years now and I still struggle to wrap my head around grid sometimes.
You can ignore BEM until you've got the fundamentals sorted. BEM is just a clean standardized way to organize class/id names, it's nothing functional.
Sass helps streamline things a lot via nesting and variables to begin with. More advanced features can also be useful, but until you've got the fundamentals it may not be clear where those advanced features can be applied. And Sass requires substantial more initial setup than plain CSS (you'll need Webpack or gulp or something to turn the Sass into CSS). Not to mention that Sass's biggest draw is variables and nested styles, which CSS now supports natively (albeit with really weird syntaxes, imo). So I'd skip Sass for now.
And yes, you can jump into an existing page and tweak it. That's how I learned it initially. https://csszengarden.com is a good resource for that. It's the same basic HTML site with different CSS themes you can load. It's a good showcase of how powerful CSS is what you can do with it without touching the underlying HTML. Dev tools are very useful there as you can turn individual styles off, change their values, etc.
Lastly, I'd just start with a blank page and try to create a simple 2-column layout. Narrow left column with a basic navigation in it and a wide right column with a few paragraphs of text in it. Then build off of that -- add a header and a footer. See if you can get the header to "stick" while you scroll down the page, etc.
Too many people introduce unnecessary complexity, flinging on framework, after framework, when their time would be better served, learning CSS from first principles.
Advanced results require advanced skills. CSS is one of my favorite languages. And the only way I can consider CSS to be difficult is if you have no experience with HTML. If you try to do HTML by hand, then doing CSS by hand on top of HTML by hand is really easy and wonderful. And this is truly where you gain the fundamental framework for "getting CSS".
I have yet to find a frontender (and I have worked with 100s over the past 30 years) that can do any significant css without trying it out in a browser; if there is something off or needs to change on the frontend, very often the most experienced senior frontender can guess (and often a little bit right) what it is but to actually fix it they have to try a few times. To me (someone who likes logic) that is a sign it’…
I do think that CSS has enough footguns to say that arbitrary CSS is not very good; well-written CSS is a very small subset of CSS in general. It joins many other languages in that regard-- C, C++, Javascript, PHP, Bash, the list goes on and on. As in all of those languages and more, with some basic familiarity it's not hard to sling some fresh code together and have it do what you want. Making it scale maintainably is the hard part.
(For my 2 cents on the matter, the way to write Good CSS(tm) is using CSS modules to limit scope, using flexbox or grid for all layout, and being rigorous about creating stacking contexts when you need to modify z order. Application of these three rules has made my life as a senior frontend engineer generally quite easy.)
slightly OT but can someone recommend how to learn CSS in 2023 for a backend web developer, who 30ish years ago grokked mainframe Assembly reasonably well (and since then developed in c, php, python, ruby, bash, etc etc)? Can/do I start with tailwind? Do I start with old-school CSS or jump straight into flexbox? Do I need to care and learn about BEM, Sass, etc? Do I start with an empty page and build it? Do I need to…
https://web.dev/learn/css