What is "the thing" you build over and over, never satisfied with the solution?
Let's skip the jokes about centering - I've got you covered on that one 😉
💫 Optionally respond to/share the tweet.
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (25)
Dealing with scrollbars is always a sad experience. That and cross-browser issues with flexbox (I'm looking at you, Safari).
This ⬆ 💯
I recently built my site from scratch to learn new things like CSS Grids, Jekyll, HTML5, and all the things that I haven’t touched for 15 years. I was shocked at how [relatively] easy it was to create a responsive site with practically no coding, or at least simplified coding with no JavaScript. This being my first responsive site, I was shocked when I learned about CSS grids (how did I miss those discussions?) and how easy it was to design a site with them.
Then came font sizing. I learned SASS/SCSS and I learned about calc and mixins and viewports. It is shocking to me that there is no easy approach to managjng font sizes that are scalable, do not shrink too much, and do not grow disproportionately to the size of the screen. The formulas look foreign and feel like a hack. It feels like we keep getting lots of options to manage fonts, but no thought leadership and change to the standards.
So for these reasons any many more, responsive font sizing is by far my #1 CSS challenge (gripe?).
That said, I want to give big props to Jessica Chan for her great article, “The elements of responsive typography”. Without that article, I would have been completely lost. blog.logrocket.com/the-elements-of...
First off, kudos to you for really making an effort to dig into CSS!
That's a terrific article, and I think we've had a few updates since it was written with better support for properties like min/max and clamp. I have a related tutorial, and you may be interested in Typetura at least from the point of innovative solutions.
Good luck with your continued learning!
Oh cool, thank you! I’ll check it the article!
Getting an element to take up the full height of a browser window without pulling in JavaScript to detect and hardcode every time the window height changes.
Have you heard of viewport units? Specifically vh. They're like percent of the viewport. 50vh being half the height and 100vh being the full height.
This also works with vw for width.
Ah, yes. I wasn't super clear with my initial comment.
Viewport units work great if I'm actually going for 100% of the window. Usually I have this issue when I've got a static navbar or footer that takes up some of the space and want to take up all of the remaining.
Sometimes calc() functions work and sometimes they don't, sometimes changing the window size breaks it, sometimes it doesn't...c'est la vie.
Just in case it helps, I think I have a tutorial that explores at least similar scenarios.
Its a nasty one, but with some tweaking (I use Flexbox) setting the specific row to 100%, things are possible.
Also look into columns equal height fix. There are good articles out there.
This isn't really something I "build" over and over again, but, I keep forgetting the way
<link>work most of the time and have to look it up, sometimes I even try to use<style src="">to add external styles, I'm not sure why I keep forgetting it though, might be because<script>uses src maybe? Who knows. 🤔Hi, I've been a developer for 13 years and literally just started getting this right in the last few months 😅 It does feel like bizarre syntax for what it's doing!
Absolutely, src I feel would be better than href for
<link>, since you're getting the source of the stylesheet, not the reference of it. 👍It ends up being the messy part of the project.
Even using SASS to its full, with the everything-is-a-cascaded-global nature of the thing I find it really hard to make the CSS part of a project look like nice clean code.
CSS animations and compatibility between browsers. Flexbox and the grid system solved many of the problems of years ago, I still remember working with floats -.-
Currently writing something that will be used to generate a PDF with wkhtmltopdf. Flexbox isn't supported (nor is really any CSS3 spec) and I'm having to relearn the hacky way to do things like vertical alignments. How did we ever work this way??
Go Grid!
Since migrating to the "grid-only" concept and SCSS-only-in-root, I'm glad to say I finally feel like I have control over CSS. However, I am not yet a master. Two years ago I could spend 2 weeks on a simple layout issue (especially using LESS and styled components that I didn't have direct control) today, with SCSS I can reach in deeply and get control in minutes.
Angular's View Encapsulation is Broken
Had I written this response just 6 months ago I would say my biggest issue was in Angular's component css styling. Angular combines a root style with each component's style. This is good in a way because the root stuff is for common look and feel where the component style is for tweaks within just that section of the page. To do this Angular uses a concept known as view encapsulation; which pans out to be css styling trickery with specificity at run time. But there's a bug in it in my opinion because I can easily write the proper queries in that component's javascript but cannot get deep stuff to fly when I move the same selectors to the component's style sheet. I found that using the root SCSS solved that problem. Which leads me away from component styling.
I'm just not a fan of a 2000 line style in the root level, and I also don't like the fact that SCSS, LESS or CSS have no good refactoring tools like JavaScript and Typescript do.
My biggest pain point today
Finding dead styles, and refactoring SCSS and CSS are just a nightmare. Any tips on that would be great.
I started work on a tool that was to do this but never finished. That's because well, to write the refactoring part will be a nightmare. The good news is that all of the CSS stuff is discovered at run time and displayed for that page. It's 100% reliant on the browser CSS rendering so there's literally no run time parsing for discovery because the Browser already did it on first page! The project is open source if anyone wants to work on it.
Thanks Steph!
Chat UIs where scrollbars start at the bottom. With Flexbox and column-reverse, this should be a breeze, but Firefox has broken behavior with it so the keep-at-bottom logic has to be muddy and choppy at best to satisfy cross-browser compatibility. I wish there was a better way!
Sticky footers that work on every page regardless of content.
grid is probably the safest solution for this.
If you're interested, I have a tutorial on doing it with grid and flexbox