What is a problem you constantly have with CSS, or something you keep wanting to learn how to do?

No Peter Griffin operating blinds gifs allowed ;)

Comments

[Ben Halpern]

I mostly have a hard time evolving with new paradigms. I just have a hard time wrapping my head around whether I should use the new stuff, the old stuff, etc.

[Alvaro Montoro]

[Stephanie Eckles]

For about 7 years I was working on projects with government contracts soooo thanks to having to support older IE I pushed off learning grid (for example) until the last few months :) I also spent that time essentially evolving with Bootstrap aka offloading the decision ;) What I love about modern CSS and advanced tooling is that you can accomplish a lot with a little. That said, even when you are familiar with both "old" and "new" there are always about 7 ways to accomplish the same thing, which is probably why CSS has some negative vibes. I love that part, it fuels my creativity :)

[Aaron Berry]

I never really know how to start if I have zero CSS in a project. How do I start structuring my CSS so my apps start looking a little more usable?

[Stephanie Eckles]

Typography and enhancing spacing between elements can take you a long way. You may also wish to include a reset such as Normalize. Then, choose a limited palette (to start) and experiment with adding color to improve hierarchy or help designate relationships between elements. Read up on accessible contrast as well. Here's an excellent Twitter thread from the creator of Tailwind CSS on little design tips to begin to improve your interface: twitter.com/i/events/8806882336418...

[Christopher Fouad Jabbour]

I relate to this so much. I have to plan it out and just do it and just make the functionality and look good to.

[ender minyard]

Making icons center next to text. I use emojis because it's easy. For example, if I wanted to make a button that said upload image 🖼 and use a custom icon, the icon is never vertically centered. Oh look, even the emoji isn't centered.

[Stephanie Eckles]

Both grid and flexbox can be defined as an "inline" variant which is great for both buttons or text within a paragraph. I would recommend flexbox as the slight advantage since its default alignment is along the x-axis (horizontal).

Here's a possible solution for both button-looking links and inline links - you could swap the link to a span and update the class names:

[Christopher Fouad Jabbour]

I think the problem I have with CSS is just trying to remember all of the little details, properties, and implementation part of the elements and the components. I do love the design side of it and figuring out what colors to use. I feel like i spend alot of time on it if I were to make a project without a CSS cheat sheet or reference and I would eventually find myself in a rabbit hole of wondering what to use. I recently been trying to look into like the CSS framework Materialize and find ways to work smarter. I am always trying to find easy to digest resources for it and find what works for me. This mostly comes from my self taught experience so far. I am always afraid of spending more time on it then I need to.

I am trying to find better resources for it and always understand it when I have downtime.

this reminds me of a video of a conference about my frustration of CSS at times. Write Less CSS

[Pacharapol Withayasakpunt]

Div fill the remaining vertical space, then overflow: scroll;.

Another one is responsive table: css-tricks.com/responsive-data-tab... Fixed header is another problem.

[Stephanie Eckles]

Oh tables, you pesky beasts! I think we will be battling those until the end of the web :)

Perhaps the calc function would help in conjunction with grid or flexbox. For a pure CSS solution, you will need to cap height to trigger overflow-y: scroll so you could subtract the height of the header and footer with calc (or other elements if it's smaller sidebar widget or something). Good luck!

[Hamish Macpherson]

I can never seem to remember basic flexbox things. Always have to start with googling! Though that's probably just because I don't do it enough. 😅

[Stephanie Eckles]

I think it took me two years of working with it to confidently choose "align" or "justify" correctly 😂 Keep at it!

[Luis José López Delgado]

I declare myself blame of this problem

[Alex Chiu]

I dont know if I should learn BEM or take the leap with something like tailwind

[Stephanie Eckles]

Even using a utility library you will find yourself with a need to compose reusable components. Learning how to name "components" of code is never a bad skill to pick up :) It helps in translating to a JS framework, or PHP files like for a WordPress theme, or communicating with coworkers and designers.

[Alex Chiu]

interesting, makes sense!

[Brett Stevenson]

I've really enjoyed using Tailwind in a few projects and once you get your tailwind.config all set up, I've found that it dramatically increases the speed and efficiency of my styling and formatting.

[JWP]

Grid has upped my CSS finesse. Without it, my CSS chops are bad. Companies want CSS fixes in hours, not days or weeks.

[Stephanie Eckles]

Excellent point about companies! The downside of it being assumed an "easy" language or "just design". I agree that grid has really changed my approach as well.

[JWP]

As simple as the concepts of CSS are to understand; what's not simple about them, is how browsers implement the behaviors. Until we learn those things we are mostly very poor at doing simple CSS things. The grid has cleared out a lot of that "noise" for me.

And thank you again Stephanie for your insights into CSS!!!

[Sylvester Nkeze]

Creating a parallax effect for images with CSS. I always have to visit Google for that.