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

111–120 of 187 posts

Re: Relearn CSS layout

#111

Post by steve_taylor »

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 the opposite experience. I’m in a React team that was doing BEM via Sass for a few years. Almost two years ago, we moved to Styled Components. The only real difference is that Styled Components automates

* naming of classes

* creating components whose sole purpose is styling

* eliminating unused stylesheets

It’s not like we became any less strict about specificity or used inline styles any more or less than we did with BEM. I find the differences to be purely logistical. Styled Components simply automates a lot of the grunt work and allows us to focus on more important things.

Re: Relearn CSS layout

#112

Post by jammygit »

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’ve been using BEM for about a week now and my first impression is that the readability of my code has improved a lot. It’s only a small project though.

Re: Relearn CSS layout

#113

Post by Waterluvian »

danShumway wrote: post #99
Waterluvian wrote: post #91

Earlier quoted context omitted.

What made CSS in js harder for you?

So obviously, all of this is just opinion me. To start with, the only good way to do CSS in JS is to use a library that compiles your styles at runtime and inserts them into the document under a style tag. If you're not doing that, you lose the ability to use pseudo-elements and pseudo-selectors like hover. Probably 95% of the time, using CSS will be easier than setting up an event system to monitor all of this stuff…

Thanks for taking the time to share all of this. Definitely something for me to review a few times and think about.

For me the argument for was: maintaining a component tree and a style tree is a non-start. Too much for me to keep sense of.

But admittedly I didnt think too much further than that.

Re: Relearn CSS layout

#114

Post by quickthrower2 »

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…

> padding also scales if they have a increased font size due to low vision.

rem: automatic for the people

Re: Relearn CSS layout

#115

Post by JohnBooty »

wolco wrote: post #46
gary__ wrote: post #36

Earlier quoted context omitted.

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…

A good full stack developer should have double the salary of a frontend/backend developer. Do you find this is the case? You need to be an expert at both roles plus have a third skill connecting them together.

    A good full stack developer should 
    have double the salary of a frontend/backend 
    developer
There are (at least) two major reasons why this is not the case.

1. While theoretically possible, it's uncommon (and given the rate of change and increasing complexity of both front end and back end stacks, unrealistic) for a "full stack developer" to have expert-level production knowledge in both domains.

2. Even if #1 was true for a given developer, they wouldn't have double the productivity (and/or billable hours per week) as somebody who was more of a front-end or back-end specialist.

It's similar to the reasons why, in the medial world, general practicioners (aka "family doctors") do not earn money that is the... sum of all other medical professions earnings. They are generalists . Their role is to solve many problems, but also to refer many problems to the appropriate specialist.

Re: Relearn CSS layout

#116

Post by nhooyr »

sureaboutthis wrote: post #86
vedantroy wrote: post #4

Out of curiosity, why doesn't the stack layout use flexbox? It seems like flexbox is the perfect fit for such a layout.

Flex is great for one directional layout within a box. It is not great for two dimensions which most layout is concerned with.

The stack is not two dimensional.

Re: Relearn CSS layout

#117

Post by frosted-flakes »

mmorris wrote: post #102
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'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 flexible (more word separators: "-", "--", "_", "__", etc.), but I'm sure I'll adapt.

Re: Relearn CSS layout

#118

Post by gitgud »

meerita wrote: post #66

To me this way to CSS development is outdated. I will never program like this anymore. I only do functional/utilitarian CSS.

I agree, libraries like tailwind.css are such a breeze to work with (pun intended).

Initially they're frustrating, but after awhile you recognise the ease and predictability of styling reusable components.

Re: Relearn CSS layout

#119

Post by wwweston »

untog wrote: post #97
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 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?

Re: Relearn CSS layout

#120

Post by sambroner »

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.

Wow, that grid-garden game is great.
Post reply on HN