The Web's Grain (2015) | Hacker News Reader

The Web's Grain (2015)

frankchimero.com

26 pointsMrVandemar6 comments

I'm very poor with CSS, nowhere near good enough to call myself "full-stack," but the work I've done is enough to convince me that merely centering anything goes against the grain of the web.

If the premise of this article is that there is a graceful way to make things look good that doesn't required fighting against the grain of HTML and CSS, I'd like to hear what professional front-end developers think of that.

It depends.

Modern CSS (specifically, box) combined with a well thought-out document structure can sometimes be extremely simple and work perfectly. It can be very satisfying.

But complexity, mistakes, and requirements always quickly add up in a way that turns CSS into a complete nightmare.

I like (and mostly agree with) the concept of "edgelessness" that the article discusses but that physical fact of the matter is that right now, your HTML/CSS will be viewed on a physical device of finite proportions. We call it a "Page" for a good reason.

I think the reason center is so hard for people is that you have to first understand "what" you are centering.

> Text, inline box, block box, image/object, etc...

Then, what do you want to center it in relation to?

> Parent box, page, column, div, heading, another object, etc...

If you can distill down your requirements, you find there are very few ways to center what you want.

> Text = text-align:center;

That is the most simple example, and it will center a lot of things. But I think most people when they talk about centering, they really mean "I want to take a container and center an object inside of it." But without understanding the foundation of what your container is and how it's styled, centering it can "appear" difficult. (this doesn't even address vertical centering conflicts with misconceptions that you have no control over the size of the screen you are centering on, so what happens when your content is taller/wider than the screen?)

How to make this understandable? Learn to center with very, very few variables. Then you only have a few ways to make it hard. (flex, grid, text/inline, auto margins, transform... maybe I forgot one)

[0] https://css-tricks.com/centering-css-complete-guide/

[1] https://css-tricks.com/centering-in-css/

[2] https://css-tricks.com/snippets/css/centering-a-website/

[3] https://css-tricks.com/centering-the-newest-coolest-way-vs-t...

See, my instinct when working with any other technology would be that if it's that complicated, then I'm not using it right, or I'm not using it for the right thing.

There should be a basic simple form of "Center this thing" and the user shouldn't have to care whether it's an image, a header, text, or buttons.

Obviously there are edge cases and complex behavior needs to be handled as well. But there should also be sane defaults and the computer should figure everything out automatically. The default behavior for an image that is larger than the screen should be to automatically scale it down while maintaining the aspect ratio.

CSS just does not have that level of usability right now. Flexbox is a huge step in the right direction but it's still not enough.

This is a fun article. I wonder what this concept of edgelessness ‘looks like’ when applied to other disciplines like code - it almost makes me want to redesign my portfolio site for the nteenth time.

Reply on news.ycombinator.com