Idk why exactly but using IDs for styling has been discouraged for a while and now every application I’ve ever worked on had been styled using classes that are usually unique anyway
In E2E tests you should ideally be finding elements using labels or ARIA roles. The point of an E2E test is to use the app in the same way a user would, and users don’t look for elements by class name or ID, and definitely not by data-testid.
The more your test deviates from how real users use the system, the more likely it is that the test will break even though the actual user experience is fine, or vice versa.
This is encouraged by Testing Library and related libraries like React Testing Library. Those are for unit and integration tests though, not E2E tests. I’m not as familiar with the popular E2E testing frameworks these days (we use an internally developed one at work).
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.
I like how
garageis a class butcaris an intrinsic element.Maybe garage is just a class styling for a generic “room” After all, it’s got 4 walls and a few doors
Idk why exactly but using IDs for styling has been discouraged for a while and now every application I’ve ever worked on had been styled using classes that are usually unique anyway
Should I bother using just classes or can I keep making ids?
Tbh, I think for unique elements that’s a valid approach. It also enables easier element selection in automated e2e testing
In E2E tests you should ideally be finding elements using labels or ARIA roles. The point of an E2E test is to use the app in the same way a user would, and users don’t look for elements by class name or ID, and definitely not by data-testid.
The more your test deviates from how real users use the system, the more likely it is that the test will break even though the actual user experience is fine, or vice versa.
This is encouraged by Testing Library and related libraries like React Testing Library. Those are for unit and integration tests though, not E2E tests. I’m not as familiar with the popular E2E testing frameworks these days (we use an internally developed one at work).
I agree, but our tester is a bit lazy I suppose
margin-inline-start: -1.25remfor the internationally-minded & accessibility-minded developerRather a
margin-top: -20px;
Or they did a
transform: rotate ( -90deg );
before being able to achieve that with a margin-left.
margin left on car
left for car is where door is
car is clipping through door because negative margin to direction of door
CSS was designed by someone truly deranged. I hate front end so much
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.
laughs in tailwind
In an alternate reality, we’d all be using JSSS, which was even worse. https://en.wikipedia.org/wiki/JavaScript_Style_Sheets
This reminds me of this trophy