Genuinely, though, CSS is fairly clear cut about the rules of positioning and space. Relative positioning is one of the most important concepts to master since it allows things to flow via the HTML structure and not extra CSS. Fixed positioning is as if you had no relative container other than the window itself. Absolute positioning is a little weird, but it’s just like fixed positioning except within the nearest parent with relative positioning.
Everything else is incredibly straight forward. Padding adds space within a container. Margins add space outside a container. Color changes text color. Background-color changes the background color of an element.
Top, left, right, and bottom dictate where the element should be positioned after the default rules are applied. So if you have a relative div inside a parent which is half way down the page, top/right/left/bottom would move the element relative to it’s position within the parent. If you made the div fixed, it would be moved relative to the window.
Lastly, if you’re designing a webpage just think in boxes or rows and columns. HTML can define 75% of the webpage structure. Then with just a bit of CSS you can organize the content into rows/columns. That’s pretty much it. Most web pages boil down to simple boxes within boxes. It just requires reading and understanding but most people don’t want to do that to use CSS since it feels like it should just “know”.
As someone who has built QT, Swing, and JavaFx applications, I way prefer the separation of concerns that is afforded us via HTML JS and CSS.
At first glance the rules seem to make sense and be straightforward until you start dabbling into screen size responsiveness and display and layout rules and then you get into questions like “what the hell is flex box and how is it different from flex. Why is this element randomly wrapping, selector specificity is joke and everything’s made up and the rules don’t matter.
Display and layout rules aren’t difficult at all. Maybe I’m just not experienced enough. I’ve been a web dev for nearly a decade now and I feel like I’ve got the hang of it. That being said, I don’t work on projects that have to work on everything from a Nokia to an ultra wide monitor. We shoot for a few common sizes and hope it clears between edge cases nicely. What is an example of something that wraps randomly?
It’s definitely the smaller viewports that give the most trouble, and as I am a stubborn mini phone user, I make sure that my projects are responsive to smaller screen sizes.
The other part is that I’m not a front end dev, so these are just my personal projects and I don’t know all the hacks to really optimize layouts on smaller screen sizes.
You are not logged in. However you can subscribe from another Fediverse account, for example Lemmy or Mastodon. To do this, paste the following into the search field of your instance: !programmerhumor@lemmy.ml
Post funny things about programming here! (Or just rant about your favourite programming language.)
Rules:
Posts must be relevant to programming, programmers, or computer science.
No NSFW content.
Jokes must be in good taste. No hate speech, bigotry, etc.
CSS was designed by someone truly deranged. I hate front end so much
In an alternate reality, we’d all be using JSSS, which was even worse. https://en.wikipedia.org/wiki/JavaScript_Style_Sheets
laughs in tailwind
Do you hate everything you don’t understand?
I don’t hate you Bobby
It’s ok, it’s called being a masochist. No one is judging you for using css.😆
Genuinely, though, CSS is fairly clear cut about the rules of positioning and space. Relative positioning is one of the most important concepts to master since it allows things to flow via the HTML structure and not extra CSS. Fixed positioning is as if you had no relative container other than the window itself. Absolute positioning is a little weird, but it’s just like fixed positioning except within the nearest parent with relative positioning.
Everything else is incredibly straight forward. Padding adds space within a container. Margins add space outside a container. Color changes text color. Background-color changes the background color of an element.
Top, left, right, and bottom dictate where the element should be positioned after the default rules are applied. So if you have a relative div inside a parent which is half way down the page, top/right/left/bottom would move the element relative to it’s position within the parent. If you made the div fixed, it would be moved relative to the window.
Lastly, if you’re designing a webpage just think in boxes or rows and columns. HTML can define 75% of the webpage structure. Then with just a bit of CSS you can organize the content into rows/columns. That’s pretty much it. Most web pages boil down to simple boxes within boxes. It just requires reading and understanding but most people don’t want to do that to use CSS since it feels like it should just “know”.
As someone who has built QT, Swing, and JavaFx applications, I way prefer the separation of concerns that is afforded us via HTML JS and CSS.
At first glance the rules seem to make sense and be straightforward until you start dabbling into screen size responsiveness and display and layout rules and then you get into questions like “what the hell is flex box and how is it different from flex. Why is this element randomly wrapping, selector specificity is joke and everything’s made up and the rules don’t matter.
Display and layout rules aren’t difficult at all. Maybe I’m just not experienced enough. I’ve been a web dev for nearly a decade now and I feel like I’ve got the hang of it. That being said, I don’t work on projects that have to work on everything from a Nokia to an ultra wide monitor. We shoot for a few common sizes and hope it clears between edge cases nicely. What is an example of something that wraps randomly?
It’s definitely the smaller viewports that give the most trouble, and as I am a stubborn mini phone user, I make sure that my projects are responsive to smaller screen sizes.
The other part is that I’m not a front end dev, so these are just my personal projects and I don’t know all the hacks to really optimize layouts on smaller screen sizes.