5 Reasons Why CSS Could Be The Hardest Language Of All

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.

Recommended Reading: 20 Useful CSS Tips For Beginners

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 mutiple CSS files with thousands of code lines.

2. No Variables

JavaScript and PHP allow you to store values in a variable. Having variables is a time saver, and it makes your codes more manageable. You can simply change the value in the variable rather trawl through the lines to make changes.

Unfortunately, CSS has no variables. I know that we have discussed CSS variable previously post, but it is still not applicable.

In the old days, most web designers commonly do the following to manage color schemes.

 /*======= color scheme ==========*/ primary #000 secondary #ccc text #333 hover #aaa

This approach, however, requires extra discipline on the implementation, 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.

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.