Little tip, if you actually care about accessibility, stop declaring things in PX. They're called EM (or REM), use 'em!
You might also find yourself more productive if you stop slopping classes onto things that don't need them. I know the mental midgetry of HTML/CSS frameworks and equally enfeebled practices like BEM can trick you into thinking that's how things should be done.
I actually had the same feedback about class when I asked for code review lately. I tried to give classes as much as I could because I thought if I don’t do that, I might give styles to the elements that I didn't want to but I realised it’s okay to select using tag name as long as it's selected with parent/container and there isn’t the same tag next to it. And also, I was repeating code way too much because of giving different classes to all of them. 😅
Thanks about tip by the way! Is it because em and rem are responsive? Do you recommend em over rem?
The EM/REM isn't so much about "responsive" as it is being "elastic". 1REM is the browser default size, something that the user or the OS can change. This is separate from zoom but allows for the content to auto-enlarge where and as needed.
1REM could be the normal 16px, or it could be the 20px windows XP/earlier 8514/"large" / Win v+ "medium" users expect, the 24px of modern Windows "large", or the 32px on my 8k media center.
By using EM/REM as much as possible, the font size and layout will scale to that preference without the user having to dive for zoom.
It's why IMHO all the best layouts are elastic (em/rem), semi-fluiid (auto-expand to width with a max limit, shrink to fit as needed) and responsive (stripping off classes / hiding extra elements where/as appropriate).
I used to prefer EM because they were broken in Firefox always reporting 1rem as 16px, but they fixed that shortly after quantum came out. The mis-handling of EM for elastic behavior is why a lot of dev's used to use PT instead.. but that's a physical measurement (point, 1/72th of an inch) that's pretty much meaningless on computers.
Nowadays REM can be the better choice. The nice thing about EM though is if you want to enlarge or shrink an entire section, you can just change the font-size on the outermost element.
I leverage this for styled checkboxes, wrote an article about that a year or so ago on Medium.
The size of the entire element can be scaled just by changing font-size. I also have an article from back in september that goes includes a font-size section as it relates to accessibility you might find of interest.
I'm an accessibility and efficiency consultant by trade, so I tend to put things like that front-and-center when looking at other's work. It's really sadly not that well taught or covered, and the fact that the HTML and CSS specifications aren't even written for those of us using them to write websites REALLY doesn't help. No joke, the documents describing the languages of HTML and CSS aren't even written for people like us, they're written for the people who write browsers.
Crazy.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Little tip, if you actually care about accessibility, stop declaring things in PX. They're called EM (or REM), use 'em!
You might also find yourself more productive if you stop slopping classes onto things that don't need them. I know the mental midgetry of HTML/CSS frameworks and equally enfeebled practices like BEM can trick you into thinking that's how things should be done.
It isn't.
I actually had the same feedback about class when I asked for code review lately. I tried to give classes as much as I could because I thought if I don’t do that, I might give styles to the elements that I didn't want to but I realised it’s okay to select using tag name as long as it's selected with parent/container and there isn’t the same tag next to it. And also, I was repeating code way too much because of giving different classes to all of them. 😅
Thanks about tip by the way! Is it because em and rem are responsive? Do you recommend em over rem?
The EM/REM isn't so much about "responsive" as it is being "elastic". 1REM is the browser default size, something that the user or the OS can change. This is separate from zoom but allows for the content to auto-enlarge where and as needed.
1REM could be the normal 16px, or it could be the 20px windows XP/earlier 8514/"large" / Win v+ "medium" users expect, the 24px of modern Windows "large", or the 32px on my 8k media center.
By using EM/REM as much as possible, the font size and layout will scale to that preference without the user having to dive for zoom.
It's why IMHO all the best layouts are elastic (em/rem), semi-fluiid (auto-expand to width with a max limit, shrink to fit as needed) and responsive (stripping off classes / hiding extra elements where/as appropriate).
I used to prefer EM because they were broken in Firefox always reporting 1rem as 16px, but they fixed that shortly after quantum came out. The mis-handling of EM for elastic behavior is why a lot of dev's used to use PT instead.. but that's a physical measurement (point, 1/72th of an inch) that's pretty much meaningless on computers.
Nowadays REM can be the better choice. The nice thing about EM though is if you want to enlarge or shrink an entire section, you can just change the font-size on the outermost element.
I leverage this for styled checkboxes, wrote an article about that a year or so ago on Medium.
levelup.gitconnected.com/scalable-...
The size of the entire element can be scaled just by changing font-size. I also have an article from back in september that goes includes a font-size section as it relates to accessibility you might find of interest.
medium.com/codex/web-accessibility...
I'm an accessibility and efficiency consultant by trade, so I tend to put things like that front-and-center when looking at other's work. It's really sadly not that well taught or covered, and the fact that the HTML and CSS specifications aren't even written for those of us using them to write websites REALLY doesn't help. No joke, the documents describing the languages of HTML and CSS aren't even written for people like us, they're written for the people who write browsers.
Crazy.