My top tip for you is to combine what you are doing with totally lean document structure and CSS grid. We are in a habit of using class tags for everything and having very unstructured documents. By structured I mean that with an outline viewer it looks awesome.
Instead of having a sea of divs and a trillion class tags on everything, you can use the proper tags for your document, e.g. 'article', 'aside', 'nav', 'section'. Then in your CSS just style it on those parts, so 'main > article > section {grid-column:2;}' with CSS Grid as the layout engine.
You can use classes for things like links you want to make into buttons and elements you want to toggle hidden, but otherwise the class-less way where your CSS mimics your document is much easier to maintain. If it breaks then it just means you have something wrong with your document, e.g. placed that form in an 'article' rather than the 'section' inside it where it should be.
CSS variables are also awesome, you can have your media queries just set the variables and the CSS rules just use variables, e.g. 'font-size: var(--font-size)' with what that font size is on different devices done in media queries rather than a whole bale of extra CSS.
Vanilla JS also goes with this pattern where you only care about evergreen browsers. You can use divs for containing non document things, e.g. some 'I am not a robot' iframe, but, with the mind-bending CSS grid there is no need for having everything in twenty containing divs.
Ah but, my site is complicated. Well it shouldn't be. If you have it complicated you are doing it wrong.
Also worth banishing are pixels. I took a while to banish them but now I am on ems and viewer units there is no going back.
For presentational niceties try and use pseudo elements with inline SVG stored in CSS variables. In this way the icons can be all in the stylesheet rather than extra downloads. Again, with icons, you are getting it wrong if they are complicated. If you can't draw an icon with simple 'rect' and 'circle' primitives then it isn't going to work as an icon.
Vanilla HTML5 is definitely to be downvoted by some, but you can give up the class and div HTML with silly margins, paddings, floats and hacks and do it all massively cleanly with CSS grid and the new tags. Don't even have a 'reset.css', go vanilla all the way.
Thanks for all these great tips. The site looks the way it does because I learned as I went along. I did some refactoring of the JS when adding the blog section, but a lot more is needed. And the CSS is on a whole other level of ugliness. I'll save this advice for my next big refactoring. Thanks again!
Instead of having a sea of divs and a trillion class tags on everything, you can use the proper tags for your document, e.g. 'article', 'aside', 'nav', 'section'. Then in your CSS just style it on those parts, so 'main > article > section {grid-column:2;}' with CSS Grid as the layout engine.
You can use classes for things like links you want to make into buttons and elements you want to toggle hidden, but otherwise the class-less way where your CSS mimics your document is much easier to maintain. If it breaks then it just means you have something wrong with your document, e.g. placed that form in an 'article' rather than the 'section' inside it where it should be.
CSS variables are also awesome, you can have your media queries just set the variables and the CSS rules just use variables, e.g. 'font-size: var(--font-size)' with what that font size is on different devices done in media queries rather than a whole bale of extra CSS.
Vanilla JS also goes with this pattern where you only care about evergreen browsers. You can use divs for containing non document things, e.g. some 'I am not a robot' iframe, but, with the mind-bending CSS grid there is no need for having everything in twenty containing divs.
Ah but, my site is complicated. Well it shouldn't be. If you have it complicated you are doing it wrong.
Also worth banishing are pixels. I took a while to banish them but now I am on ems and viewer units there is no going back.
For presentational niceties try and use pseudo elements with inline SVG stored in CSS variables. In this way the icons can be all in the stylesheet rather than extra downloads. Again, with icons, you are getting it wrong if they are complicated. If you can't draw an icon with simple 'rect' and 'circle' primitives then it isn't going to work as an icon.
Vanilla HTML5 is definitely to be downvoted by some, but you can give up the class and div HTML with silly margins, paddings, floats and hacks and do it all massively cleanly with CSS grid and the new tags. Don't even have a 'reset.css', go vanilla all the way.