Big css utility file

Using a 5MB CSS utility file to build things faster.

This post has been archived.

This is a workspace post. It's a working document of my thoughts as I built something or pieced together an idea. It might be unstructured and contain spelling errors. It also might not look good on a small screen. But it could be useful to someone or related to another post, so I'm publishing it as-is.

CSS is hard to write by hand, but I find it easier if I do this:

Use CSS utility classes for prototyping the components and elements.
Re-writing the classes using something like BEM conventions.

It’s easier to go from nothing ⇒ prototype ⇒ complete than to go from zero ⇒ complete.

I’ve been using this https://gist.githubusercontent.com/vogtb/aa65b9a437bffdeb8b26ee292d85e0d2/raw/e4050ceb28bf4601b2a3c1c3cca7b2db9ea57513/big_dumb_css.css which is a big CSS util library I made a while ago. I think it’s based on Tailwind, but I honestly can’t remember. I update it using find-and-replace in Jetbrain’s Goland IDE, which makes it pretty easy. Or I use sed if that fails.

The styles are all classes like flex, text-right, font-sans, text-gray-500, or border-2. There’s no documentation for them. They are well named, and you can search the file yourself if you’re looking for something specific.

Since it’s about 5MB, it’s not great to send the entire thing to the browser, so I use https://github.com/client9/csstool (go install github.com/client9/csstool/...@latest) to cut it down.

It lets you use HTML or a “keep” list, like this.

# This is more or less right, and works pretty well for my React code base.
ALL_CLASSES_FROM_JS=$(
  grep -Eoih '"[^"]*"' */**/*.js \
      | sed -e 's/"//g' \
	  | tr " " "\n" \
	  | sort -u \
	  | awk 'length<26' \
	  | awk 1 ORS=',.'
)

# Cut your CSS file, keeping what's classes from .html and .js files.
cat main.css \
  | css cut --html="*/**/**.html" --keep="${ALL_CLASSES_FROM_JS}" \
  | css minify \
  | css format --indent=0 \
  > output.css

css | snippets | workspace

2022-01-28