DEV Community

Cover image for What is a specific recurring challenge you have with CSS?
Stephanie Eckles
Stephanie Eckles

Posted on

What is a specific recurring challenge you have with CSS?

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.

Top comments (25)

Collapse
 
vtrpldn profile image
Vitor Paladini

Dealing with scrollbars is always a sad experience. That and cross-browser issues with flexbox (I'm looking at you, Safari).

Collapse
 
madza profile image
Madza

This โฌ† ๐Ÿ’ฏ

Collapse
 
billraymond profile image
Bill Raymond

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...

Collapse
 
5t3ph profile image
Stephanie Eckles

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!

Collapse
 
billraymond profile image
Bill Raymond

Oh cool, thank you! Iโ€™ll check it the article!

Collapse
 
brsullivan profile image
Braelyn

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.

Collapse
 
danielatwood profile image
Daniel Atwood • Edited

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.

Collapse
 
brsullivan profile image
Braelyn

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.

Thread Thread
 
5t3ph profile image
Stephanie Eckles

Just in case it helps, I think I have a tutorial that explores at least similar scenarios.

Collapse
 
nieuwepixels profile image
Nieuwe Pixels

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.

Collapse
 
thinkverse profile image
Kim Hallberg

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. ๐Ÿค”

Collapse
 
5t3ph profile image
Stephanie Eckles

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!

Collapse
 
thinkverse profile image
Kim Hallberg

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. ๐Ÿ‘

Collapse
 
willsmart profile image
willsmart • Edited

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.

Collapse
 
christianedsv profile image
Christian Hernandez

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 -.-

Collapse
 
jwkicklighter profile image
Jordan Kicklighter

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??

Collapse
 
jwp profile image
John Peters • Edited

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!

Collapse
 
jwhenry3 profile image
Justin Henry

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!

Collapse
 
louisefindlay23 profile image
Louise

Sticky footers that work on every page regardless of content.

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt

grid is probably the safest solution for this.

Collapse
 
Sloan, the sloth mascot
Comment deleted
 
5t3ph profile image
Stephanie Eckles

If you're interested, I have a tutorial on doing it with grid and flexbox