Semantic UI is an aptly named tool that provides many shortcuts to implementing a variety of elements in HTML by using easily-understood labels that clearly describe their purpose. I feel like the “semantic” aspect of Semantic UI is well-achieved, as the words chosen for the classes are so intuitive, I was able to guess what to add in a class field without having to research what it was that I was attempting to implement. Being able to use keywords like borderless, fitted, left, right, small and large and not have to experiment or research how to apply those modifications to appearance with raw CSS does make website creation a much easier and faster process, and who doesn’t like things being easier and faster? I would say that I almost always do, and Semantic UI definitely did help me save some time in creating websites that looked the way I wanted and expected. However, I also ran into some limitations, though mostly caused by my inexperience, that made me think perhaps I would choose not to use Semantic UI all the time.
In addition to the clear choice of keywords, another aspect of Semantic UI that I liked is that it works seemlessly with existing websites and tools. It is free, and can be added to any HTML project with just a few lines added to the HTML header. It won’t affect the performance of any existing raw HTML and CSS, and simply gives the option to use elements where desired. Some of the elements are immensely useful. For example, implementing dropdowns was incredibly simple, and while the raw HTML for the most basic dropdown is very similar in complexity, Semantic UI needs only one additional parameter to suddenly allow multiple choices in a dropdown, add a scrollbar, or make other tweaks that would be immensely difficult to implement with raw HTML. On top of that, Semantic makes it all look good with absolutely no extra effort, while the raw HTML counterpart looks decidedly ancient. Semantic really lives up to its name with the use of clear language. Want three equally spaced fields in a form? Just add “three equally spaced” to your form class, and Semantic makes it happen.
Possibly the best part of Semantic UI is the website, which makes it so easy to research what all the elements are, how they work, and even gives the option to copy the code for all of the variations each element can have. Seeing all the tiny modifications that can be applied to just about any element Semantic UI offers, along with the code example for each one really convinced me of the power and utility Semantic offers. There are numerous interactive examples on every page, so finding the code to use a feature in the exact way I envisioned was very easy. My favorite page so far was for UI Forms. Being able to see how each variation would look on my page, find the one that fit the best, and then copy the code directly into my IDE was great, and it worked exactly how I wanted on the first try.
To return to my earlier question, is there a case where I wouldn’t want the faster and easier option when building a website? I think there will certainly be cases where I would prefer not to work with Semantic UI. Semantic has a very recognizable style that works great for making an attractive page with minimal investment. However, trying to figure out how to override the defaults to change the behavior to a specific appearance was sometimes challenging and frustrating. I could never get my container contents to center never worked right, which again is probably more due to my inexperience. Perhaps the ease of implementation for the majority of other Semantic UI elements adjusted my expectations, but the amount of troubleshooting that went into trying to get some aspects of my webpages to work the way I wanted definitely had me pulling my hair at times.
Overall, I think Semantic UI is a great free option that provides many useful shortcuts to creating attractive websites that look on-par with other modern websites created for companies that can afford to pay top-dollar. However, the shortcuts also mean putting in some hours into figuring out how to modify the defaults if you want things to work differently, although that is true of any other choice for website creation. If web developement was my career choice, I think I would certainly invest that time to get really good at using Semantic UI, but I’m also interested to see what other options exist.