Five reasons why CSS seems to be hard at times?

A website may be built upon several web languages such as HTML, CSS, JavaScript, and PHP. 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. Among these languages, we may all agree that CSS is the easiest language.

But, you might not agree to know that, CSS could be the hardest language in certain cases. Here are 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 followed by a curly bracket, then the style declaration inside the curly bracket, and ending each line with a semicolon as shown below;

Many other web language editors return error when the code violate any rules. CSS doesn’t have any rules therefore errors will not be reported back. Any mistake you make will simply break your layout. To identify the error, you must have to go through the code from the very beginning to the end.

It wouldn’t be a big issue while considering a minor web project. But consider a larger web project with many CSS code lines, fixing an error could be a very big task.

2. TOO FLEXIBLE

CSS gives the user a lots of options to solve a certain problem, which at time makes the user difficult to get an appropriate idea of solving it. For example, to center an object with CSS. We can center it using a (margin, padding, flexbox or grid), but the center can vary according application, it can be center of the overall page layout, or could be a center of a part of it.

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 just fine. But this exactly what makes refactoring CSS tricky, especially on a large-scale website.

3. BROWSER COMPATIBILITY

Even when the code is perfect without any error, there are many chance that the browser cannot be capable of executing it. This could occur because of many different reasons such as the browser version could be too older, or certain CSS features cannot be supported by certain browsers.

4. CSS SPECIFICITY

Every CSS selectors have different levels of specificity. CSS specificity can be confusing, you need to be attentive when defining style-rules.

Example:

Both selectors shown above has the same selector names which means they hold the same specificity. So, the one that comes later overwrites its precedent.

The paragraph assigned with class will have the #000 color, as it is more specific (it’s position doesn’t matter).

5. CLIENT PERSPECTIVE

Each user have different perspective, you cannot satisfy every client but you need to meet every client need as much as possible. And you must consider every client feedback and improve the site.

Wrap Up

I hope you gain some knowledge reading this article about CSS.

If you have any questions, feel free to post them in the comments section.

Student of University Of Moratuwa