11ty is a pretty barebones and unopinionated static site generator where you can choose your own templating language, CSS flavor, etc. I ended up choosing:
- Tailwind CSS - utility-first CSS framework
- Alpine.js - a lightweight JS framework
- markdown-it - Markdown engine that you can extend with plugins (to support things like footnotes, subscript, superscript, containers, automatic anchors to headers, etc.)
- PostCSS - for processing my CSS files (again, with plenty of plugins, I can use import statements, nested attributes, automatic prefixes and more right in my CSS files).
With Tailwind I had a choice between using only CSS classes and styling all the elements directly in the HTML (I could probably get away without writing a single CSS file) or combining the CSS files and Tailwind classes. Same with Alpine.js - I could write
Tailwind vs CSS files
I could add tailwind classes to the HTML files and completely skip writing CSS files. Or write everything in CSS files and then Tailwind is kind of useless. How about a middle-ground?
- Design elements with BEM in mind (here is a nice cheat-sheet I've been using). Write CSS for those elements in the CSS files. Use
.pcssextension to indicate that they will be processed by PostCSS.
- When writing the CSS files, use
@applyrules from Tailwind when possible. But only use generic rules!
@apply p-2is fine, but
@apply p-[117px]is not. Write
- Use tailwind classes directly in the HTML on those elements where it doesn't make sense to make a separate BEM class. E.g. to add a small padding to some random element, etc. There probably won't be many cases like this and that's fine.