Why css is bad

Layout calculations are expensive and a CPU can only do a limited amount of calculations. Often, less than one every 16ms, which will result in FPS under What is a modifier? A class, that you can add to another class and replace some of its properties. So, when you add. Easy peasy. Although, not every time it is so easy.

Sometimes, we want to overwrite a component, child of another component on a specific page. So we end up with something like this:. But what it turns out is that we can simply do. Shorter is better! Deep selectors are scary and people end up using! Now, of course, for a large application there would be a lot of styles, and that is completely understandable.

But is it always that large? Bad way of extending classes in SASS through mixins would generate large selector chains, which take a few seconds to scroll to see them all. A proper extension would reduce that file a lot. Could even double down the size. Included frameworks, of which only a few properties are in use are also a common reason for large files. Clean up, keep it tidy and only use what is really needed. Bootstrap, Foundation, UIKit and all other frameworks are great! They solve a real problem and are extremely valuable to the web development community.

But walk away from that case, start writing some CSS and you will hit a few problems. To include them properly means that you use only what you need. And to achieve any custom design, you will have to modify settings and properties. And then write some custom CSS. And that custom CSS to overwrite whatever the framework gives. You should give the content the freedom it deserves. You want to set the max-width to px. That way, the viewport will allow your site to remain responsive.

Now, the font-size, the content is what defines the size. And if the content inside grows, the element will not break. This way of thinking when defining sizes remains important throughout the whole application. And each property has to consider it.

If you had max-width, when your browser shrinks under that max width, the content will fill up the browser width and then shrink normally. Else, you would have to write a media query for that size. And then for any other custom size written on the site.

This is complexity added due to the bad approach. JavaScript can do wonders! The advice here is to look for CSS solutions first. No one. No comments? Actual code I wrote sometime ago but stripped out all comments? How smart, huh? Put your pride aside, and save yourself and other teammates the stress. The Land of Complex Selectors Yeah! Bad move. Just add a class to the element and get on with life!

Simple is good, almost always! Ditch That! But wait… I understand that computers have grown faster and browsers continue to be optimised. Chances are, you read through your selectors from left to right. They deserve your love. There are only 2 hard things in computer science.

Naming things and … Yeah, I think you already heard that somewhere. I Heard Classes were Great. Overuse them! When possible, avoid over modularised classes Classes are great, and everyone loves them. You see, if a group of classes will mostly be used together, just group them into one class.

Thanks for visiting DZone today,. Edit Profile. Sign Out View Profile. Over 2 million developers have joined DZone. CSS is essential for web development; however, it's difficult to get right for your average developer, who may have interests elsewhere in the stack. Read this article to avoid needling inconsistencies and adopt best practices.

Like Join the DZone community and get the full member experience. Join For Free. Developers have always wrestled with CSS for as long as I can remember. You've heard the disgruntled developer: "We just need to move it five pixels to the left, and