My Reaction to Semantic UI

I am a sucker for CSS frameworks. I love the thought and the idea behind them, so when I was forwarded Semantic UI by one of my colleagues, I immediately gave it a run for it’s money. This is my reaction.

Theming

I LOVE the way they approached this issue. You could tell it was at the fore-front of their decision making. I have used Bootstrap for years and wish that they would have paid as much attention to this aspect of CSS frameworks.

Semantic UI provides theming on multiple levels. The theme variables and styles are applied after the base definitions. Your custom site variables are applied last. This is great for you to start with a good base, and work on customization from there. It’s also totally awesome that you can select the theme for individual components.

It also allows for theme creators to get creative and market their own custom themes.

APIs

I really like their JS APIs for interacting with the elements. There is a consistency across the board which is very refreshing when compared to other frameworks. The one drawback that I found is that their documentation doesn’t state (that I could find) the jQuery dependency.

What would be really great is if they took the idea of the CSS theming, and applied those same thoughts to the JS APIs. For example, letting you specify global defaults would be sweet.

Some of their API stuff I haven’t gone into depth with and still don’t really understand (like attaching events), but that understanding should come in time. It’s just a bit steeper of a learning curve.

Classnames

Ah yes, the cornerstone of any CSS framework. Semantic UI seems to have gone a bit overboard when they designed how classnames would be applied to syntax. On one hand, it’s incredibly convenient to be able to change simple behavior by adding/removing a classname, but on the other hand, if you want to make that change across the board all at once, it becomes a pain. You need to do some careful find/replace or CSS overrides which aren’t ideal.

It was hard for me to understand why they enforce the order of some classes. For example, “center aligned” will work, but “aligned center” won’t.

Some classes only apply to certain elements. Why don’t they have globally available classes for text alignment, or floating elements, etc.?

You do end up with these neat sentences in your class attributes though. “ui center aligned basic segment” is a great description of that element and something that you normally might add a code comment for.

Tooling

CSS Pre-processor

Semantic UI is built with LESS as opposed to SASS. This boils down to personal opinion, but I prefer SASS. It has more industry traction and adoption and has faster compiling. This is why you are seeing major frameworks like Bootstrap switch from LESS to SASS.

This means that either 1) I have to switch to LESS, or 2) find a SASS port (which exists). However, using the SASS port is less than ideal because it won’t match up with documentation and could easily have separate bugs or become unmaintained.

I decided to suck it up and just switch to LESS.

Build Tools

It’s clear that they didn’t spend as much detail with build tools as they did to theming or APIs. It’s very obvious that they went with a single tool of choice, and not provide adequate solutions for other mainstream tools.

Their tool of choice was Gulp which is an excellent choice. I’m not complaining about that. What I’m complaining about is that sometimes we don’t have a choice for our build tools. If I wanted to use something different like Webpack, then it creates a lot of developer burdon since there is very little information about the small issues that can arise.

It’s also clear that they didn’t really consider loading the base framework and JS from their NPM module. This was very sloppy and leads you to having to create horrible hacks, or checking their code into your repository.

The Kicker

I tend to think that this is a problem more with LESS than it is with Webpack, but it takes nearly 30 seconds to recompile the entire stylesheet when I make a small and simple change to any of the theme or site files.

This is a huge problem for me and one that I have tackled in the past by merely switching to SASS and using libsass for the compiling. This will get the compiling done in sub-second timing. This is almost a deal-killer for me, but not quite. If it does become and issue, I will consider switching to the SASS port so I can get the proper performance that I need as a theme developer.

Conclusion

Semantic UI is an excellent CSS framework which rivals the pillars in the industry like Bootstrap and Foundation. They did a really great job with theme support and consistent JS APIs. They fell short when it came to build tools and pre-processor choices.

What does this mean for you?

Give it a try! I really think you will like it.

What does this mean for me?

PRs are always welcome so if there are things that I would like to see improved, then I should take an active role in contributing.