Every website you visit uses Cascading Style Sheets (CSS) to add styling. There are a myriad of ways to add unique and creative styling to a website using CSS. CSS is often introduced to software developers where they write their own styles using vanilla CSS. However, CSS frameworks are quite popular and often used in lieu of vanilla CSS due to ease of use, and CSS frameworks can be time saving. With this in mind, the question often arises, “Should I use vanilla CSS on a project or a CSS Framework?” In my Tech Talk, I shared three considerations for software engineers to reflect on when deciding to use a CSS Framework to design and build their applications. How can developers utilize CSS frameworks to positively impact the user, achieve desired company outcomes and increase performance?
CSS frameworks can provide convenience, clean symmetrical layouts, and maintainable code
When considering user experience, it is important to start with the ethics of web design. The first thing to consider when thinking of user experience is the ethics of design. Each decision that we make as software engineers, we are making on another’s behalf, those we consider the client or the user. As software engineers we are not only designing routes, APIs, and buttons, we are designing experiences used by clients all over the world. We are creating solutions that are meant to keep users engaged and connected. This comes with responsibility in how we achieve this. Material Design, which is a design system created by Google, hascoined the phrase ‘digital wellbeing’ as the state of satisfaction you feel when technology positively supports your health, happiness, and prosperity. In an ongoing series of articles, Material Design explores the ways design choices – and design systems – can foster digital wellbeing. This can include layout of the page and ease of use that the client experienced (i.e., stress level in finding what they were looking for). If customization and more control over the design is a priority for the developer, developers can use vanilla CSS to style from scratch. However, vanilla CSS can be a little overwhelming to learn, thus leaving some developers feeling defeated after trying to simply 'center' an element on the page. Also, time and deadlines are major factors in deciding whether to use vanilla CSS or a CSS Framework, especially when working on larger projects. A few of the benefits of using a CSS framework is that it can be faster, as a developer is not having to worry about the intricate details of position and styling elements. CSS Frameworks also enable cross-browswer functionality, enforce good web design habits, and create clean/symmetrical layouts that create a product that is maintainable.
Material Design, a design system created by Google, has coined the phrase ‘digital wellbeing’ as the state of satisfaction you feel when technology positively supports your health, happiness, and prosperity. In an ongoing series of articles, Material Design explores the ways design choices - and design systems - can foster digital wellbeing. This can include layout of the page and ease of use that the client experienced (i.e., stress level in finding what they were looking for). Material Design helps software developer teams build high-quality digital experiences for mobile and for the web.
If customization and more control over the design is a priority for the developer, developers can use vanilla CSS to style from scratch. However, vanilla CSS can be a little overwhelming to learn and in deciding whether to use vanilla CSS or a CSS framework for larger projects, time and deadlines are a key factor. A few of the benefits of using a CSS framework is that it can be faster, as a developer is not having to worry about the intricate details of position and styling elements. CSS frameworks also enable cross-browser functionality, enforce good web design habits, and create clean/symmetrical layouts that create a product that is maintainable.
“It is important to remember that digital technology usage has the ability to either positively or negatively affect one's wellbeing." (Material Design, 2019)
Two Popular CSS Framework Choices based on Customization
- First, I will highlight one of the most popular CSS Frameworks in 2021. Remembering that with CSS, we have to write code from scratch, but with CSS frameworks developers are provided a ready to go component library. The world's most popular front-end open source CSS framework is Bootstrap. Bootstrap considers itself a mobile-first framework and prioritizes developing an online experience for mobile use before designing for the desktop users. Built in HTML, SASS, and JavaScript, Bootstrap not only has the world's largest community support but also has great JavaScript components with custom files that can be customized. Bootstrap is used by companies such as Walmart, Twitter, and Cousera. With a CSS framework like Bootstrap you are able to get a project up and started simply using one of their created components. For example, instead of having to write code for a form, Bootstrap provides a form component that includes a checkbox, button, and input fields. This can make the design process more convenient.
- A second popular CSS framework is known for its similarity to Atomic CSS and for being highly customizable. When using Bootstrap 5.0, you are able to customize some of the components, but some developers may argue that it is not with great ease. While the websites created using Bootstrap 5.0 look great, some developers also argue that Bootstrap components and sites can look repetitive or 'bootstrappy' (i.e., same roundedness of buttons, same color palette, layout of navbar) and thus they desire a CSS framework that is a little more customizable.
- Enter what developers call utility first frameworks, that offer more autonomy in design by using classes to build any design. Tailwind CSS is an example of a low-level-utility-first CSS framework and was first released in 2017. Tailwind CSS has no predefined styles, and thus there’s no need to override. If the classes provided aren’t enough (which would be a surprise, because the Tailwind CSS library is quite extensive) developers are able to add their own classes as needed. Another unique feature of Tailwind CSS is that it uses helper-classes that lead to custom design and unlike Bootstrap, there are no predefined components. So not only does Tailwind CSS offer more customization due to the use of utility classes, Tailwind CSS achieves the same results as styling with vanilla CSS but with far fewer lines of code. Lastly, another unique attribute of Tailwind CSS is that styling is achieved with a developer applying styles directly to an element in lieu of assigning a class name and then styling that class. This may look like inline styline to some developers, but it is not and the benefit is that instead of having to search thousands of lines of HTML and CSS, you can look directly on the HTML element and instantly get an idea of what each class’ purpose is. Remember that with Tailwind CSS each class does one thing (i.e., different colors, margins, paddings) but you can have many classes.
- Just imagine the benefit of using a CSS framework like Tailwind CSS for a website that is constantly evolving and has thousands of lines of code after a couple of years. When there is a necessary code change on such a website, the developer doesn’t have to write any new CSS, they simply change the classes applied to the HTML with no concern of breaking anything, and no issues with code duplication.
While both of the CSS Framework choices described seem like no brainer options to styling with vanilla CSS, there are cons to using CSS frameworks.
The Decision to Use CSS Frameworks or Not
CSS frameworks while very convenient can have cons as well. If a developer decides to skip learning vanilla CSS and simply use a framework, it can make it harder to understand what is going on under the hood if there is an error that needs to be debugged. Also, as mentioned prior, some frameworks can create websites that look 'cookie cutter' and look like a framework was used to build it, which is the opposite of what you want when trying to distinguish yourself for branding purposes and so forth. Lastly, there is the concern that over 90 percent of CSS in a framework like Bootstrap goes unused and it can lead to something known as CSS bloat. CSS bloat can affect the loading times of a website and we know that loading times matter because time is money! A recent research study found that an improvement in loading by even 0.1 seconds on a mobile site increased conversions by 10.1% and order value by about 1.9%. In this fast paced world we have about 10 seconds to grab the user's attention or they may not return to our site. Best practice in planning a project or new website is to create a performance budget at the beginning of a project that includes calculations such as speed index, seconds for page load, and server response time and consistently check the performance measurements. CSS is not completely responsible for these measurements of course but does play a part and in case of CSS bloat, a developer can minify CSS and purge unused CSS to decrease the file size. This would get rid of CSS bloat and improve the page load time. If a developer tries to purge and minify and it doesn't improve the overall load time or performance measurements, remember that perception is everything. Perceived performance is just as important and a developer can improve content visibility by only rendering items that are within the window until scrolling and this boosts rendering performance and keeps the user engaged until the rest of the page has fully loaded thereby helping to decrease what Google Analytics has termed the bounce rate. Performance of a developer's website is the second consideration when deciding whether or not to use a CSS framework.
When planning a project, consider performance when thinking of CSS
Best practice in planning a project or new website is to create a performance budget at the beginning of a project that includes calculations such as speed index, seconds for page load, and server response time and consistently check the performance measurements. CSS is not completely responsible for these measurements of course but does play a part and in case of CSS bloat, a developer can minify CSS and purge unused CSS to decrease the file size. This would get rid of CSS bloat and improve the page load time. If a developer tries to purge and minify and it doesn't improve the overall load time or performance measurements, remember that perception is everything. Perceived performance is just as important and a developer can improve content visibility by only rendering items that are within the window until scrolling and this boosts rendering performance and keeps the user engaged until the rest of the page has fully loaded thereby helping to decrease what Google Analytics has termed the bounce rate. Performance of a developer's website is the second consideration when deciding whether or not to use a CSS framework.
The third consideration I would pose when deciding whether to use a CSS framework in 2021, also has to do with human perception and is a part of color psychology. Color schemes are best planned at the beginning of planning a website not only because of a performance budget as we just noted, but because color psychology points out that each color is associated with a specific emotion or feeling. Color psychology tells us that the way that a developer designs and chooses color for buttons, backgrounds, and font color directly impacts a website's conversion rate. An example of companies using color systems to communicate to their users is the use of the color blue which signals loyalty and optimism for social networking sites (i.e., Twitter, Facebook, Skype).
In summary, when planning your next project as a software engineer remember these three considerations when thinking about CSS and CSS frameworks- consider ethics, human perception, and performance. Also, know that if you decide to use a CSS framework there are frameworks such as the widely used mobile first, Bootstrap framework and Tailwind CSS, that allows for greater autonomy in design and customization due to being a low-level utility first framework.
Blog written by Tiffany G., Codesmith LA Cohort 42