CSS Could Be The Hardest Language of All (5 Reasons Why)

A website may be built upon several web languages such as HTML, CSS, JavaScript, and PHP. Among these languages, we may all agree that CSS is the easiest language. CSS defines the website layouts, colors, sizes, and typography in a simple way. It is straight forward, and does not require logical or conditional function to use.

But, you might be surprised to know that, in fact, CSS could be the hardest language and very troublesome in certain cases. How could that be? Well, here are some of the reasons.

1. No Error Report

Every web language follows specific rules for writing code. When it comes to write style rules in CSS, it starts off with the selector’s name (usually class, id, attribute selectors), followed by a curly bracket, then the style declaration inside the curly bracket, and ending each line with a semicolon.

.class {
	color: #fff;
	background-color: #000;
}	

Some web languages strictly regulate the rules; otherwise, it returns errors, but not CSS. CSS does not output errors. You may have unintentionally removed a semicolon or curly bracket, or named the selectors wrong – and your layout breaks

In PHP, you will be informed of what the errors are, where it happened, and fixing it is a lot faster. In CSS, you are on your own, even if it is across multiple CSS files with thousands of code lines.

2. Too Flexible

Even though CSS seems to be easy to pick up, there are some problems in CSS that does not always have a direct answer, such as “How do you center an object?”.

There are a number of ways to center an object with CSS. We can center it using a margin, padding, flexbox, or grid. But the application will depend on what kind of center we would like to achieve, the overall page layout, the type of the object, whether it’s an image, inline or block element, a background, how the element is nested as well as the surrounding element position.

Scaling and refactoring CSS is also one problem that’s not so straightforward. Unlike a programming language, CSS syntax is declarative and flexible. We can apply CSS directly in the element, in the template, in a CSS file, or load it from an external site. You can easily add styles everywhere and would still expect your page to load “OK”. But this exactly what makes refactoring CSS tricky, especially on a large-scale website.

Refactoring CSS requires extra discipline, and you need to be careful when changing the color with find/replace as you might accidentally wipe out one that shouldn’t be replaced. As it does not throw any error, you often don’t realize it until one of your users send you a notice.

This is one reason we have dozen of CSS frameworks, patterns, and architectures to follow such as Bootstrap, Bulma, Sass, LESS, BEM, CSS-in-JS, and Utility-first to give developers set of strict guidance and rules to follow when composing CSS.

3. Browser Compatibility Nightmare

Browser compatibility is the biggest problem in CSS and is a nightmare for web designers in certain cases. Despite the published standard by W3C, browser vendors implement CSS specifications differently.

That is why websites like CanIUse.com exists – to see whether certain CSS features are supported in one browser version or the next.

When support for older browsers (like IE6 and IE7) is required – usually on a client’s demand – we could end up having to create multiple files and serve it through a conditional statement, then doing a bunch of CSS hacks to make the site look consistent and similar viewed on more modern browsers. At the end of the day, problem #1 will keep us trapped in this nightmare.

4. CSS Specificity

CSS selectors have different levels of weight/specificity. Let’s take a look at this example:

p {
	color: #000;
}
p {
	color: #333;
}

When two selectors with equal specificity hold the same styles, as shown above, the one that comes later overwrites its predecessor. But when we add class selector, say .paragraph, like so.

p.paragraph {
	color: #000;
}
p {
	color: #333;
}

…regardless of its position, the paragraph that is assigned with paragraph class will have #000 color, as it is more specific.

Frankly, CSS specificity is really confusing. You need to be attentive when defining style-rules. There might be one selector with a higher specificity which overwrites less-specific selectors, leaving you searching for the culprit for hours before locating it.

5. CSS vs. Your Client

CSS defines the website layout, colors and sizes and is closely related to the look of a website. Here lies the problem – design is subjective. Your client may have different perspective on the “look”, and may ask you to go with 1px today, and 5px the next day. If you are dealing with a client from hell, you are doomed.

"Can you make the red more blue? Revamp my logo but make it still the same? Make it a little bolder and darker, lighter and thinner?"

GAH! Smashing your head on the wall seems like a walk in the park when dealing with clients like these.

Wrap Up

CSS maybe simple and relatively easy to learn. But, we need to be disciplined and consistent so that it can become more manageable. Do you have your problems with CSS? Share them with us below.