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?
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
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.
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.
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