DEV Community

Josiah
Josiah

Posted on

Why does nobody seem to like CSS?

"CSS is annoying." A commonly used statement when reading forms and a very noticeable attitude that most people have.
In my personal experience, I've yet to find somebody that thoroughly enjoys CSS, otherwise known as Cascading Style Sheets. Granted, I haven't been in software development very long, a meager month; but thus far I haven't found anyone who enjoys writing this language. Since I'm newer to the world of programming I discovered the intrigue that this scenario held for me. In my learning, perhaps I can help others learn as well!

Before diving in, I'd like to cover a pre-supposition that I had and I'm sure others have had as well. When thinking, It's just styling so it should be easy, I couldn't have been more wrong. However, I don't think it's wrong if developers start with this mindset. At first glance, CSS does seem quite simplistic, in that the syntax is easy and declarations are easy to remember. Styling, however, makes or breaks how your page looks, and sometimes how it functions. It is one of, if not the most, important part of a website.

Section 1:Intricacy

So if CSS is so annoying then why? The first thing I would say is intricacy. What makes CSS so intricate is Pixel count; a common declaration method that is quite tedious. In order to use it you have to be incredibly precise. If you're off by just one pixel, you may break how your list scrolls from item to item. This necessity to be tedious usually leaves the developer feeling stuck over the smallest detail, getting frustrated and eventually giving up.

The way items work together is a little different compared to other languages. The amount of editing done to one item can change the way all your items work together. Altering spacing or margin often changes things permanently which, once again, leaves developers stuck with no idea on what to do next.

The !important operator ties into the last paragraph in that it will work with(or break) other items.

h1{
  color: red !important;
}
Enter fullscreen mode Exit fullscreen mode

The !important operator (or bang operator) is used to override styling declarations that may already be declared. This can often lead to breaking your code due to conflicts. It is generally taught that the bang operator should only be used if absolutely necessary since it makes conflicts. However, it is quite frustrating that some of the most useful code supplements can break things so easily.

Section 2:Syntax

Syntactically, CSS is quite easy to learn and use. You select the item you want to change and add the declarations for how you want to change it. Selecting is the easy part, the basic selector methods are quite simple to use and remember, especially since you use similar methods in JavaScript via querySelector. For example, you can select all level 1 headers.

h1{
 /*This effects all first level headers*/
}
Enter fullscreen mode Exit fullscreen mode

You can select all elements that are children of another element, like all paragraphs listed below any first level headers.

h1 > p{
  /*This selects any p element below all h1 elements*/
}
Enter fullscreen mode Exit fullscreen mode

For specificity, you can also select an element by it's id with a "#" or a group of elements by their class name with a ".".

.myClassName{
  /*This selects any elements that have the class name of 'myClassName'*/
}
#myId{
  /*This selects any element with an ID of myId*/
}
Enter fullscreen mode Exit fullscreen mode

These selectors can be combined to select very specific items. So instead of selecting all paragraphs beneath an h1 we can select only paragraphs with a specific classname or Id

h1 > p#myId{
  /*This selects any p element below all h1 elements*/
}
Enter fullscreen mode Exit fullscreen mode

You can combine all of these selectors to become incredibly specific

h1.myClassName > p#myId.myClassName > em{
  /*This will select any emphasis tags underneath a p with an 
  id of myId and a class name of myClassName underneath an h1 
  with a class name of myClassName*/
}
Enter fullscreen mode Exit fullscreen mode

We can get really specific but those examples are pretty much the limit we can go to with our element selections. Remembering how to select is easy which could be one reason to love CSS. Although, if you are too specific you may change fewer elements than you meant to, just as if you aren't specific enough you will change more elements than you intended to.

The way you select and style elements requires a lot of trial and error. Who likes failing again and again in quick succession? Nobody does. The way selectors work in combination with certain declarations, like pixels and percentages, lead to this trial and error method of styling the same element for way too long until you can get the pixel count exact. Styling the same element for extended periods of time because you can't make it cooperate is probably the most frustrating part of CSS... Remember it's supposed to be easy, right?

Section 3:Final Thoughts
While it's common for people to dislike CSS, I believe it's one of the most important parts of any website. If a website looks terrible who would want to spend any time on it? There are supersets such as SCSS and SASS. Newer developers may not know about them or how to use them. I can imagine this turns a lot of newer developers off to CSS unless it clicks for them right away. Altogether, CSS has it's trials, but if it is a weakness, a good developer will improve their skill to eliminate that weakness. Like everything in life, it just requires practice and patience.

Top comments (0)