My first dive into the world of UI Frameworks has definitely been a frustrating and confusing experience. Though I believe that most of that comes from my inexperience with using HTML and CSS. I don’t know the ins and outs of them, such as priority, syntax, and all the details of using CSS, thus trying to overwrite certain Semantic UI properties have mostly been through a lot of trial and error. Since I didn’t write the code myself, I don’t properly understand how it interacts with every other element. Though this is mainly a problem with experience, since if I properly spend the time practicing and using it, I would be able to better understand how everything interacts with each other and be able to manipulate them to accomplish what I want to do. I also cannot deny the effectiveness of using UI Frameworks when I knew what I was doing. It’s essentially a pre-built library of code and that certainly speeds up the time it takes to write code, otherwise we would all be coding in 1’s and 0’s.
I like how using Semantic UI helps keeps everything in one place instead of spread around through multiple files. With Semantic UI, the wording of certain variations is simple to understand and implement, thus I didn’t need to go to my CSS stylesheet and change certain elements of that class, I could do it in the HTML file. That was definitely helpful when I needed to change the element, since all I needed to do was edit the class name to include the proper Semantic UI properties and viola I was done, instead of going to the CSS file and finding the corresponding the class to change it. An example is:
<Menu borderless attached="top" fixed='top'> </Menu>
This creates a menu on the top of the screen that follows the user as they scroll through the page. This ease of readability in the code means that if I have to look back on my project or if other people look at it, they would be able to understand how the menu is rendered by the code without having to find the class or id in the CSS file.
Though I must question the usefulness of it with every project. For smaller projects, it didn’t feel all that useful as the changes from using raw HTML and CSS to including Semantic UI weren’t much. It was simply changing the names of certain elements to follow the style of Semantic UI instead of writing those changes in CSS. It didn’t feel like I was taking advantage of all that Semantic UI had to offer. On the other hand, when doing a bigger project, it definitely felt more useful, since instead of creating a CSS class in order to define and change the properties of classes in my HTML file, I was able to replace most of them with a Semantic UI name. This helped keep the amount of switching between my HTML and CSS files to a minimum and keep most of the class properties together in the same spot. Which also helps other people in understanding your code, allowing them to modify or add on to it if thyey need.