Are CSS media queries very messy or am I just incompetent? Does anyone have any alternatives to it?
I find it very hard to make decent responsible pages. They either look awful or their source code is just a disgusting mess.

Haven't dived into too much details, but preprocessors (i.e. SCSS) seem to help.

Nobody needs CSS preprocessors. If you have so much CSS that you think you need one, you're doing it wrong to begin with.

Media queries are one part of the responsive equation, but the other is a fluid layout between the breakpoints. Means, elements that grow and shrink when you resize the browser window.

Also, you generally don't make breakpoints in px. This will only get you into screen size hell with mobile devices. Use em or rem instead, which will keep working even with user specific font sizing.

Also, remember to pull out common items for your classes and IDs instead of copy/pasting common things for every query. The things in the query should only have settings that are specific for this size, not all the base stuff like colour schemes (except of course for the light/dark mode query that is all about colours).

Alternatives to media queries? Sounds like something that'll end up being really messy.

Really it's impossible to say because we have no idea how you actually use media queries

They're not my favorite, but they are what they are: the system defined way for managing responsive behavior as the user manipulates the viewport.

There are some fast js "alternatives," but they all use media queries under the hood. If you decide to evaluate them, make sure they bring something to the table aside from making media queries less tedious. And even so, it's worth it to just learn the canon way to enable responsive operations.

Half the time you can use flex or grid instead of media queries.

Use Bootstrap 4 grids instead.