Let’s go back 15 years and explore what developers wanted to accomplish in the browser that was nearly impossible. We had to use a lot of frameworks and libraries to deal with browser differences, little standards, and basically no important features. Just a simple concept like the box model was implemented in one way for IE while Firefox had the standard one. Today, it is different and we take a lot of features for granted. Features in modern web browsers were not even in the imagination of developers that needed to do hacks and tricks for the page to look OK on different browsers.
Old CSS Frameworks
It was difficult to create basic two and three columns layouts using CSS. Floating elements were breaking the design and we needed to set a fixed width or use hacks like faux columns for the layout to work or use JavaScript to set the height of the element. The holy grail layout was nearly impossible with the CSS available in the 2000s. We spent more time clearing floats than coding the actual layout. CSS frameworks like Blueprint, Yahoo UI, and 960 solved the problem by giving us a grid created with floating elements. The problem is that it was still a hack since floating elements were not meant for creating layouts. Also, they were very restrictive in terms of creativity because you needed to follow the grid that was set by the framework. Not many changes could be done with your code to make it look as you wanted.
CSS Grid Layouts and Flexbox
Now we have CSS Grid Layout and Flexbox that allow us to do anything with want in terms of grid and alignment of the elements without having to use any external code. Trivial things today like centering an element on the page took a lot of work to do in the past. We are still scratching the surface of the power of CSS Grid Layouts and it is better than 10 years combined of knowledge in CSS prior to CSS Grid Layouts. By just adding a couple of lines of code to the page, it is possible to create a layout that can be reorganized as we wish without having to touch the HTML at all. You don’t need to change the HTML to change the order of the items displayed which is better for responsive web design considering that you will keep the important information visible even if it is not at the top of the page on desktop computers.
Other Areas
You might not remember but even round borders were a hack in CSS. You have to use Photoshop to slice the four corners of the element to later positing them correctly with CSS. Similar techniques were used for the box shadows while Internet Explorer did not support transparency on png files. Other techniques included JavaScript looking for those elements and making the proper changes. For modern web development, this is not a problem because they are CSS properties for these situations.
Let’s not mention animations. We had only JavaScript libraries or use vanilla JavaScript to modify the style of the elements. In some scenarios, an animated gif or no animation at all was used because of the lack of tools. Today, it is different, we don’t need a JavaScript library because it can be done in CSS with animations, transitions, etc.
Even the smooth scrolling to some elements on the page that was done in JavaScript (usually jQuery) can be done with just one line of code: scroll-behavior: smooth. And, don’t forget about CSS variables and CSS Nesting which bring CSS closer to a preprocessor. Additionally, there are other features in CSS that have reduced the libraries and frameworks used in the past like filters, shapes, and prefers-color-scheme.
Conclusion
In conclusion, what could have been implemented by frameworks and libraries in CSS and JavaScript, is done by little code in CSS. This means that the browser has simplified the life of developers by making those tedious tasks and useful features native, and reducing the code needed to achieve what is in the imagination of the designers. The little code needed also means fewer bugs code because it is less code that needs to be created while also making the site easier to maintain and helps the performance because less code is shipped to the users. We have the tools, we need to appreciate the hard work of the web development community for the advancements in CSS and the future version of this language.
