DEV Community

Cover image for Why CSS Frameworks might be a great choice for your next project
blindbat
blindbat

Posted on

Why CSS Frameworks might be a great choice for your next project

Alt text of image

What is CSS?

CSS stands for Cascading Style Sheets with emphasis on "style." At the same time, HTML is the structure of a webpage. CSS helps create the layout and designs of your project. Without CSS, websites would have trouble looking different from each other. However, using pure CSS is tedious and sometimes stressful to write.

<p> this is a paragraph</p>
Enter fullscreen mode Exit fullscreen mode

Alt text of image

How Does CSS Work?

CSS brings style to the webpage by interacting with HTML elements. Individual HTML tags can be considered small components of a more extensive application. CSS can take a p tag, for example, and change the element's color and size.

p { color: red; }
Enter fullscreen mode Exit fullscreen mode

Why Use a CSS Framework?

Personally, developing a small to midsize application with pure CSS can get out of hand fairly quickly. That’s why it’s crucial to practice and get accustomed to the code. It is a struggle for those who want a beautiful and functional website with limited resources and time. Until recently, I started my journey exploring several CSS frameworks through trial and error. I found what works best for me; however, choose which one is the best for you. Many people will debate on the best CSS framework to use, from Bootstrap with jQuery to Ant Design for React. Choosing the way you design your next project is important and, based on your timeframe, it can make or break your deadline.

Pros

  • If you are a small team developing an application with a CSS Framework, you can significantly spend up the development. Pure CSS can take up much time to create midsize to large applications, so that CSS Framework would be your best bet.
  • CSS Framework compatibilities are usually far superior then writing pure CSS from scratch because of the excellent developers working on it and the amount of time and knowledge to work for all browsers.
  • As time goes on, CSS frameworks continue to become widely adopted by large and small companies for production use; one example is https://www.ny.gov

Cons

  • Not all CSS frameworks are created equal. Even though talented developers are working on the framework that adoption or community may be affected by the sheer complexity, it's not that great.
  • Back then, one famous CSS framework called Bootstrap was known for its excessive use of unused CSS during production, possibly contributing to slowing down performance on your platform.

How to not use Frameworks in Small Projects?

  • Flex
    Since flexbox is a whole module and not a single property, it involves many things, including its whole set of properties. Some of them are meant to be set on the container (parent element, known as “flex container”), whereas the others are meant to be placed on the children (said “flex items”). (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

  • Grid
    CSS Grid Layout (aka “Grid”) is a two-dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces. (https://css-tricks.com/snippets/css/complete-guide-grid/)

Alt text of image

Conclusion

In conclusion, if you're trying to run away from CSS, unfortunately, there is nowhere to go. Pure CSS is a fantastic thing to learn, and having the skills to turn an HTML website into a beautiful website is a must. CSS frameworks make CSS a little bit more enjoyable.

Top comments (1)

Collapse
 
ravavyr profile image
Ravavyr

I'm gonna disagree here. Frameworks are great, when you're not very good at using CSS. For beginners, excellent. For admin tools, awesome, anything with simple layouts, forms and buttons, frameworks are great.

For creative designs and layouts, not so much.

Once you get the hang of CSS and your designs go beyond cookie-cutter layouts, using a framework just means you spend half the time writing rules to override the framework to get things to look the way you want them to.

Writing straight up CSS is just as fast as writing framework CSS, the only difference is you add padding, margin and dimensions to your elements, oh and your class names will be simpler and easier to remember. Eg. "slide-box" versus "box center p20 m40 yourmom90 etc etc".

The end result CSS will also be exactly what your wrote, and doesn't need to be compiled so when you look at a fronted element, you know exactly what it is and where to edit it. Six months down the road, future you will love that you know CSS and wrote it yourself so it's easy to read and follow.

my 2 cents, you're of course free to disagree.