Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Relearn CSS layout

every-layout.dev

Post reply on HN
Print view View original

31–40 of 187 posts

Re: Relearn CSS layout

#31

Post by jrochkind1 »

codedokode wrote: post #14
mixmastamyk wrote: post #9

Earlier quoted context omitted.

Win7 and IE9 are both EOL in six months. Makes sense to drop in new articles.

HTML/CSS was designed to be forward/backward compatible and not to be written only for version of Safari installed on dev's macbook. This is against the spirit of HTML.

If I understand right, you are suggesting it is "against the spirit of HTML" to write CSS that isn't backwards compatible... infinitely? You have to draw the line somewhere, right? An ancient enough browser won't support CSS at all. Using only CSS that would be supported by a, say, year 2005 browser would also be pretty limiting.

You can choose to do that if you want, but I think your opinion about the "spirit" is a minority one.

Re: Relearn CSS layout

#32

Post by codedokode »

extrapickles wrote: post #28
codedokode wrote: post #21

Earlier quoted context omitted.

A website that is maintained in a long term will be worked on by many people, and CSS will become quite large and complicated. So using the simple constructs like pixel units is better than using rems that create implicit dependence on main font size. This way there are less chances to break something in one place when editing code in other place. The same is about CSS variables. An example with one variable might lo…

If you code everything in pixels, your site only will look good on your particular screen. This has become so much of a problem that browsers now use a ‘standard’ pixel that is divorced from an actual pixel. I also find sites that do everything in rem/em more assessable as the padding also scales if they have a increased font size due to low vision. Also, hardcoding things instead of using variables makes things hard…

> I also find sites that do everything in rem/em more assessable as the padding also scales if they have a increased font size due to low vision.

If you use Ctrl +/Ctrl - for zoom, then everything scales proportionally regardless of whether you use pixels or rems. You are trying to solve the problem that has been already solved by Opera, and later by other browsers more than 10 years ago.

> Also, hardcoding things instead of using variables makes things harder to maintain.

In my experience, it is the opposite: simple code without implicit dependencies is better. Because the typical task would be to change one part of the page without affecting other parts. With a simple code, I would use DevTools to change the CSS rules and then I would move the changes manually into CSS file. But if the site uses some complicated framework with variables and rems, I will have to spend time learning it, see where is a variable defined, what can be affected if I change it, etc. It just takes more time and nobody of the devs will want to learn your custom-made CSS framework.

Re: Relearn CSS layout

#33

Post by Theodores »

There is more than way to do all of these layouts. I don't have time to learn all of them, I just want my content to look great on all devices. I also want to stick to the specifications of HTML as it applies to all the browsers that do HTML5 - so no Internet Explorer. Sticking to the specs means no hacks and the likelihood that someone can make sense of my code in ten years time and not think 'why did they do this?'.

For this reason I will be sticking with CSS Grid. CSS Grid is supported in all HTML5 browsers, so that means everything except the depreciated Internet Explorer.

To get my CSS Grid versions to work I will also be using CSS Variables defined in media queries to make things responsive. I don't need to have lots of fixed breakpoints as I use fonts that scale in such a way that lines don't get too long to read on really big screens.

For the CSS variables I have fallbacks which are the desktop defaults. So although 'mobile first' I can get a deluxe mobile experience but code for desktop in the first instance.

With pseudo classes I can add icons, usually Unicode symbols or SVG, SVG defined in CSS variables.

Since I can do this with CSS Grid and only have Internet Explorer be 'of concern', I can write HTML5 with no superfluous markup. That means no div, span or even class attributes. I have got out of the mindset of using container wrappers for content and just putting neat content where it needs to go using CSS Grid.

You could look at my HTML and think I had just swapped the div for article, aside and section. Or for figure. Or for main, header and footer. But that is not the case, I find that if I am using the right elements and pay attention to the structure of my content it just naturally styles itself with CSS Grid, no additional markup needed.

Also not needed are clever things with calc. If I find myself doing that then it is a sign that I have got it wrong and that there is a simpler solution I have overlooked. I also rarely use pixels. It is ems or viewer units all the way, again no need to think of what a pixel actually is.

I find that writing HTML and styling it without the hacks makes my code pretty alien compared to how the rest of the world is doing it. Anyone can make stuff complicated for reasons of backward compatibility, keeping it concise and simple is a different craft.

For the above reasons I am disappointed by these layout modules, a lot of work has gone into it but at times we need to question what we take for granted. Everything is a div. I look at the examples and see that if, e.g., the image is put in a figure and given a figcaption then the structure is there for it to effortlessly be given layout with CSS Grid, no container elements needed.

At some stage we need to stop looking at content as placeholder examples and stop using generic containers.

Re: Relearn CSS layout

#35

Post by extrapickles »

codedokode wrote: post #8
majewsky wrote: post #5

Earlier quoted context omitted.

Flexbox has been supported by all browsers for years now, even by IE11. What on earth do you need to support if you cannot use flexbox?

Caniuse says that IE11 has a lot of bugs regarding flexbox. Firefox supports flexbox only since 2013-2014. So it would make sense to add a simple non-responsive fallback for older browsers. Also, if I remember correctly, the default browser in Windows 7 is IE9. It makes sense to support default browser in the most popular desktop OS. Some of older browsers, released in 2012-2014 support flexbox only with vendor prefi…

If you need to still support IE 8&9, there are pollyfills that will add flexbox support to them. They aren't as quick as native, but they still work.

Re: Relearn CSS layout

#36

Post by gary__ »

have_faith wrote: post #24

The knowledge contained in the articles is very good but I got the feeling that it was written for an audience that already undertands the problems being solved. The Stack for instance is written in a language that only really makes sense if you've spent a lot of time with CSS and contains some extraneous paragraphs. I only mention this as the problems and solutions being explored are very valuable to learn but I thi…

Bear in mind the tutorial is prefixed "Relearn..."

Though I'd class myself as a "full stack developer" css for a long time was the 2nd class citizen, with most of my time spent on learning to use front end frameworks in their idiomatic way, the "it depends" peculiarities of SQL and RDBMSs and making inroads on the vast tomb that represents architectuliary sound back ends.

So an article focussed on improving my "it's only css but it works" knowledge is one of the best things I've seen on HN in quite some time :)

Re: Relearn CSS layout

#37

Post by ww520 »

codedokode wrote: post #12

The code examples are overengineered. For example, the code generator for stack uses rem units and CSS variables, while it could be written without them and have better cross browser support (and the code would be easier to read and maintain in long-term perspective). The author just wants to use modern CSS features without clear rationale for this. Rem units can cause issues in long term. For example, imagine if a s…

Rem is great. It allows uniform scaling of all UI elements under a parent along with them font size.

Re: Relearn CSS layout

#38

Post by extrapickles »

codedokode wrote: post #32
extrapickles wrote: post #28

Earlier quoted context omitted.

If you code everything in pixels, your site only will look good on your particular screen. This has become so much of a problem that browsers now use a ‘standard’ pixel that is divorced from an actual pixel. I also find sites that do everything in rem/em more assessable as the padding also scales if they have a increased font size due to low vision. Also, hardcoding things instead of using variables makes things hard…

> I also find sites that do everything in rem/em more assessable as the padding also scales if they have a increased font size due to low vision. If you use Ctrl +/Ctrl - for zoom, then everything scales proportionally regardless of whether you use pixels or rems. You are trying to solve the problem that has been already solved by Opera, and later by other browsers more than 10 years ago. > Also, hardcoding things in…

Using Zoom for reading is less ideal for long term use as it generally forces you to horizontally scroll, where as increasing font size reflows the page, so only vertical scrolling is needed.

Re: Relearn CSS layout

#39

Post by dmitriid »

sergiotapia wrote: post #34

> https://every-layout.dev/layouts/cluster/ >The Cluster layout is available in the full version of Every Layout, which is still in production. All of the currently available layouts are marked "read now" in the index page. where is production? I can't find it

It's still in production meaning: they are not available yet, they are being written.

Re: Relearn CSS layout

#40

Post by rhizome »

codedokode wrote: post #21
jffry wrote: post #16

Earlier quoted context omitted.

> There are cases when rem is useful and there are cases when it is not, but the author doesn't give a choice and doesn't explain it. and > I recommend using pixels for projects that are going to be maintained and developed in the long term. Directly after lambasting the author for failing to elaborate, perhaps you could go into more depth yourself?

A website that is maintained in a long term will be worked on by many people, and CSS will become quite large and complicated. So using the simple constructs like pixel units is better than using rems that create implicit dependence on main font size. This way there are less chances to break something in one place when editing code in other place. The same is about CSS variables. An example with one variable might lo…

>A website that is maintained in a long term will be worked on by many people, and CSS will become quite large and complicated

Non-sequitur. It could also become smaller and simpler.

Post reply on HN