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

181–187 of 187 posts

Re: Relearn CSS layout

#181

Post by sheriffderek »

btbuildem wrote: post #154
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.

I've discovered functional CSS some months ago, and I don't think I'll ever look back. Building everything with simple classes makes it easy to keep things consistent, appearance concerns live firmly in the style layer, and once patterns of classes used together start to appear, I can break the rules a little with SCSS and make classes like "button" ("ps ts cap rc2 box1") for the shorthand convenience.

Once you add all of those classes, it's nearly impossible to add a developer who isn't used to it. It's also really hard for me to read. Tailwind / bootstrap etc - is a total deal breaker for me. I'll just get a different client. https://www.browserlondon.com/blog/2019/06/10/functional-css... I just can't imagine not writing CSS like this: https://maintainablecss.com/chapters/introduction

Re: Relearn CSS layout

#182

Post by sheriffderek »

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!

No. No way. If you're CSS is a problem - then you are doing something really really wrong.

Re: Relearn CSS layout

#183

Post by sheriffderek »

victor106 wrote: post #45

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

CSS is completely dependent on HTML. If you write poor HTML - then you've already shot yourself in the foot. If you can't learn them together - then it's really hard. People don't learn the different display types / or positioning, and then they freak out when they can't figure out why a margin-top isn't working on their inline element. I've never met anyone I consider to write decent markup or styles in any of my jobs. This is pretty good: https://maintainablecss.com/chapters/introduction/ - but it doesn't teach you CSS. It teaches you how to write maintainable CSS. MDN is the best we've got (so far)

Re: Relearn CSS layout

#184

Post by sheriffderek »

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.

I'd be curious to know what you consider the fundamentals to be.

Re: Relearn CSS layout

#185

Post by sheriffderek »

"Web browsers helpfully apply default CSS styles..." Totally disagree with the idea that this is 'helpful.' Pretty site though. I think there's some good stuff here - but it's not how I'd teach it. Side-note: I love how wappalyzer says 'zero technologies detected.' That's rad. "Each layout in Every Layout is intrinsically responsive." Everything is intrinsically responsive before you force it not to be. Big respect for tackling this though. Lots of good stuff and just a bit of maybe not great stuff.

Re: Relearn CSS layout

#186

Post by wyqydsyq »

have_faith wrote: post #152
wyqydsyq wrote: post #110

Earlier quoted context omitted.

Despite trying using it a few times I've never seen the appeal in BEM, it's just bringing excessive and redundant verbosity to CSS class names as well as introducing unnecessary complexity in maintenance (e.g. if you change a class's name you need to also need to apply the change to any derivative class names)

The appeal of BEM is that it offers module scoping through naming convention (because we had no other way to do it). And it stops you accidentally styling something you didn't intent to. If you have a .box with a .title inside and you write some css like .box .title { color: red; } You're telling the browser to find any title in box and make it red. But that's not what you wanted to do, you wanted to style box titles…

Sorry I meant I don't see the appeal in contrast to using CSS in JS solutions, BEM clearly offers better separation of concerns compared to traditional CSS, but this problem is already solved when using CSS in JS, because you explicitly import the styles you want to apply to an element, having to line up class names in your CSS and DOM is a non-issue as the classnames are autogenerated

Re: Relearn CSS layout

#187

Post by chrshawkes »

lmm wrote: post #176
chrshawkes wrote: post #170

Earlier quoted context omitted.

Already addressed earlier but inline styles ignore media queries so you may have missed the entire Web 3.0/4.0/responsive web design etc which occurred in 2012.

You mean changing the layout to be less useful on mobile (or occasionally making the layout less useful on desktop and changing to a better one on mobile)? Yeah, I'm pretty happy to have avoided that one.

I don't blame you lol
Post reply on HN