Why do [most] developers hate CSS?
What every developer needs to know about modern CSS.
For some time now, I have been reading and hearing a lot of people complain about CSS. I have come across a lot of discussions where front-end developers express their discontentment with how the industry devalues their skills. While browsing through one of the threads discussing this, I came across this reply which I found interesting:
I liked the quote even more because I think it applies to everything we do in life, not just programming. If we find someone passionate about their craft, and they teach us, we are more likely to enjoy the process and maybe even, develop a love for it.
I have gone through most of the recurring reasons people give to justify their hate for CSS. I would like us to go through some of them:
1- “It’s hard to debug.”
Let’s say you have created your HTML structure and confidently added rules in your stylesheet. However, you refresh the page and the UI is broken or your changes are not reflecting.
When it comes to debugging, the developer console is your friend. This article gives a simple guide to troubleshooting CSS. Developer Tools for designers is also an awesome read with tips to master the console. Let’s have a look at some recurring cases that frustrate developers:
Overflow
How many times have you had to fight with an element overflowing on the page? You can use this old-school snippet to visualise the boundaries of every element on the page and help you catch the misbehaving element:
The outline property can also be used to debug accessibility issues. For example, it can be used to help check for missing/empty alt tags on images that are not decorative.
The outline property is also crucial in giving a visual indicator of focus to users. If you have disabled outline anywhere in your stylesheet with outline:none; without providing alternative styling, you are probably hurting your site’s accessibility.
Positioning
One of my first ‘Ah ha’ moments with CSS was when I got to understand absolute positioning for centering. Now Flexbox and CSS grid make things easier, but let’s try an old-school trick to vertically and horizontally align an element.
.parent-div{
position:relative;
height: 100vh;
width: 100%;
}
.element-to-align{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-right: -50%;
}In the snippet above, it’s very important that the container (in this case, .parent-div) has its position set to relative. I am using 100vh for the height and 100% for the width to create a full screen section, but feel free to modify these values.
The div to center has its position set to absolute. That puts it in the top left corner of the parent div. We want to center vertically, so we use a percentage value of 50% ( top:50% : places the content halfway down the container, in other words, at half the height of the .parent-div). We use the same logic to center the content horizontally ( left: 50% : places the content at half the width of the .parent-div). The transform: translate() moves the content up by half its own height, and towards its left by half its own width.The margin: -50% allows the content to span the full width of the container,
Alternatively you can use Flexbox like on the snippet below:
Other concepts that are sometimes difficult to grasp relate to the box model, the difference between displays (block, inline, inline-block), spacing, pseudo-elements and other fundamentals of CSS. I have come across a great article that nicely explains these concepts: https://cssfordesigners.com/articles/things-i-wish-id-known-about-css
2- ”Css is hard to understand”
CSS — Cascading Style Sheets.
One of the key concepts of CSS is specificity. Some of the reasons that your new rule is not being applied could be that there is a more specific selector taking precedence over it. Applying !important is not always the quick fix and can make it harder to update existing styles.
Specificity determines which styles apply to an element when more than one rule could apply.(Src) The more specific a CSS style is, the more likely it is to take precedence over any other style applied to the same element.
A nice article I came across, written by Emma Bostian, explains how to determine CSS specificity with a lot of great examples and a specificity calculator. You can read about it here: https://dev.to/emmabostian/css-specificity-1kca
3- “Browser compatibility/support”
This has been a big issue for many years, with developers needing to include additional rules or hacks to ensure their CSS would work on all major browsers. However, a lot of progress has been made in the dev community to bridge the gap for browser compatibility.
In case you wonder if a certain property has browser support, you can use a tool like https://caniuse.com/ .
4- “Too many CSS frameworks”
CSS frameworks can be very useful to speed up development time. However it’s still crucial for developers to understand the fundamental of CSS and be able to create UI with plain CSS. One personal challenge I worked on years back was to redesign the Google homepage without any CSS framework. It helped me carefully plan my HTML structure as well as get my hands dirty with positioning.
I recently came across the profile of Gertrude Nyenyeshi, founder of Accessibility Africa, who has given herself the challenge to redesign popular apps UI with only HTML and CSS and the result is remarkable.
Practice makes perfect, so if you consider yourself an “advanced beginner”, why not take on a similar challenge or practice building more advanced UI using the latest CSS technologies. The dailyUI challenge has a big community support and you can get encouraged by seeing what others do.
5- “CSS is repetitive and boring”
CSS has its own coding standards for maintainability and scalability. You can organise your code with Sass and BEM. CSS allows you to make use of variables and functions. This site by Adam Silver teaches you how to write modular, scalable and maintainable CSS. You can also browse StyleStage for a showcase of modern CSS properties.
Furthermore, CSS is more than just writing a set of rules. A lot of CSS developers can delightfully manipulate SVG, typography and spacing; they understand colour theory, animations and accessibility.
I have come across a lot of awesome work created by enthusiast front-end designers that showcase the amazing things CSS can do:
Final words
I love CSS, I love seeing beautiful interfaces and I am even more impressed when the designer has put a great deal of attention to details. I think CSS is awesome. And I appreciate all the work front-end and UX engineers do to make the web more accessible and responsive for all.
What is your take? Do you love CSS? Why or Why not? I would love to hear.
