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

141–150 of 187 posts

Re: Relearn CSS layout

#141

Post by meerita »

ry_ry wrote: post #131
_pgon wrote: post #123

Earlier quoted context omitted.

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.

Is a single purpose class still a class? Not in the conventional sense - In CSS' lexicon it's a group of things, right? I've got nothing against the approach - it solves a problem - but it's not how CSS was intended to be used. CSS modules, CSS components, BEM, heck even Sass and Less fall into the same area of trying to wrangle huge unsorted lists of loosely composed attributes into something meaningful. So if there…

Please, elaborate on the first statement. In CSS a class is a class, we're not tied to group things. Original CSS wasn't group purpose, mainly due the lack of properties, you could see more single or a couple of properties per class.

Re: Relearn CSS layout

#142

Post by Blaiz0r »

bryanrasmussen wrote: post #129
danShumway wrote: post #89

Earlier quoted context omitted.

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…

I'm not a fan of BEM, I think it neuters one of the strongest parts of CSS

Re: Relearn CSS layout

#143

Post by razvandh »

started reading some of the ideas and got put-off almost immediately. 'margin-top'? the owl-selector? Really? Why do we keep making our life more difficult than it should be? CSS is such a beautiful and interesting tool, yet we still decide to misuse it in trying to be too smart.

( margin-top: you start dealing with parents inheriting the margin - which is an old quirk of CSS - it's a side-effect you need to control, so the usage of margin-top should always be avoided and margin-bottom should be the preferred solution owl selector: performance implications - it's fairly bad from a performance POV to use it. Also, we live in a world where we have control over how the layout is generated, we should avoid using generic selectors Source: I've been doing frontend and focused on CSS for over 10 years )

Re: Relearn CSS layout

#145

Post by GlennS »

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 agree. While I'm in theory in favour of alternatives to CSS, my experience with css-in-jss using the React Material-UI framework has been pretty painful.

Definitely worse than my usual approach of writing some LessCSS and trying to be quite specific.

CSS is decent enough for overall theming, but quite bad for actually laying things out.

I think CSS's cascading and inheritance are bad design choices for most of the things that people actually use CSS for.

The alternatives need to do better. Or, I need to find out which alternatives are already better.

Re: Relearn CSS layout

#146

Post by meerita »

danShumway wrote: post #100
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.

My experience has been that the extremely minor performance benefits of functional CSS are not worth the extra time and energy you will spend on a multi-person team trying to mitigate duplicated class names and conflicting CSS functions. You're welcome to disagree of course, I held a somewhat similar view to you until I tried BEM in a production setting. And of course, different products call for differing methodolog…

I did many BEM projects. The idea behind Functional CSS is precisely that: let entire teams work without having to deal with naming. The project becames ultra-maintainable with the best legacy support.

My experience and all the data I've gathered about performance, even coding the equivalent in UCSS was shocking: 400% render speed improvement. 600% loading resources improvements and radical painting speed. To set you in context: one corporate website from a bank, had an average of 230kb resource loading, we lowered it to 33ms. 650ms rendering, we lowered to 90ms. Painting speed avged 90ms, we lowered to 12ms. If you plan things properly, you can radically improve the speed.

It's true that UCSS doesn't make that much sense for very small websites. Although you will render close to a plain HTML doc for sure. It makes sense when you need to repeat and componetize many things. There's when you gain true power. For example, in our tests, we made another equivalent 590kb uncompressed CSS file to 32kb total code need in UCSS. Compressed was about 12kb against 190kb compressed file. That's how you make great improvements.

Re: Relearn CSS layout

#147

Post by Atomskun »

razvandh wrote: post #143

started reading some of the ideas and got put-off almost immediately. 'margin-top'? the owl-selector? Really? Why do we keep making our life more difficult than it should be? CSS is such a beautiful and interesting tool, yet we still decide to misuse it in trying to be too smart. ( margin-top: you start dealing with parents inheriting the margin - which is an old quirk of CSS - it's a side-effect you need to control,…

> so the usage of margin-top should always be avoided

Not really if you consider sibling layouts, e.g.: https://matthewjamestaylor.com/css-margin-top-vs-bottom

> owl selector: performance implications - it's fairly bad from a performance POV to use it.

Arguing about "CSS performance" is futile when the real cause of bloatedness is mostly JavaScript these days (also: http://alistapart.com/article/axiomatic-css-and-lobotomized-...).

The owl-selector can actually be quite elegant, but becomes a burden if you have lots of side-by-side blocks (which would always need to set their margin-top to 0).

Re: Relearn CSS layout

#148

Post by meerita »

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!

It matters.

First, not all users need your huge CSS file, in terms of downloading. Specially when they're on mobile phones and cache is crap.

A ~9000 rules CSS file will load and become COSSM slower than one that has 1000 or 10. It is linear increment. Make a test to see it for yourself.

A bloated CSS is more network time. Therefore, slower loading.

A bloated CSS will contain slower selectors, therefore slower rendering time and painting speed.

When you count all these things, you will see radical speed performance.

Re: Relearn CSS layout

#149

Post by lmm »

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've been saying this for over ten years. Glad the world is kind of coming around to it.

Almost all HTML is generated these days, and the information that's useful for styling is available in the same place as the information that's defining HTML. So generate the styling inline in the same place. If your address display component use a 14 point font, put that inline in the code that generates HTML for an address display component. If you need to change it for all addresses, you can change it in that code. If you need one address display to be special, use a subclass or whatever mechanism you would normally use for one special address display. Compress your HTML in transit if you're worried about the inline styles wasting bandwidth.

Re: Relearn CSS layout

#150

Post by iaml »

macando wrote: post #59
victor106 wrote: post #45

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

Hey once you're past the fundamentals check these two cool games out. They teach how to quickly grasp the most difficult parts of CSS - the layout. https://flexboxfroggy.com/ https://codepip.com/games/grid-garden/ I wish all learning was this fun.

Here's original link for grid garden, and it doesn't need login to play https://cssgridgarden.com
Post reply on HN