Difficulties with styling (CSS)

[The Raven]

In my life I encountered many web languages, scripting languages and something people call languages but are not (CSS).
Now, I am capable of thinking logically and backend is my thing because of it. However, CSS is the worst thing and I hate it from deepest part of my soul. It is so broken I just can't describe to you. It works on one browser but it doesn't work on another. It seems like few extra pixels can make everything messed up for unknown reason. Different resolutions are annoying as f.

Okay, we got media query if something but you must memorize all of that through experience. How can you make styling that difficult but you can make programming languages simple? I just... I remember the times you didn't have flex positioning and it was real pain in the butt.

Anyone had bad experience with CSS?

 

[Tyrsson]

CSS is by far not my favorite thing to do. Which is why I usually use a framework. I'm of the line of thought that says.... Pick a good tool, learn it well, let it do its work. Write less, do more.

 

[TwitchisMental]

CSS is pretty simple if you ask me lol. Infact I find it better than ever now with all of the things you can accomplish with it nowadays. Very rarely do I have cross browser issues like the old days. Grid and Flex make dealing with different resolutions alot easier. Now PHP on the other hand... I'm struggling lol.

 

[Cory]

I've never had too much of a problem with CSS since the days of Internet Explorer. But then again, I don't code websites, I code forum skins for one forum software only. However, I feel the newer technologies of CSS3 have made it easier to make websites more user/mobile-friendly than before. There's some of it I don't even understand too well though, like I still can't grasp all of the aspects of CSS grid, but I use Flexbox quite often and it does wonders for me.

 

[AjayJunkies]

CSS... is very extensive. There's just so many different ways to do X and each way has its own little quirks. When using CSS I feel like I'm trying to force something to look a certain way and sometimes it works other times... I have no idea why it's doing that such as my footer text slowly getting lower and lower as my page width decreases.

It just feels too messy.

Yeah, I struggle with web design because I struggle with CSS.

If CSS was programmable out of the box and you could do things like dynamically query sizes of other elements, I think it would be way simpler to make something the way you want it.

But then again, maybe I just need to RTFM. And bury my head in some books.

 

[kolakube]

Honestly, there's nothing I love more than starting a fresh CSS file. My goal is to always write it better than last time, and we have it SO GOOD nowadays with flexbox and animations.

...plus I've created my own PHP to CSS processor that opens up a lot of possibilities, including rendering data from user-selected options (i.e. printing colors set from a color picker in the WP admin to the static CSS file).

CSS... is very extensive. There's just so many different ways to do X and each way has its own little quirks. When using CSS I feel like I'm trying to force something to look a certain way and sometimes it works other times... I have no idea why it's doing that such as my footer text slowly getting lower and lower as my page width decreases.

One tip that may help is if you constantly question yourself before you overwrite a property. You may find that you don't need to change it because it should have been set one way initially or a little earlier.

Also, never style with IDs and keep your selector chain as simple as possible. Go get 'em!

 

[Arantor]

(i.e. printing colors set from a color picker in the WP admin to the static CSS file).

If you set them up using the theme colour setup, they automatically get exported as vars in CSS these days.

 

[kolakube]

If you set them up using the theme colour setup, they automatically get exported as vars in CSS these days.

I appreciate the standardization of APIs in WordPress and I really want to like CSS variables, but I'm not convinced that CSS should be dynamic and tend to stay away from things like calc and variables for that reason.

If I didn't have a preprocessor I may feel differently, but in my view the CSS being served to the page should be the final product, not ever changing. I also think what variables have done to the readability of stylesheets and the inspector is a net negative, but understand how it got to this point as humans write less CSS and rely on more automation to do it nowadays.

 

[Arantor]

All they’re trying to do is reimplement CSS variables on the client side, it’s not really much different in my head compared to writing variables in Sass, with the added bonus that you can actually interact with them usefully in the client and see where things get triggered, and you can write cleaner, shorter code by hand in a lot of cases than the average preparser kicks out.

 

[AjayJunkies]

Honestly, there's nothing I love more than starting a fresh CSS file. My goal is to always write it better than last time, and we have it SO GOOD nowadays with flexbox and animations.

...plus I've created my own PHP to CSS processor that opens up a lot of possibilities, including rendering data from user-selected options (i.e. printing colors set from a color picker in the WP admin to the static CSS file).


One tip that may help is if you constantly question yourself before you overwrite a property. You may find that you don't need to change it because it should have been set one way initially or a little earlier.

Also, never style with IDs and keep your selector chain as simple as possible. Go get 'em!

Have you ever used web components yet? I used 11ty for my website with their web component plugin which means I have a layout with some css attached, then I have pages with css attached, and even components of the site, with css attached.

It's not putting css into a global file, it's there in the same file as the html, and 11ty scoops it all up for us into one bundled file at the end of the day if we so wish.

This is my footer bar that does weird things Looking now, Im sure I should have used an extra wrapper div around the text then, lol.

11ty/src/_components/footer-bar.webc · master · Pawn Studios / Web / Website · GitLab

https://pawngame.com/

gitlab.com