Sticking WIth Pure CSS: Understanding The Benefit and Drawbacks Over CSS Frameworks
CSS
Cascading Style Sheets known as CSS by all developers are style design sheets used to control how markup languages like HTML and XML appear and function. Together with HTML and JavaScript, CSS is among the most significant internet technologies ever created.
The idea behind CSS was first conceived by Hakum Wium Lie a Norwegian web pioneer in 1994, his main idea was to allow web designers to change how their website way layout, font, color, and the whole design of the website.
The initial CSS version was developed in 1996. Everything was revolutionized by CSS, which allowed websites to transform from unattractive HTML pages into the most beautiful web designs the web has ever seen.
The First Frameworks
But, history has taught us that technological progress is genuine. As a result, more developers started looking for ways to optimize CSS, which led to the creation and publication of the first CSS frameworks. The purpose of CSS Frameworks was to build a library of pre-made styles to simplify the developer's life, by using a CSS framework, they can quickly design a user interface that they can reuse and modify throughout a project as opposed to beginning each one from scratch.
CSS libraries and frameworks started to appear in the mid-2000s. To assist site designers in organizing their content, these frameworks incorporated a grid structure. Most browsers were supported by the frameworks.
Some of the earliest CSS frameworks were
YUI Grids
Blueprints
960
<div class="yui3-g">
<div class="yui3-u-1-4">
<!-- Column 1 content here -->
</div>
<div class="yui3-u-1-4">
<!-- Column 2 content here -->
</div>
<div class="yui3-u-1-4">
<!-- Column 3 content here -->
</div>
<div class="yui3-u-1-4">
<!-- Column 4 content here -->
</div>
</div>
This code creates a grid with four equal-width columns using the YUI Grids classes yui3-g for the grid container and yui3-u-1-4 for each column. You can adjust the column widths by changing the 1-4 values to other fractions such as 1-2 for two equal-width columns.
With these new technologies propping up, we entered a new era of styling for the web, which made some developers give the new frameworks a chance with the promise of faster and easier development. Since then, a large number of contemporary, high-performing frameworks have been developed, some of which include
Bootstrap
Tailwind CSS
Semantic UI
Bulma
Foundation
<div class="bg-blue-500 h-screen flex items-center justify-center">
<h1 class="text-white text-4xl font-bold">Hello, Tailwind CSS!</h1>
</div>
This code creates a div with a blue background color that takes up the full height of the screen and centers the contents vertically and horizontally using the flex and items-center/justify-center classes
Nevertheless, in the realm of development, did these frameworks really take the place of the original CSS? My experience as a Frontend Developer prompted me to share some of my ideas on the subject in this essay, including whether they are genuinely superior to "CSS."
Benefits Of CSS
Being the best developer means you can write the most effective codes while adhering to crucial web development concepts that make your website optimized and excellent for your company and its users. This is one of the main principles of development. All this also means Following the original styling practices when it comes to styling the way your website looks. Some of these practices I have noticed throughout my work would be
Make it Readable. How readable your CSS looks is important
Organize how the style sheets are being written
Use not-too-ambiguous naming in your HTML or JSX code
And always avoid inline styling if you can!
Moreover, CSS has higher performance measurements, which speeds up the loading of websites. Making your CSS styles as brief as possible, dividing unnecessary styles into another page, or even creating a CSS sheet per page will help your style sheet load more quickly. As I've already stated, adhering to best practices helps you become a better developer.
Another fantastic factor that makes CSS the undisputed leader in web styling is its ability to let you adapt a design to your vision. This comes from the wide list of ways in which you can achieve the same thing. CSS gives you styling without limits, literally putting the design in your hands. The Best CSS developers take this incredible feature as a gift from the universe and make some cool web styles. What makes this interesting is that they can replicate the same website by using another means to achieve the same goal.
Look at the Illustration below of creating a Signup page with both the display: flex and the display: grid property. This and some other illustrations are where the true power of CSS lies.
.signup-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.signup-form {
display: flex;
flex-direction: column;
align-items: center;
width: 400px;
padding: 30px;
background-color: #f5f5f5;
border-radius: 10px;
}
While If you were to use display: grid; it would look something like this:
.signup-container {
display: grid;
place-items: center;
height: 100vh;
}
.signup-form {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, auto);
gap: 20px;
width: 400px;
padding: 30px;
background-color: #f5f5f5;
border-radius: 10px;
}
The animations that CSS enables its creators to reproduce are among its best features. You may easily go from one CSS style setting to another using animations in CSS. A CSS animation's style and a set of keyframes that depict the style's beginning and ending states as well as any conceivable middle points make up an animation.
The best things about CSS animations are that
You can create these animations without even knowing JavaScript
It lets the browser control the animation sequence which makes the browser optimize performance and efficiency lowering the animations running in tabs that aren't now visible update frequency
It runs even under slow and moderate connections. JavaScript animation has a defect in this area which make using animations in CSS a pretty good option
CSS Drawbacks
Since the beginning of this article, I have been extolling the virtues of CSS, but it is time to talk about what makes a one-letter bug in ten thousand lines of code to developers, and trust me CSS can be your worst enemy sometimes if you are not an expert in writing CSS code.
The time-consuming aspect of writing CSS code might just be frustrating as finding a bug in a code. From trying to create a layout for your site and trying to understand why this element Is not working the way it worked in my head (yeah I know that feeling). If you are not a CSS expert the time you would spend in writing CSS would be better off spending it on the functionality of your site. But this process of time consumption is one of the things that makes the best CSS developers. What I mean is that when you get stuck and spend hours trying to find a solution you tend to breeze through the same problem when next it is encountered.
One reason many dislike CSS is the steep learning curve it has for beginners. As I previously stated, CSS may appear easy from afar, but a newbie getting started with CSS may find it difficult. As I always said CSS is easy to use but difficult to understand. Even while writing this, I just watched a video about the CSS property display: grid, to understand some concepts, as they always say googling how to center a div is the best path to a good CSS developer.
CSS lacks prebuilt components and templates which makes developers work slower that make developer struggle to code every component and template from scratch. Some developers skip this by just going online and purchasing a template so as not to go through the process of writing code from scratch. Flexibility and freedom which make CSS incredible are what I would personally say it is also the disadvantage.
CSS Frameworks
For the majority of developers, frameworks save them from the tiresome effort that would have been required if they were creating CSS styles, and I tend to also have the same opinion, why waste so much time and energy writing CSS when the same job can be done in a much easier and simpler manner. Consistency, creating readable CSS classes, cross-browser interoperability, and responsive layout design are examples of these.
CSS frameworks like Tailwind, Bootstrap, and others give developers the chance to work quickly and repeatedly by giving them access to prebuilt elements and fully constructed website templates.
<div class="container">
<h1>Hello, Bootstrap!</h1>
<p>This is a simple Bootstrap page.</p>
</div>
Any front-end developer should be concerned about two things in particular. Time and efficiency come first, followed by browser compatibility. With these frameworks, all you have to do is write the HTML and then write the class of the already designed styles you want which in turn applies to your elements. Websites could be built in a short amount of time using frameworks.
Frameworks provide developers with a consistent way to structure their code, which also resolves the CSS issue of not knowing how Your styles will display in other browsers, implement common features, and achieve cross-browser compatibility. Compared to standard CSS, which can be notoriously challenging to get working consistently across many browsers and versions, this is a big advantage. Frameworks allow developers to take advantage of the knowledge of the framework's designers to guarantee that their designs are rendered uniformly across all target platforms. Particularly, pre-built CSS components and styles for use across a variety of browsers and devices are frequently included in frameworks.
It gets better, Frameworks come with already built-in responsive design features which makes your website adapt to different screen size and resolution. This has become important in today’s world where users are increasingly accessing web content from a wide range of devices.
CSS Frameworks Downsides
As you might have thought Frameworks are the best that has happened to developers’ eyes since UV light protectors, you might just slow down on that thought, and let’s go through why I think frameworks are not all they seem to be.
One of the downsides of using CSS frameworks is that they can result to slow web rendering, this happens as a result of the framework having already a large number of built-in styles which can add a lot to the code base of the website.
This might not be an issue for small-weight websites, as they have a literal small codebase to use, but large more complex websites or applications will be affected by the large number of built-in styles that will be loaded by the browser which will make the optimization slower. Also, some of these useless styles in the code will make it a tedious job for a developer in future edits to find what they need.
Before utilizing a CSS framework in a project, it's critical to properly assess the features and components contained in it to mitigate these problems. To reduce complexity and speed up loading times, developers should think about which features are necessary for their project and which may be safely omitted. Moreover, performance optimization methods like caching can lessen the effect that bloated code has on how quickly a website loads.
Another major downside of using Frameworks is that are massively dependent on the framework and all updates that come with it. When you are using a CSS framework you are receiving all functionality and styles from a third-party library, which means whenever a massive update is released, your codebase is especially affected.
To explain if you were using frameworks for your projects to meet your specific needs, any update released could break your code and then require you to rewrite the code in other for it to be fixed.
Furthermore, developers could be forced to use old or unsafe code that is challenging to update or replace if a framework is no longer supported or maintained.
<head>
<title>My Bootstrap Page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
The framework's acceptance, dependability, and continued support should be taken into account by developers together with their capacity for long-term codebase upkeep. Also, to maintain the security and functionality of their project, developers must be willing to commit time and resources to stay current with changes to the framework.
Choosing between CSS and The Frameworks
There is no definite answer to say which is better, the original language or the simplified versions. It all depends on the developers completely. Many people have suggested that it all depends on the type of project as well. And I also agree with that view, but a developer would be the one to determine what kind of technology to use no matter what kind of project it is. Here are some of the factors to consider between the two
Project requirements: Take into account the particular needs of the project, such as the level of design complexity, the ideal user experience, and the functionality needed
Cross-browser compatibility: Take into account the requirement for consistent project rendering across various browsers and devices, as well as the extent to which various development methodologies can accomplish this
Time and resources: Take into account the time and resources that are available for the project, as well as the knowledge and experience of the development team, the budget, and the target completion date
A developer can decide which course the project should go and select between the two using these considerations.
My final thoughts on why I choose to stick with CSS is the flexibility that I have to create anything I want, I can develop a one of a kind, highly personalized designs that are ideally suited to the requirements of each project thanks to the flexibility of classic CSS. I can completely customize the website's appearance using CSS without being constrained by pre-made elements or templates. As a result, I'm free to experiment with various layouts, typefaces, color schemes, and other design components to produce truly unique designs that stand out from the competition. By using CSS, I can write lean, efficient, and maintainable code that is optimized for performance and scalability.
Naturally, there are trade-offs to take into account while deciding between various development methods. While traditional CSS may provide greater customization and flexibility, it can also take more effort and knowledge to execute properly. Which approach is ultimately chosen will rely on the particular requirements of each project as well as the abilities and resources of the development team.