Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

My First CSS

engineering.kablamo.com.au

Post reply on HN
Print view View original

61–70 of 107 posts

Re: My First CSS

#61

Post by codetrotter »

kwhitefoot wrote: post #46
themodelplumber wrote: post #9

Earlier quoted context omitted.

A div? Narrower? Why? Oh because the text is cut off and scrolls sideways instead of running down the page, even though you can't see a horizontal scrollbar? Ah, well _that_ width is dictated by some image code at the bottom of the page text. The image was cropped incorrectly because the designer was on vacation and they had to use some random online crop tool during our cloud software outage. We fixed it with some a…

> You know you can scroll to the left and right really easily if you hold down shift? On a touch interface?

On a touch interface you drag sideways to scroll.

That being said it's very annoying to read anything that needs to be scrolled sideways. So if I come across it I zoom out and if it's too small to read then I navigate away from the site.

Re: My First CSS

#62

Post by candiddevmike »

To me, CSS is probably the most "artistic" kind of work I do, so a good CSS writing session involves being in the right artistic headspace. The work is a lot like shaping clay--a little padding here, some flexbox there. I use classes scoped to components and avoid global styles, lessens the blast radius. I also leverage CSS variables in lieu of SASS and friends to keep things vanilla. Once it's done, like playing with clay, I couldn't really describe the process of getting to the final product, it just materializes over the iterations.

Re: My First CSS

#63

Post by madeofpalk »

brundolf wrote: post #5

These are good concrete concepts to use as a foundation. I would add a general principle that I think is really important: let the layout engine do as much work for you as possible. Which is to say, tell it as little as possible. If you want that to be narrower, you probably don't want to set it to a narrower `width`, you want to step back and understand where its current width is coming from, and determine how that…

> you want to step back and understand where its current width is coming from

This touches on my key insight with CSS (and programming in general), in that if you have a problem with your page layout, that probably probably exists in the code you’re already written, so adding more code on top will only make things more difficult.

Step back, understand exactly why the layout is acting why it is, and address that problem rather than just monkey patching a hack on top.

Re: My First CSS

#64

Post by bzzzt »

brundolf wrote: post #5

These are good concrete concepts to use as a foundation. I would add a general principle that I think is really important: let the layout engine do as much work for you as possible. Which is to say, tell it as little as possible. If you want that to be narrower, you probably don't want to set it to a narrower `width`, you want to step back and understand where its current width is coming from, and determine how that…

The reason lots of developers hate CSS is not because they ended up in a "quagmire of constraints", but in a quagmire of previous developer's constraint...

Re: My First CSS

#65

Post by extra88 »

themodelplumber wrote: post #9
brundolf wrote: post #5

These are good concrete concepts to use as a foundation. I would add a general principle that I think is really important: let the layout engine do as much work for you as possible. Which is to say, tell it as little as possible. If you want that to be narrower, you probably don't want to set it to a narrower `width`, you want to step back and understand where its current width is coming from, and determine how that…

A div? Narrower? Why? Oh because the text is cut off and scrolls sideways instead of running down the page, even though you can't see a horizontal scrollbar? Ah, well _that_ width is dictated by some image code at the bottom of the page text. The image was cropped incorrectly because the designer was on vacation and they had to use some random online crop tool during our cloud software outage. We fixed it with some a…

> You know you can scroll to the left and right really easily if you hold down shift?

You can scroll left and right easily, not everyone can. Avoiding the need to scroll in two directions makes content more usable to everyone but there's also a WCAG criterion about it.

https://www.w3.org/WAI/WCAG21/Understanding/reflow

Re: My First CSS

#66

Post by donatzsky »

hypertele-Xii wrote: post #45
sodimel wrote: post #33

> A key way I think about building visual UI components is that basically everything can be broken down into a bunch of rectangles on a page. I created this tiny script[1] in order to be able to view all the rectangles that makes a website, a little while ago. Here's a demo[2]. [1]: https://gist.github.com/corentinbettiol/85a8938175f89a15ac35... [2]: https://up.l3m.in/file/1597168094-tilt.webm

I just add this to the CSS: * { border: dotted red; }

You should generally use outline instead of border for this, since it doesn't affect the size of the element.

Re: My First CSS

#67

Post by codetrotter »

Brajeshwar wrote: post #20

I tend to believe that someone who can do magic CSS is about the ability to weave it with Mathematics and patterns. Other than that, the way you use CSS as it evolves become more and more syntactic sugar. Once you are comfortable with CSS, try to dig a tad deeper into design philosophies and patterns. Work with established designers who understand that spacing is not just margins/padding of a designated number but a…

> the typographic scale for desktops will be major-third, while for the smaller mobile phones, it will have to be minor-third

I tried to google major-third and minor-third with various keywords but couldn't find anything relevant. Could you expand on this and explain what it means?

Edit: Never mind, I found some. Here:

- https://medium.com/sketch-app-sources/exploring-responsive-t...

- https://spec.fm/specifics/type-scale

- https://designcode.io/typographic-scales

- https://type-scale.com/

Re: My First CSS

#68

Post by blacktriangle »

madeofpalk wrote: post #63
brundolf wrote: post #5

These are good concrete concepts to use as a foundation. I would add a general principle that I think is really important: let the layout engine do as much work for you as possible. Which is to say, tell it as little as possible. If you want that to be narrower, you probably don't want to set it to a narrower `width`, you want to step back and understand where its current width is coming from, and determine how that…

> you want to step back and understand where its current width is coming from This touches on my key insight with CSS (and programming in general), in that if you have a problem with your page layout, that probably probably exists in the code you’re already written, so adding more code on top will only make things more difficult. Step back, understand exactly why the layout is acting why it is, and address that probl…

The problem there is that you're now refactoring a bunch of code that is working on the other 99% of your pages. This model is great, but in CSS when doing this in order to fix your current problem, you are almost guarenteed to break other layouts elsewhere, and very very few people are using automated view testing to see if layouts break.

I think this is the core reason why functional CSS is growing, because by separating out your layouts from each other, one can actually approach CSS refactoring this way without worrying about breaking other pages.

Re: My First CSS

#70

Post by blacktriangle »

hypertele-Xii wrote: post #44
themodelplumber wrote: post #9

Earlier quoted context omitted.

A div? Narrower? Why? Oh because the text is cut off and scrolls sideways instead of running down the page, even though you can't see a horizontal scrollbar? Ah, well _that_ width is dictated by some image code at the bottom of the page text. The image was cropped incorrectly because the designer was on vacation and they had to use some random online crop tool during our cloud software outage. We fixed it with some a…

All the problems you just listed are everywhere else but the CSS.

All the problems he listed are very real, and its important that a technology fit in our actual working model, not just some theoretical model.

Take his example of the images being off thus screwing up your widths because you chose to inherent the image width as a constraint. Now imagine a very realistic scenario where you are reusing that style across multiple pages, and each page has a different image. Now you need to confirm this works for all existing and future possible images, good luck with that.

Point being, isolating element styles from each other where possible is a big win for maintainability and reliability.

Post reply on HN