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

11–20 of 107 posts

Re: My First CSS

#11

Post by hn_acc_2 »

brundolf wrote: post #7
hmwhy wrote: post #6

Based on the way the article is written, I assume that software engineering was not new to the author when he first started writing CSS. It seems strange to me to write an article like this because it's just an indication that the author chose to dive in without understanding the fundamentals first. I'm honestly just trying to understand how articles like this get promoted to the front page of Hacker News more and mo…

> it's just an indication that the author chose to dive in without understanding the fundamentals first You'd be surprised how many otherwise-competent engineers don't take CSS seriously enough to seek out the fundamentals, and instead spend their days avoiding it as much as possible and cursing it when they can't

There is a stigma amongst "real programmers" against "web developers". So a "real programmer" will never become adept at CSS because it doesn't appeal to their ego

Re: My First CSS

#12

Post by brundolf »

FindMySocks wrote: post #8
hmwhy wrote: post #6

Based on the way the article is written, I assume that software engineering was not new to the author when he first started writing CSS. It seems strange to me to write an article like this because it's just an indication that the author chose to dive in without understanding the fundamentals first. I'm honestly just trying to understand how articles like this get promoted to the front page of Hacker News more and mo…

The question then comes, where would one go to learn the fundamentals-and what are they now? Being someone who was ahead of the game in css 15 years ago, but not having touched it since - where would one go to understand the new fundamentals and options available?

The OP is a good outline of the most important stuff. This is my favorite comprehensive introduction to flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

And then follow it up with this one if you want to go a little deeper: https://css-tricks.com/flex-grow-is-weird/

Personally, I think flexbox is the single most versatile and important tool to be familiar with. You can create nearly any layout with it, in such a way that it's very naturally responsive almost by default.

Re: My First CSS

#13

Post by themodelplumber »

locallost wrote: post #10

I've known those things listed for 15 years now, and they did not help with the wack-a-mole problem. Especially not when working with multiple people. The only thing I've found to actually work is to keep things as simple as possible when it comes to your actual stylesheet. Any kind of complexity including some core CSS properties (e.g. the C for cascading) I avoid. My second box .foo is only slightly different so I…

I'm baffled that you were able to serve up such an eloquent slice of pain without even mentioning !important?

Re: My First CSS

#14

Post by brundolf »

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…

I'll link (plug) an article I wrote where I look at a case study that's similar to what you describe and use it to talk about my broader philosophy: https://css-tricks.com/css-is-awesome/

I wrote this a good few years ago and the writing style isn't great looking back, but I stand by the ideas :)

Re: My First CSS

#15

Post by kilodeca »

> CSS can be hard to grasp when you're starting out. It can seem like magic wizardry and you can very easily find yourself playing whack-a-mole adjusting one property only to have something else break.

Only if you learned from the wrong source.

Re: My First CSS

#16

Post by [deleted] »

FindMySocks wrote: post #8
hmwhy wrote: post #6

Based on the way the article is written, I assume that software engineering was not new to the author when he first started writing CSS. It seems strange to me to write an article like this because it's just an indication that the author chose to dive in without understanding the fundamentals first. I'm honestly just trying to understand how articles like this get promoted to the front page of Hacker News more and mo…

The question then comes, where would one go to learn the fundamentals-and what are they now? Being someone who was ahead of the game in css 15 years ago, but not having touched it since - where would one go to understand the new fundamentals and options available?

[deleted]

Re: My First CSS

#17

Post by hmwhy »

FindMySocks wrote: post #8
hmwhy wrote: post #6

Based on the way the article is written, I assume that software engineering was not new to the author when he first started writing CSS. It seems strange to me to write an article like this because it's just an indication that the author chose to dive in without understanding the fundamentals first. I'm honestly just trying to understand how articles like this get promoted to the front page of Hacker News more and mo…

The question then comes, where would one go to learn the fundamentals-and what are they now? Being someone who was ahead of the game in css 15 years ago, but not having touched it since - where would one go to understand the new fundamentals and options available?

Maybe I am wrong, but I would assume that the most sensible place to start with is the MDN Web Docs[0] in this case instead of looking for blog posts.

Throwing out blanket statements is dangerous for new comers, which seems to be the target audience of this article according to its title. For example, collapsing margin isn't always bad and unpredictable, it just seems that way if you didn't take the time to understand the fundamentals behind and go for "what works".

That's not too different to telling CS students to not worry about learning the memory and time complexities of different algorithms and just use [insert "best" algorithm] because it works most of the time.

[0] https://developer.mozilla.org/en-US/docs/Learn/CSS.

Re: My First CSS

#18

Post by routerl »

themodelplumber wrote: post #13
locallost wrote: post #10

I've known those things listed for 15 years now, and they did not help with the wack-a-mole problem. Especially not when working with multiple people. The only thing I've found to actually work is to keep things as simple as possible when it comes to your actual stylesheet. Any kind of complexity including some core CSS properties (e.g. the C for cascading) I avoid. My second box .foo is only slightly different so I…

I'm baffled that you were able to serve up such an eloquent slice of pain without even mentioning !important?

I'm impressed by the phrase "eloquent slice of pain", and have felt the !important pain.

Thanks for the catharsis.

Re: My First CSS

#19

Post by robertwt7 »

The article is well written, good reminder for all of us who works with css.

I still remember learning all of those things years ago. However, because I don't use vanilla css, I mostly always have to re-google them again.

Actually, for the past few years my css in both professional and side projects has always used tailwind in React (except for react native), 95% of the layout are flexboxes and grids.

Re: My First CSS

#20

Post by Brajeshwar »

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 rhythm across screens of varying shapes and sizes.

For instance, understand the reasoning why a good designer will tell you that the typographic scale for desktops will be major-third, while for the smaller mobile phones, it will have to be minor-third.

Advance topics to research and have peace with CSS are vertical rhythm for spacings, modular scaling for typography, and the Cicada Principle, etc.

Here is an anecdote to illustrate the above;

There was a "Careers Page" redesign for one of the biggest banks in the world - after about 10+ years of their old one. When I landed in London, they already had a "Senior front-end developer" mid-way into the project. I went as a replacement for one of my team who had a family emergency. I haven't written much code in years.

They had engaged a brilliant designer and had a wall plastered with some of the most beautiful glossy print-outs. Everyone, including the client, loved it. Unfortunately, the struggle was -- the front-end output had irregular margins (pixel mismatch), fix another but breaks the other, etc.

I saw that they had screen rulers that try to match the design with what comes out on the screen.

I requested the designer to spend few hours explaining his reasoning behind the spacing and asked him the rhythms (similar to musical notes) that he has used, the scaling of the font sizes. This was when I realized the designer was brilliant, but the engineers would not understand or appreciate his effort.

I wrote out the Sass functions and mixins and steadily replaced many hacked in numbers and values. Introduced Design Tokens, a simple style guide, etc.

The website is still there and will likely last another 10+ years. I'm also sure many of you might have stumbled on it or have applied to jobs with it. :-)

Post reply on HN