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

121–130 of 187 posts

Re: Relearn CSS layout

#121

Post by vlz »

danShumway wrote: post #89
sktrdie wrote: post #73

To me an evident thing in UI development is that separating stylesheet from layout isn't really a thing anymore and the benefits of this separation aren't really that clear. Things like SwiftUI and React are showing that declarative UIs can be built by tying the style to the layout and allow for much better accessibility, tooling, overall thinking of how UIs work. So to me CSS feels a bit outdated since big companies…

I work as a web developer for an enterprise-level software company. Experimented a bit with CSS-in-JS, which is designed to get rid of this separation, and I found it to ultimately be harder to maintain than SCSS. This process was also what got me hooked on BEM after being initially pretty skeptical about whether it had any real value. I now believe that BEM would meet the needs of most teams, with the exception of a…

BEM seems to be "Block Element Modifier"[1] if anybody wonders.

[1]: http://getbem.com/introduction/

Re: Relearn CSS layout

#122

Post by emp_ »

frosted-flakes wrote: post #117
mmorris wrote: post #102

Earlier quoted context omitted.

I've never loved CSS-in-JS, but I do love CSS modules, which allows you to use proper CSS, while solving the biggest flaw in CSS - its global nature. We import shared styles for typography, color, and some layout basics, but each component gets its own CSS file. Used to be a hardcore Sass lover, and CSS modules took a small amount of getting used to, but worth it in the long run.

Do you use Sass with CSS Modules? I've found it to be an excellent pairing. I put shared styles/variables (like colours) in top-level Sass partials that individual component styles can import if they need them. The only part I dislike about CSS Modules is having to use camelCased class names, or string references (styles['class-name']), which always feel awkward. I prefer kebab-case for CSS because it's a lot more fl…

Agree with this smaller pain point in the vast peace of mind that CSS Modules bring.

I try to simplify as much as possible to a single word and repeat them a lot since there’s no collision, so you can usually expect a .container, .items, .item in most components, all top level but SASS helping with other annoyances like pseudo selectors, parents and nesting where it makes sense.

Re: Relearn CSS layout

#123

Post by _pgon »

meerita wrote: post #82
ry_ry wrote: post #72

Earlier quoted context omitted.

CSS has been a bit of a mess for ages. It never scaled terribly well in its original state, and with every iteration became more bloated, so we came up with methods of controlling the sprawl; but imo glut of Modern CSS Implementations and their many and varied permutations not only feel like they are not only fighting against the original concepts, but also against each other. Which isn't to say they're bad or anythi…

I've researched all the major newspapers code. From 1996 to 2019 and all of them grew exponentially in size and complexity. It is how you state it: the arquitectures force developers to do bad code. Unmantainable (most devs change jobs, go and read 9k rules) and websites morph over the years carrying lots of legacy code because it takes too much time to fix everything. That's why functional is superior to everything.…

Yes, functional CSS goes against current best practices, so people write it off without giving it a try. It's a shame as I think it's the best way of doing CSS at this point. For web apps at least.

Re: Relearn CSS layout

#124

Post by rimliu »

danbruc wrote: post #56
victor106 wrote: post #45

What’s the best resource (book, videos etc.,) to learn css these days?

It's probably not for everyone but I just read the specification [1] last week. It is probably also worth noting that I did this to get a better understanding of some details and not for initially learning CSS. But those are mostly easy to read specifications and I think one could use them to initially learn CSS. CSS level 1 is pretty short but will still teach you a big chunk of the fundamentals of current CSS even…

I commend you. I am with Kyle Simpson (of the You Don't Know JavaScript fame) here—too often people don't even try to learn about the stuff they are using and are surprised by the behaviour which is clearly stated in the specification. This is true for JavaScript, but this is especially true for CSS. I think it is one of the least respected technology, devs don't spend much time and effort in learning it and then complain about it being a mess and not making sense. So if anyone is tired at throwing stuff at the wall and seeing what sticks just go and read the specs. It's much easier now than back in the days of IE5/6, no grid and no flexbox.

Re: Relearn CSS layout

#125

Post by rimliu »

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…

IIRC the standard pixel was always divorced from the real pixel. Or at least for a very long time.

Re: Relearn CSS layout

#126

Post by otabdeveloper4 »

sktrdie wrote: post #73

To me an evident thing in UI development is that separating stylesheet from layout isn't really a thing anymore and the benefits of this separation aren't really that clear. Things like SwiftUI and React are showing that declarative UIs can be built by tying the style to the layout and allow for much better accessibility, tooling, overall thinking of how UIs work. So to me CSS feels a bit outdated since big companies…

HTML isn't about UI. Never has been and never will.

The pain will continue until people understand.

Re: Relearn CSS layout

#127

Post by deanclatworthy »

Having been doing full-stack for over 15 years now, I have never seen the owl selector before. It's almost a perfect solution to a problem I regularly have.

A quick google didn't reveal any browser support for it though. Anyone got a resource for that? I can see that the adjacent selector is supported on 98% of global browsers, but I would not be surprised if there were some issues combining it with * +

Re: Relearn CSS layout

#128

Post by sk0g »

BurningFrog wrote: post #105
meerita wrote: post #94

Earlier quoted context omitted.

Show us a pastebin of your compiled CSS. I can tell you from now your CSS is bloated with the uncountable properties and classes that repeat the same fixes and structures. You can program functional CSS and get better in way.

But does bloated CSS matter? If a human isn't going to read the CSS and the computer handles it without performance problem, I say no. Those are of course two quite important ifs!

Does download size matter? Why bother with compression or minification?

https://jakearchibald.com/2019/f1-perf/

Re: Relearn CSS layout

#129

Post by bryanrasmussen »

danShumway wrote: post #89
sktrdie wrote: post #73

To me an evident thing in UI development is that separating stylesheet from layout isn't really a thing anymore and the benefits of this separation aren't really that clear. Things like SwiftUI and React are showing that declarative UIs can be built by tying the style to the layout and allow for much better accessibility, tooling, overall thinking of how UIs work. So to me CSS feels a bit outdated since big companies…

I work as a web developer for an enterprise-level software company. Experimented a bit with CSS-in-JS, which is designed to get rid of this separation, and I found it to ultimately be harder to maintain than SCSS. This process was also what got me hooked on BEM after being initially pretty skeptical about whether it had any real value. I now believe that BEM would meet the needs of most teams, with the exception of a…

I have two problems with BEM -

1. naming rules almost always lead to verbose inelegant names that humans would not really use at some point. (I said almost to ward off a war)

2. The part of CSS that I am generally better at than most developers is specifically in understanding the cascade. BEM, in order to help the people who are not good at the part that I am good at, pretty much makes it impossible to use what I am good at. I feel like I'm being Harrison Bergeroned every time I use BEM. But also the names I have to give things rankle.

Re: Relearn CSS layout

#130

Post by dmitriid »

wwweston wrote: post #119
untog wrote: post #97

Earlier quoted context omitted.

I don't think CSS is outdated, it was just never that suited for the purpose people are using it for. It still remains a fantastic way to style a document . The cascading nature of CSS works great in that context. But styling UI components is something quite different.

I'll bite: what's different about styling a UI? UIs are presumably more consistent/less varying than documents, so special cases and cascade overlaps should be less of a thing?

You accidentally apply a global style, and your entire UI is broken.

You need a different styling inside a specific visual component? You need to fight specificity and override a parent ir a grandparent or a global style.

In most UI systems this is not a concern.

Post reply on HN