The Emperor’s New Clothes

Anna-Marie Nauruschat
Sep 10 · 5 min read
Image for post
Image for post

While HTML being the skeleton of an app and JavaScript the flesh and muscles down to the bones, CSS corresponds to the clothing and styling of the software.

Just as we can pick a brand in fashion, we can decide on a CSS framework to put our frontend in an appealing robe. Nevertheless, it is trickier to combine different CSS tools than to decide on another brand for sweater and shorts. In the following I will compare three frameworks to style the look and feel of a software project.

This is not supposed to be a deep dive in each framework (if you are looking for such, you can find numerous excellent posts and videos on the web). This one will give you a brief overview based on a simple to-do list, to get an idea of the three selected styling options.

THE INLINE ACCESSOIRE TAILWIND CSS

Image for post
Image for post

Being a utility-first CSS framework, Tailwind faces some criticism across the community because it is based on inline CSS and creates a huge add-on to the HTML code as you can see below:

Image for post
Image for post
app.js

But: With the help of utility classes you can build your own styling components. The “utility” style of writing CSS name classes precisely according to their function. While common CSS rules such as BEM, Atomic Design naming and OOCSS group CSS styles based on their semantic appearance such as .nav, .form, .footer, etc., tailwind wraps the functionality to the naming of the class. .px-2 for example adds a padding to the top and bottom of the item and can be applied anywhere in the HTML where it is needed.

Image for post
Image for post
tailwind.css
Image for post
Image for post
Button styled with utility classes

In addition, using a tailwind.config.js file it is very easy to define unique customizations that can be used across all components.

By default, Tailwind uses a mobile first breakpoint system that can be easily adjusted and overwritten. Individual breakpoints can be set for every utility class in the framework and create a very responsive output. One big disadvantage is the bundle size which is about 1.6 mb for the simple todo app from my example above.

READY-TO-WEAR DESIGNS

Other advantages of Bulma are the fast to follow classes, an easy to use grid based on flexbox and an elegant default design.

Image for post
Image for post

Bulma provides different theme colors that can be easily added with dedicated classes and create a charming look across the entire UI. It is incredibly mobile-friendly and offers the .is-fluid class for screens of any size. By creating a customized SCSS file, it is easy to define colors, set fonts and overwrite the default styles.

To customize the classes, the SCSS file can be used to define reusable variables that can be applied to all components. See example below:

Image for post
Image for post
Image for post
Image for post
app.js
Image for post
Image for post

Material-UI currently counts 59.3k stars on GitHub, which mirrors its popularity among developers as well as the trend to use Google’s material design for frontend projects. The documentation offers many components with a very simple but appealing appearance and saves a lot of time and work by selecting and following one of the pre-designed themes.

As an additional value, the Material-UI look is inspired by textures and real-life physical appearances such as papers and cards, with a focus on surfaces and edges. Using Material-UI creates a consistent appearance but can also be customized and combined with own classes and defined values (if you are bothered by the need to add the “!important” reference to overwrite the classes, you can use the help of styled components as well). Furthermore, you can use the option to create individual themes and customize all design aspects.

Image for post
Image for post
Image for post
Image for post
app.js

WHAT I WOULD PICK FROM THE CLOSET

But if I had the time to put more effort into styling and creating an individual design, I would explore Tailwind CSS. Although inline styling has a pretty bad reputation, I feel that it holds some nice options to create a unique UI design by building your own library of customized components and classes. It might be a little more work, but it could be worth it.

Axel Springer Tech

Tech and product folks writing about their work across the…

Anna-Marie Nauruschat

Written by

Frontend Developer at Axel Springer Ideas Engineering

Axel Springer Tech

Tech and product folks writing about their work across the Axel Springer group: https://www.axelspringer.com/

Anna-Marie Nauruschat

Written by

Frontend Developer at Axel Springer Ideas Engineering

Axel Springer Tech

Tech and product folks writing about their work across the Axel Springer group: https://www.axelspringer.com/

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store