Show HN: Lissom.CSS - A classless, minimalist, and themeable CSS library | Hacker News Reader

Show HN: Lissom.CSS - A classless, minimalist, and themeable CSS library

lissomware.github.io

55 pointsLooky117346 comments

This is a personal take on making a classless semantic CSS library.

Firstly, let me say that this looks great. I really like the classless approach. One minor question/nitpick:

> To make a button primary, add the data-primary attribute to it.

For things like this, I feel like a class would be ok while still calling the library "classless". Is there some advantage to using a data-* attribute here or is it just to retain "purity" of the classless tagline?

It's mainly the latter. I did consider just using a class, but ultimately settled on this solution. This approach might facilitate usage with additional CSS compilers/tooling.

I admit I become hesitant when I see "data-*" attributes as it makes me think Javascript might be necessary to use it

"data-*" attributes don't require any JavaScript; their values can even be accessed from CSS with `content: attr(data-*);`

I like the distinction. It separates effects applied by the library from affects applied by your custom class, since you can still add a class if you like. At a glance, I know where the effects are coming from.

This is a good point. It also makes reasoning about classlists more clean, if all are guaranteed to be managed by your own code.

That caught my attention immediately. It just seems like a hacky, roundabout way to avoid using classes for different button styles, which to be clear, are an example of exactly why classes exist.

Nice work! I like that you have included support for prefers-color-scheme, which is one of the more highly-requested features for these kinds of frameworks.

I've added Lissom to the big list of minimal CSS frameworks [0] which aims to collect all of these types of projects (more or less) in one place for ease of discoverability and comparison. You can preview the CSS on some HTML5 boilerplate here [1].

[0]: https://github.com/dohliam/dropin-minimal-css

[1]: https://dohliam.github.io/dropin-minimal-css/?lissom

Thank you for adding Lissom.CSS to the list. Indeed, I think that all modern websites should account for `prefers-color-scheme`, now that it has been supported by virtually every browser for several years.

I’m curious, what is the benefit from going “classless”? In my CSS usage, classes have been very useful. Why would you not want to use classes?

I'm not against classes at all. I believe they are essential to constructing a well structured website, especially for creating layouts. However, I also believe that as frontend developers we should embrace native and semantic HTML elements instead of reinventing the wheel and rolling our own solutions. Going classless for basic elements results in cleaner HTML markup and avoids "class pollution".

I think it's not about going completely classless, but about having sane defaults and only use classes for specific components and/or elements that really need a custom style.

The more traditional CSS libraries provide ton of classes, and your html is filled with classes for the basic styling.

Exactly! You shouldn't need to remember classes for styling native HTML elements, and neither should you be forced to type out <button class="button"></button>, where you would be repeating yourself.

Thanks for the feedback. That is pretty much how I have approached things but I was wondering if I was missing some “gotcha” about classes.

For some reason this site is triggering a phishing warning in Chrome? I went to the site anyway and it seems completely harmless...

That's curious. It's just a simple HTML page with CSS attached, hosted on GitHub Pages. I don't see why it would trigger such a warning.

Many phishing lists don't treat github.io as a pseudo-TLD which leads to the entirety of *.github.io being blacklisted when someone uses Github Pages to host phishing or malware.

Oh, I see. That's quite unfortunate.

MVP.css

My go to classless CSS is MVP.css

Note: the link below is built entirely with MVP.css (including multiple columns, which is something most classless frameworks lack)

https://andybrewer.github.io/mvp/

MVP.css is very complete and robust, but its styles and general feel do not resonate with me.

You have the ability to completely customize look & feel.

Example sites using MVP.css include

https://www.mondage.com

https://searchcode.com

Something that doesn't address every single detail down to things like ::-webkit-credentials-auto-fill-button is not a library but an opinion.

Lissom.CSS is indeed opinionated. Would you prefer to call it a framework instead, or a stylesheet?

Looks great! Working on something similar, but couldn't go through the nuances of managing every gnarly inputs. What do you think of a PR for <section> stacking any children as equal width columns.

Like `display: flex; flex-direction: column; width: 100%;`?

section { display: flex; flex-wrap: wrap; } section > * { flex: 0 0 auto; } section > *:not(:last-child) { margin-right: 1rem;}

Personally that is a terrible idea. <section> should be used for semantic purposes, not layout.

Also, why not use "gap" instead of "margin-right-but-not-last-child"?

It looks really nice and minimal. Good for blogs. What about form elements?

Thank you! I haven't finished form elements yet but they are definitely in the works.

Looks cool. Is this underline-on-hover behaviour expected?

https://i.imgur.com/aHTJfcn.png

Hi, do you mean that the underline appears under the highlighted text? No, that's not expected, I will see what I could do to fix it. However, the underline is indeed supposed to grow slightly thicker on hover.

Yes, looked a bit weird. I do have an outdated web browser so there's that but I would assume this should work well even on older ones (due to the overall simplicity).

Sorry for nitpicking, this is obviously a very minor issue. I always welcome smaller and lighter libraries!

I've stretched out the line height a bit so it should look better now.

Yes! Works great.

I've just added basic form styles. More to come soon...

I was about to suggest that.

Some kind of containers that can use 1/2 1/4 of width and look good on mobile would probably be nice.

I would also add nav with mobile switch, I saw one fully in css.

The default line height for body text is way too tight, IMO. Something like "line-height: 1.4em" on all <p> elements would be more readable.

Thanks for the feedback, I've just set the line height to 1.4.

Does “themable” just mean that it uses CSS variables to make it easy to change colors?

Yes; there are 7 CSS variables to tweak and play with. I might add more in the future (for example, for `border-radius`).

One issue: on my iPhone, the heading symbols are partially off screen.

Really nice in general though!

They are partially off screen on my iPhone SE as well, I will certainly address this issue soon.

Is it possible to apply a set of tailwind styles to base tags?

Individually, yes.

Here’s a similar project I made when I was a teenager:

Marx, The classless CSS reset (perfect for Communists).

https://github.com/mblode/marx

I like it, it's very minimalist and purist!

Reply on news.ycombinator.com