7 ms·
Learn CSS layout the pedantic way (2015)
- leeoniya 3y agowritten before css grid and css columns? another z-index one: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ https://philipwalton.com/articles/what-no-one-told-you-about...
- Pathogen-David 3y agoYeah, according to https://book.mixu.net/ https://book.mixu.net/ this was written in 2015, at nine years old I'd be worried about this not being super useful for modern CSS.
- avianlyric 3y agoThe core of CSS, and principles that new CSS features follow, haven’t really changed in decades. It’s just been built upon and refined. Given these articles are looking an underlying principles of the CSS layout process, I wouldn’t worry about it being out of date. Everything it covers certainly hasn’t changed (because so many websites would be very broken if they had), and new CSS will be built on the fundamental principles laid out here. So even if it doesn’t cover stuff like grid, it will definitely provided much need background information to help you understand the details of how grid works, generally build a better intuition around how both old and new CSS features work.
- rchaud 3y agoThe core of CSS absolutely has changed. Unless you're building a mobile-only site, you're likely using media queries today to target multiple viewport sizes, which wasn't on anybody's radar in 2006. Much of these changes in CSS have simply beeen obscured by improvements in cross-browser compatibility and use of layout frameworks that hide all the complexity behind simple class names. In the 2000s, sites were built with the <table> element to simulate a grid. In the 2010s, it changed twice, first by using floats and CSS reset methods to create responsive columns. Then that went away in favour of Flexbox and Grid, which now have wide browser support. If you're building sites for IE6 compatibility, then things probably haven't changed much.
- filleduchaos 3y ago> The core of CSS absolutely has changed. Unless you're building a mobile-only site, you're likely using media queries today to target multiple viewport sizes, which wasn't on anybody's radar in 2006. These two sentences don't really follow from each other? Gaining additional features isn't necessarily the same thing as the core of a technology changing. The actual core of CSS would be things like its box model, stacking contexts, specificity, etc. And ironically you can in fact achieve responsiveness without using media queries. That's arguably the entire point of more sophisticated layout algorithms like flexbox and grid.
- nicoburns 3y ago> And ironically you can in fact achieve responsiveness without using media queries. That's arguably the entire point of more sophisticated layout algorithms like flexbox and grid. Flexbox and Grid? They're certainly helpful, but not required! I remember trying to achieve a responsive layout in IE6 that IIRC only had limited support for min-width/max-width. It was possibly even back then, although I can't remember how it was done off the top of my head.
- filleduchaos 3y agoDefinitely! When I say it's the point of flexbox and grid, I mean that they remove the need for the dev to do the manual width and bounds calculations (much like being able to just say how items should be aligned in both axes removes the need to do margin or positioning shenanigans). But it was all very possible with basic flow layout
- nailer 3y agoI worry that focusing on old layout techniques and hacks to get them to work, will propagate old layout techniques and hacks to get them to work.
- lesser_value 3y agoWhat is the best way to learn css in depth? The official documentation is a little wierd about what is actual and what is not.
- Our_Benefactors 3y agoLearn flexbox. Learn the box model (especially when to use margin vs padding). Learn how style cascading works (and why we use SCSS and component development to mostly avoid thinking about it). Learn media queries and how to target different screen sizes. Most of all, don't ever feel badly about doing a web search “how to do x in css”, the spec is huge with tons to remember and you won’t memorize everything without using it regularly for an extended period of time.
- uallo 3y agoWhat do you mean by "official documentation"? The specification [1]? MDN [2]? [1] https://drafts.csswg.org/ https://drafts.csswg.org/ [2] https://developer.mozilla.org/en-US/docs/Web/CSS https://developer.mozilla.org/en-US/docs/Web/CSS The former is not meant as a learning resource for new web devs. And the latter (which is neither official nor authoritative) usually has information about the "baseline" support and browser compatibility tables.
- lesser_value 3y agoThe former, I'm not really new just looking to increase my understanding of some concepts and learning from that has not been too fun. I don't think MDN goes in depth as much as I'd like it to.
- farleykr 3y agoI've found the best way is to build things over and over again. That may reflect a certain learning style but actually manipulating styles and layouts really helps hammer home the practical aspects of how it works. I also approach writing CSS with the goal of writing as little as possible. Not because I don't like it - I tend to think it gets an unfairly bad rap - but because it teaches you how to more effectively style layouts without layering too many declarations.
- quidgybozo 3y agoTotally aside, but the article reminded me. Does anyone remember when Firefox showed you the stacking context of elements on a web page? It had an exploded 3d view of all layers on a web page. Not sure if any extensions or browsers still have that feature?
- Vinnl 3y agoI believe Edge has something like that now, though from what I've heard it works slightly differently.
- argulane 3y agoYeah they removed it sometime ago https://firefox-source-docs.mozilla.org/devtools-user/3d_view/index.html https://firefox-source-docs.mozilla.org/devtools-user/3d_vie...
- rchaud 3y agoThis is cool! I understand why they removed it, but is there a browser extension that retains this functionality on modern versions of FF?
- MyFirstSass 3y agoChrome and Safari has the Layers panel in devtools that is actually a 3d model you can rotate but it's very simple compared. But yeah i also remember that feature fondly and if anyone has a better tool i'd be very interested! Super weird it isn't more used, but then again it's weird there isn't more 3d / 2d diagramming being standard in programming.
- arcbyte 3y ago> This is a set of chapters about CSS layout for people who already know CSS. Which seems like a small market, I admit. This was like a gut punch. Is this why software is so terrible? So many people just graduated bootcamps and never learned anything else? How can you do web development or even React if you don't understand CSS?
- codethief 3y ago> How can you do web development or even React if you don't understand CSS? I wrote my first line of CSS more than 20 years ago, have dug my way through CSS specs and browser quirks a countless number of times, write a ton of CSS in my day job, and even I wouldn't claim to really understand CSS. There are just too many hidden rules, too many edge cases, to really ever be certain you have now understood everything there is to understand. EDIT: I mean, consider this guy's recent blog post[0] for instance. He claims that CSS is logical and, presumably, that he understands that logic. Yet his article contains a number of factual errors, as mentioned in the HN comments. Nevertheless, he writes about CSS on a regular basis, so I'm sure he understands a great deal about it. In other words: In the world of CSS, even experts and experienced veterans are prone to not understand everything in detail. [0]: https://news.ycombinator.com/item?id=39334685 https://news.ycombinator.com/item?id=39334685
- ramesh31 3y ago>I wrote my first line of CSS more than 20 years ago, have dug my way through CSS specs and browser quirks a countless number of times, write a ton of CSS in my day job, and even I wouldn't claim to really understand CSS. There are just too many hidden rules, too many edge cases, to really ever be certain you have now understood everything there is to understand. Complete ditto. Been using it daily for a decade plus, and I could literally lay out a page perfectly while blindfolded at this point. But I would never claim to be a CSS "expert". Simply too many gotchas.
- dylan604 3y ago> he writes about CSS on a regular basis, so I'm sure he understands a great deal about it. Don't be so sure. The world is full of people that excel at the fake it til you make it skill. As long as you say it loud and full of confidence, people will just tend to accept whatever you're saying. Anyone that comes along and challenges will just be dismissed as a hater or similar. In software dev, these types tend to migrate upwards into management
- cantSpellSober 3y ago> Floats can be used to position boxes to the left and right edges of their container box No, that's not exactly what float means! Yes you can accomplish this using floats, but we haven't since flexbox and grid landed. The element is taken out of the normal flow, and this is a confusing way to build layouts for those studying CSS. `float` is more of a typographic tool. If this article calls itself pedantic, it needs more pedantry.
- danielvaughn 3y agoAny introduction to HTML/CSS really should explain the fact that when these technologies were created, they were solely meant to render documents online. It was basically created to be like a Microsoft Word but for files on another person's computer. So most of the early properties (like float) were for typographic layout.
- yojo 3y agoIt is, after all, HyperText Markup Language. The modern app-based web is incredibly far out of scope of the initial vision of “text documents that link to other text documents.” CSS and HTML are loaded with legacy warts that can never be removed without breaking backward compatibility.
- tdudhhu 3y agoFloat is still relevant. For example if you have some text that must flow around an image that is placed in a corner.
- blowski 3y agoI think the parent comment agrees with you. It’s the use of float to, for example, position menus on the page which is no longer relevant.
- treflop 3y agoOld HTML/CSS might be out of scope for a modern web app but I’m pretty sure if you were to write a layout engine from scratch today, it wouldn’t look any different from modern HTML/CSS Honestly layouting an app in code just looks like HTML/CSS but with functions.
- sesm 3y agoThe first thing that should be explained about CSS layout, is that it has 4 different layout systems: - table, the oldest one, still used for email - float, for articles with inline images - flexbox, most used one today - grid, modern alternative to table There is also absolute and fixed positioning as a hack to bypass layout.
- deleted 3y ago[deleted]
- nailer 3y agogrid is also a sensible default. Unless you actually want flexing, there is no reason to use flexbox and its more complicated syntax.
- dkdbejwi383 3y agoPersonally I find grid more complex - but perhaps I just haven't used it as much compared with flexbox. The vast majority of the time, I find that elements within a particular component (here meaning chunk of UI, not a React/Vue/Svelte etc module) naturally fit along a single axis.
- nailer 3y agoThere’s nothing requiring you to have multiple rows or columns in your grids.
- filleduchaos 3y agoTable is not the oldest CSS layout system. That would be flow layout, which oddly enough doesn't appear in this list at all.
- mananaysiempre 3y ago> CSS layout [...] has 4 different layout systems: table, the oldest one, still used for email [...]. Nooot exactly? Literal HTML table markup is indeed probably the oldest way of laying parts of webpages side by side and is still used for email, but that has little to do with CSS. In CSS, you have display: table and related values, but IIRC they were less usable on old IE versions than floats and received fairly limited use; certainly not nearly as much as literal non-semantic tables. I haven’t noticed them receive much use on the modern Web, either, and I don’t really know why—perhaps the requirements on the surrounding markup are too stringent (there’s no way to reorder things, for example, and if you need multiple rows you’ll need to include some sort of elements in your HTML to play that role).
- shubhamjain 3y agoI find articles like this daunting, even when it predates CSS Grid which has made CSS Layouting even more complex. I have been a web developer for 10 years, and I still feel out of depth about CSS. How it all works, obscure edge cases, internals, and the sheer number of features in there. I wrote about it recently [1] > I hadn’t even completely caught up with the intricacies of Grid Layouting, when subgrid and container queries were shipped. Several of the newly added properties handle cases so specific that I hardly believe I would ever use them (hanging-punctuation and font-palette, for example). > Here’s more: there are at least three properties related to hyphenating paragraphs. You might have used the filter property, but did you know that it supports an entirely different class of filters using SVG? Or that you can tweak the image scaling algorithm? Or border-radius support elliptical corners? Of course, you can say that about any technology, but CSS is different. It handles too many things, in too many ways, and changes too much, too fast. [1]: https://shubhamjain.co/2024/02/19/css-impossible-thats-okay/ https://shubhamjain.co/2024/02/19/css-impossible-thats-okay/
- paulddraper 3y agoCould be worse. Could be LaTeX.
- moi2388 3y agoSame. I just start using grids everywhere and that works. But then again I just write plain css and generally don’t have global stylesheets, which helps a lot
- philsnow 3y agoMy perennial problem with frontend work is that all the articles are written for an audience of people who have been keeping up with the state of the art for the last 15 years. The first time I wrote actual frontend things in exchange for USD, I was generating "DHTML" (my fingers stumbled over even typing the abbreviation because it's flushed so far out of my muscle memory cache) directly from perl. I know frontend stuff like a six year old knows calculus, and I feel like there's no way for me to catch up now.
- 3y ago
- nailer 3y ago> Chapter 3: > margin collapsing > negative margins This article prioritises understanding older layout techniques which has some value when dealing with a legacy code base, but should be avoided on new projects
- brycewray 3y ago(2015)
- jonahx 3y ago(not affiliated, just a happy user) It's paid, but if you want to deeply learn CSS interactively, I can't recommend this course enough: https://css-for-js.dev/ https://css-for-js.dev/ Not just the best CSS resource I've encountered, but one of the best examples of interactive pedagogy period I've encountered. The author also has lots of free resources if you want to get a flavor of the style: https://www.joshwcomeau.com/tutorials/css/ https://www.joshwcomeau.com/tutorials/css/
- shmde 3y agoWish it went on sale more often
- deleted 3y ago[deleted]
- msoad 3y agoKind of unrelated but if you want to build nice modern layouts and if you are one the 10 people in the planet that doesn't use Tailwind take a look at sub grids. It's really underrated given how well supported and nice to work with it is. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...
- deleted 3y ago[deleted]
- Julesman 3y agoTo me, CSS frameworks break the whole point of CSS, generally add a lot of bloat, and aren't useful except in some instances where rapid prototyping is needed. Tailwind exists largely because programmers don't like CSS. We no longer need frameworks for compatibility. The era of browser testing is over. And we don't need them to do things CSS can't do, as in the past couple of years nearly all browsers are handling the newer features. My big gripe is simply that it makes a lot of sense to keep your structure, styles, and scripts separated. If something looks off I don't want to have to wonder whether it's classes, CSS, or scripts. And ultimately, I don't think Tailwind does make things faster. I could come up with custom CSS helper classes AS NEEDED, and avoid all the problems I mentioned above. And the one I didn't mention is that this makes your code look like incomprehensible garbage. Tailwind HTML files using BEM are just not OK. Keeping my html and CSS separate make everything I do faster and lighter. Most importantly, CSS is now mature and finally does all the things for all the browser that make the frameworks just enough less useful that they become bloat. My two cents. I'm sure Tailwind is helpful for many. But I gotta preach the basics.
- MrJohz 3y agoA lot of people seem to approach Tailwind as a set of helper classes, but I think this is a misunderstanding of what Tailwind is doing. It's clearer to think about Tailwind as a DSL for writing CSS directly in your templates. If that sounds like a thing you don't want to do in the first place, then Tailwind probably won't add anything useful for you, but for a lot of developers, it's a very convenient way of encapsulating style, structure (and potentially behaviour) in a single unit. You can then compose these units together to create larger systems. Like I say, that's not the only way to develop for the web, you can also take the approach of separating out style, structure, and behaviour, and there you're not really going to see much benefit from Tailwind directly. Specifically, I think a lot of the success of Tailwind comes from the fact that it's very agnostic about how you build your units. A lot of tools for CSS encapsulation have typically either been bound to a single framework, or at least very bound to the Javascript ecosystem. For example, CSS Modules do in many way a very similar thing to Tailwind, but they're heavily connected to the JS concept of importing and bundling - they can't easily be used in Python, for example. On the other hand, Tailwind is just text - if the Tailwind compiler finds a file where you're using its DSL, it can build the correct CSS files from that, regardless of how the file has been written. This allows you to use Tailwind from HTML, JS, but also from arbitrary custom templating formats, or even other programming languages. I don't think Tailwind has so much to do with "basics vs helper methods". To do a lot of useful things in Tailwind, you need to know CSS in the first place, and it really is just a DSL around arbitrary CSS declarations (although the more complex those declarations become, the less pleasant Tailwind becomes to use - it is by no means perfect, or even my favourite tool for encapsulated CSS). It's more a question of how you want to write your CSS: do you want to write it coupled to HTML in components, or so you want to write it decoupled as a whole-page stylesheet?
- temporallobe 3y agoI develop a lot UI apps (mostly Angular) and these days I just use a framework like Bootstrap or Foundation. The myriad of layout options in pure CSS is overwhelming and mind boggling, especially when it comes to responsive design. I have tried using pure CSS but find myself writing lots of boilerplate code and coming up with amounts to a mini framework. Unless you’re designing a custom bespoke designer web site, I don’t personally see the need for constantly reinventing the wheel.
- rzmmm 3y agoNewer CSS features like flexbox, grid and media queries were added to reduce the need for frameworks like bootstrap.
- chiefalchemist 3y agoYes and no. The key selling point of Bootstrap (and similar) was that a design-blind (so to speak) backend dev/eng could use it and would have to work very hard to "design" something that was ugly, hard to look at, hard to use, etc. Sure there are a bunch of helper classes, and such, but the key is an end product that does look like a backend dev/eng built it.
- temporallobe 3y agoFrameworks still do a lot of the grunt work for the responsive breakpoints.
- chrysoprace 3y agoThere's still some boilerplate, but I'm a big fan of Open Props[0] because it takes a hybrid approach. CSS isn't necessarily reinventing the wheel, but allowing for easier / more powerful approaches to difficult layouts or things that would otherwise require JS. Bootstrap is fine but troubleshooting advanced layout issues involves a lot of inspecting elements to see what styles are actually being applied (at least in my experience, YMMV) so I'd personally always bet on CSS. A new feature that I'm excited about is the `@scope` rule which is going to make scoped styles a lot easier. [0] https://open-props.style/ https://open-props.style/ [1] https://developer.mozilla.org/en-US/docs/Web/CSS/@scope https://developer.mozilla.org/en-US/docs/Web/CSS/@scope
- deleted 3y ago[deleted]
- nayuki 3y agoThere's an HTTPS version of this URL; please change it.
- chrisweekly 3y agoObligatory recommendation to absorb everything in https://every-layout.dev https://every-layout.dev for grounding in first principles.