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

131–140 of 187 posts

Re: Relearn CSS layout

#131

Post by ry_ry »

_pgon wrote: post #123
meerita wrote: post #82

Earlier quoted context omitted.

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.

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 is a requirement to bend the rules, the problem is with CSS itself.

Heck, even at the most rudimentary level of organising your CSS falls foul - the accepted best method for sorting attributes within a selector anybody seems to have come up with is alphabetical, which feels weird because it weaves layout, typographical and aesthetic behaviours. Why alphabetical? Because nothing else makes much sense, ...so it wins out by default?

I still maintain CSS is a mess from top to bottom.

Re: Relearn CSS layout

#132

Post by evan_ »

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…

You just have to remind yourself that you aren’t writing css class names, even though it looks like css class names you’re picking js identifiers. Once I made peace with that it got a lot easier to write camelCase class names- and even switch back to kebab-case when necessary.

Re: Relearn CSS layout

#133

Post by WA »

aarohmankad wrote: post #2

Saw this awesome project on Lobsters. I went ahead and ported these components to generalized, composable Styled Components. There's also an npm package at `every-layout`. https://github.com/aarohmankad/every-layout

You mean "React Components" right? Nice effort, but please mention that these components are supposed to work with React. If we now use the word "Component" as a synonym for React, you make it look like there are no other frameworks than React.

Re: Relearn CSS layout

#134

Post by osdiab »

WA wrote: post #133
aarohmankad wrote: post #2

Saw this awesome project on Lobsters. I went ahead and ported these components to generalized, composable Styled Components. There's also an npm package at `every-layout`. https://github.com/aarohmankad/every-layout

You mean "React Components" right? Nice effort, but please mention that these components are supposed to work with React. If we now use the word "Component" as a synonym for React, you make it look like there are no other frameworks than React.

No, he meant Styled Components, a popular library for styling React components.

Re: Relearn CSS layout

#135

Post by Theodores »

ctidd wrote: post #71
Theodores wrote: post #63

Earlier quoted context omitted.

What I have learned just from having a go is that document outlines matter too, so I just think of whatever I am writing in terms of sections, articles and asides. I don't actually ever think of adding a 'div', there is just no actual use case for them. Typically with a 'section' the first line inside it for me is a heading. So on the outline there are no 'unnamed sections'. Save with 'nav' and other content blocks,…

If seems like you discount portability as a concern, and if that's appropriate for your use case, that's a fair decision of course. But there are many use cases for which that's a priority. The concern the BEM and component-based CSS approaches aim to address is the composition of arbitrary chunks of DOM without implicit side effects. By having chunks of DOM explicitly opt in via classes to being styled in a given wa…

When it comes to portability I find that a class for the component is all that is needed. So that is at the root element of the component and with everything inside classless. So '.component > nav > ul' might be how I would style navigation inside the component, knowing it would not inherit styles from the body defined classes for header/footer navigation.

The BEM type of examples you will normally see will have everything as a div, I just avoid div elements not out of some prejudice against them but because I am out of the mindset to think to use them.

A lot of what I am saying here does fall apart on over complicated commercial projects though where the CSS is 'add to' and you can't just strip everything out to do it stupidly simplified.

I am also not a fan of monolith stylesheets with resets and frameworks adding thousands of lines of CSS. The idea that you should need 30000 lines of CSS for a product page is just silly, but even some of the best websites are doing that sort of thing.

In one of my pet projects that I am not quite happy with yet (wording could be better), I create a lot of content from JSON data using templates done as 'template' the element. The approach of using simple selectors works well when it comes to taking a template, changing elements within it such as the title and adding rows of data to it. I have struggled with over complex toolkits that create stuff, e.g. the Wordpress Gutenberg editor, but I find vanilla javascript (no compiling) with full feature HTML5 (all the elements) and the compound selectors work great. At one level the rest of the world is way ahead of me on these mega complex build tools but then I wonder if they are really needed.

Anyway back to it!

Re: Relearn CSS layout

#136

Post by geezerjay »

dmitriid wrote: post #130
wwweston wrote: post #119

Earlier quoted context omitted.

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.

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

That's only a concern if your UI elements depend on global styles, right?

Meanwhile, UI toolkits such as Qt use CSS (actually, Qt Style Sheets) to style UIs

Re: Relearn CSS layout

#137

Post by WA »

osdiab wrote: post #134
WA wrote: post #133

Earlier quoted context omitted.

You mean "React Components" right? Nice effort, but please mention that these components are supposed to work with React. If we now use the word "Component" as a synonym for React, you make it look like there are no other frameworks than React.

No, he meant Styled Components, a popular library for styling React components.

I see, didn’t know about this. Thanks for pointing it out!

Re: Relearn CSS layout

#138

Post by majewsky »

geezerjay wrote: post #136
dmitriid wrote: post #130

Earlier quoted context omitted.

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.

> You accidentally apply a global style, and your entire UI is broken. That's only a concern if your UI elements depend on global styles, right? Meanwhile, UI toolkits such as Qt use CSS (actually, Qt Style Sheets) to style UIs

> UI toolkits such as Qt use CSS (actually, Qt Style Sheets) to style UIs

This statement makes it sound like every Qt application uses CSS. That's not true. CSS is offered as a way to apply corporate branding to an application. I'm not aware of any FOSS Qt applications using CSS.

Re: Relearn CSS layout

#139

Post by majewsky »

otabdeveloper4 wrote: post #126
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.

HTML/CSS/JS is arguably the most successful UI platform in the world, so this is obviously wrong. You just want HTML to not be about UI.

Re: Relearn CSS layout

#140

Post by meerita »

_pgon wrote: post #123
meerita wrote: post #82

Earlier quoted context omitted.

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.

I would not call them "best practices" anymore, since those practices only bring a notable decrease on loading, rendering and painting performance. As well a bloated architecture in the short term and a huge file size.
Post reply on HN