Does anyone have recommendations for tutorials/books/courses that go beyond explaining the basics of CSS to how to actually design stuff with CSS. I've gone through numerous this is how Flex and Grid work, this is list of all the options for Flex and Grid, this is why we used tables in the old days and Float had it's problems.
I'd like to learn how to use the building blocks of CSS as they are now and ... you know be able to learn how to make nice looking designs.
I realize to actually get good at design requires elbow grease and practice, but it still would be nice to have a good teacher/guide to show you how things are done now.
In practice, most FE jobs consist of a designer that produces mocks in Figma or InDesign or similar, then you as the engineer take those mocks and make JS+CSS out of it.
As for what the designers do, it's mostly copying ideas from popular apps and tweaking it to appease the product people, who are requesting changes to appease leadership.
You are to the point where you know what CSS can do, and can work your way through building out UIs. From here it's about adopting a system, and a system that will work well with your needs.
Are you building in a react environment? Are you building WordPress websites? Are you just building simple landing pages? Are you building in a team environment? These could all have different solutions, they could also use similar solutions.
But you need to decide how you want to think about CSS. Which to me, is atomic vs component driven.
Atomic is building small reusable classes, then use those classes everywhere in your HTML. It keeps things consistent. [Tailwind CSS](https://tailwindcss.com/) is the winner of this race at the moment. Lots of people are moving to it. There are solutions for standard CSS, SCSS, or even working with it in React type environments.
Component driven is how I think of BEM, "Block Element Modifier". Break things into reusable components, keep your naming structure consistent according to BEM specs.
I personally prefer BEM type of process (break your pieces into components), but with usage of utility classes also, these can be thought of as atomic (one use, like text-align: center;).
I'm going to try Tailwind on a project soon (I've been following it for years), but I will still think of it in a BEM type structure. Things get messy in atomic when you have complex UIs that have different needs across device sizes. I personally have a hard time looking at HTML when one element could have 10+ classes on it if you go pure atomic.
I've kept things consistent without Tailwind with my own set of config (for things like colors, units, font stacks, z-index stack, etc), then various helper functions for things like keeping breakpoints consistent.
There are lots of great resources (look up atomic css and BEM css), you should browse through many of them to get a well rounded picture of how people work with CSS.
But figuring out how you want to think about CSS and putting a system around it seems like where you are. I recommend trying various methods out, and see what works best for you. Just be flexible if you are in a team environment. A team sticking to a defined standard (even if it isn't your favorite) is better than lots of competing standards.
Perhaps what you really need is a Designer. I know I just like my work better when other people get involved. When I code up really awesome CSS, there's usually someone else involved. Until then stick to something like bootstrap that hands you some basics, but still allows you total control at the end of the day.
Perhaps Tailwind is another option? Use a system to make an MVP or wireframes, then get someone to pretty it up and give you a PSD, Zepplin or Figma link.
Or for a DIY angle look into 2D Design, Print design and Desktop Publishing. Design a business card, that kind of stuff is the old school of user interface. Typography is another hot one, studying communication is the key to getting good.
I realize to actually get good at design requires elbow grease and practice, but it still would be nice to have a good teacher/guide to show you how things are done now.