DEV Community

loading...
Cover image for Why Most Developers Fear CSS

Why Most Developers Fear CSS

steffenpedersen profile image Steffen Pedersen ใƒป4 min read

When I started at my job, we where two front-end developers at my team. It was me and a senior front-end developer. Then the senior front-end developer quit his job, I was the only front-end developer at my team. And it was fine. I did my job, and there was no harm. We had some job interviews, but we did not meet the right fit. The time went by, and then it hit me: I was the only one knowing anything about our front-end. The bus factor was at one, which is not a good number in this case. Why? If I get hit by a bus, the project will be in a bad situation.

I then talked to my boss, and we came to the agreement, that we all should be responsible for the front-end. The work could be done in pair programming. At least until we would find the right match. I thought that was a great idea. I had a total burnt out from working alone on the front-end.

We then presented the idea, and the first reacting was fear from the other developers. The fear was mostly concerned about CSS.

Why do developers fear CSS?

I talked to the other developers about why they fear CSS. The first thing brought up was cascading ๐Ÿ˜ต What if they make changes to one class, that will effect five hundred other elements?

The next thing brought up was support of browsers ๐Ÿ’ป What if they implement something, that isn't supported in some browsers?

The final thing was building something from the ground up ๐Ÿก What if they make something, that isn't solid and doesn't look good?

Cascading ๐Ÿ˜ต

This is one of the biggest fears. When other developers are talking about this, I guess they are talking about many things. It is both importance, specificity, source order and how properties inherit from different rules. The styling can be specified in many different places, and it can interact in complex ways. This is why CSS is so powerful, but it is also the reason why, it can be confusing and difficult. The cascading can be a devilish thing, if you donโ€™t know the rules of how selectors can overrule other selectors ๐Ÿ˜ˆ

Importance

This is a well talked subject. We all know, that it is (in most cases) bad to use this little helper. This is because !important will always win ๐Ÿ†

Specificity

Specificity is basically a measure of how specific a selector is. Like, inline styling is the most specific, then #id, then .class, and then the element. From there, the specificity can be measured in a million different ways. If you have doubts, you can use a specificity calculator.

Source order

Source order is basically that later rules will win over earlier rules. If you write a selector with a property and a value, and then later on write the same selector with the same property - but with a different value. What will then happen? ๐Ÿค“

Inheritance

Inheritance in CSS is both simple and tricky. It can be explained in this way: Some property values applied to an element will be inherited by the element's children, and some won't. Doesn't that sound great? ๐Ÿ˜ต CSS properties like font-size and color do inherit, and properties like margin and padding donโ€™t inherit. I guess that you will have to use common sense in this one. If margin would be inherited, it would cause a huge mess! You could use MDN as reference.

Browser support ๐Ÿ’ป

Unless your client is a company that only support Internet Explorer 6, you shouldnโ€™t worry that much. Most users are using modern browsers with great support of CSS. If you feel insecure whether you should use a specific property, then you can check it out at caniuse. If a browser doesn't support the property, but you really want to use it, then most browsers @supports the CSS at-rule of the same name. Then you can make a fallback solution.

@supports (display: grid) {
  div {
    display: grid;
  }
}

Building something from the ground up ๐Ÿก

This is mostly about the communication between designers and developers. The communication is not always that great. Sometimes the ambitions of the designers can be too high in relation to the company's wallet and the developers' skills - or what is actually possible.

The point is, that we as developers should be more integrated in the design process, so we all can fell comfortable with the outcome. With that being said, if the developer feels comfortable with the design, then it will be easier building it from the ground up.


I hope this wasn't a bunch of nonsense. I just really want to tell other developers, that doesn't work with CSS on a daily basis, that CSS isn't magic โœจ

Thank you for your time!

If you liked this, then please โค๏ธ and follow me on Twitter.

Discussion

pic
Editor guide
Collapse
ctrlshifti profile image
Kat Maddox

Good article! I'm mostly a back-end developer, but I do guerilla front-end when I have to. Can confirm it scares me.

Collapse
katsanos_george profile image
George Katsanos

Exactly the type I'm describing over there :) dev.to/katsanos_george/the-real-re...

Collapse
steffenpedersen profile image
Steffen Pedersen Author

Thank you so much! Maybe it is a good thing being scared sometimes. Okay, Google can't help me on this one. How are guerilla and monkey work different? ๐Ÿค”

Collapse
ctrlshifti profile image
Kat Maddox

Haha, by guerilla I just mean that I rush in and rush out and do a very shoddy job :)

Collapse
abesamma profile image
A.B. Samma

!important

Hush. We do not speak of it.

Collapse
steffenpedersen profile image
Steffen Pedersen Author

Shh! The rule that must not be named. The unspeakable rule.

Collapse
ikirker profile image
Ian Kirker

At some point someone's going to have the bright idea to add in an importance factor, like Z-ordering, and further insanity will ensue.

Thread Thread
vuild profile image
Vuild

Oh, I need this.

Collapse
brandelune profile image
Jean-Christophe Helary

It looks like most of the fears are based on lack of knowledge. Knowing how selectors work, what is their priority, is like knowing that x has priority over + and you don't need to put parens there, for ex. Browser compatibility may be an issue, but it's not like there are no solutions that are clearly documented. So it all boils down to know your tools, I guess. Knowledge being the best cure against fear :)

Collapse
steffenpedersen profile image
Steffen Pedersen Author

I completely agree. There are just so many developers having a biased opinion on CSS. And there are so many with a bad attitude. I think I will use the saying that knowledge is the best cure against fear ๐Ÿ˜ƒ

Collapse
brandelune profile image
Jean-Christophe Helary

Jeg mรฅ ikke frygte.
Frygt drรฆber sindet.
Frygt er dรธdens forlรธber, der medfรธrer den totale udslettelse.
Jeg vil gรธre front mod min frygt.
Jeg vil tillade den at gรฅ forbi mig og igennem mig.
Og nรฅr den har passeret, vil jeg vende mit indre รธje mod dens vej.
Hvor frygten gik, vil intet vรฆre. Kun jeg vil vรฆre tilbage.

Collapse
tchaflich profile image
Thomas C. Haflich

I ended up falling into mostly frontend work because nobody else seemed interested, and the work needed to be done. I think CSS is why. Backend work seems more "pure".

Trying to make things work cross-browser isn't as bad in the old days, but it's still a hazard to watch out for. Safari is usually the biggest problem IME, despite all the jokes about supporting IE.

Collapse
steffenpedersen profile image
Steffen Pedersen Author

Safari is the new Internet Explorer ๐Ÿ˜‰ I am not even joking that much.

I think we will see a huge change on browser support in the future. There is a new thing called CSS Houdini, which will try remove these issues.

Collapse
mindplay profile image
Rasmus Schultz

Houdini is actually one of my greatest CSS fears.

I'm afraid that, even if this allows you to seamlessly roll out a new type of layout rule, all this will create, ultimately, is more fragmentation in the ecosystem.

The thinking and strategy appears to be along the lines of "Just throw more JavaScript at it", which, time and again, tends to go all kinds of wrong.

CSS, like JS, is already bloated and messy, struggling to be all things to all people. Now CSS won't even be declarative in nature anymore - it'll depend on JS, and the two will fuse into a giant, hairy ball of mud.

With Web Components fusing HTML with JS, what used to be declarative, semantic markup is now unreadable gibberish - this will do the same for CSS.

The web used to be a homogenous, human-readable medium. Now every webpage will use it's own version of HTML and CSS, and no two sites will look the same.

I used to be optimistic about the web - but now, there are definitely times when I think HTML, CSS and JS are all f_cked beyond repair, and maybe we just need to start over with something much simpler that actually does what we need.

Thread Thread
codemaster74 profile image
Alexis Rios

You are correct 100%. All used to be simple and uniform and clean. Now all is a big mess and super fragmented.

Collapse
pogpog profile image
pogpog

A lot of back end devs I know have little love for CSS for the simple reason that you had to write so much garbage for so long. Things are pretty different now with browsers at least trying to agree on how they interpet things like CSS. The legacy of internet explorer, and its refusal to align with other browsers, meant that a lot of what you had to learn and implement were just fixes and patches that could well be irrelevant a year or two later. Compare that to learning coding theory that will still make sense years later or with a different language and I can appreciate that many back-enders are more "reluctant" (rather than scared) to tackle front end coding.

Collapse
steffenpedersen profile image
Steffen Pedersen Author

You are so right! There has been so much development on CSS for the past few years. I do understand why some developers are reluctant to work with CSS.

Collapse
mikeschinkel profile image
Mike Schinkel

I am a backend developer and I have no fear of CSS. I just find CSS to be a horrific fractal of bad design (yes, I stole that phrase from elsewhere.) It is a damn shame that those who designed CSS did not have more foresight.

So I am a backend developer by choice because I would prefer to spend my time building buildings rather than digging holes in quicksand. #justsaying

Collapse
steffenpedersen profile image
Steffen Pedersen Author

How is CSS bad designed?

Collapse
mikeschinkel profile image
Mike Schinkel

Lack of ability to encapsulate. Working with CSS on even a moderate sized website is like programming a large complex application in a programming language that only supports global variables. Which is bad with one developer, but far worse when there are many working on the same project.

Thread Thread
steffenpedersen profile image
Steffen Pedersen Author

You are able to encapsulate. I often use the architecture ITCSS with naming convention BEM ๐Ÿ˜ƒ I use it at a large company, and it's easy for other developers to wrap their head around the concepts.

Thread Thread
mikeschinkel profile image
Mike Schinkel

Actually, you are not able to encapsulate in CSS. What you are talking about is like the ostrich sticking its head in the sand so it cannot see its potential attackers. But its potential attackers can still see it.

The problem with "encapsulation" in CSS is it only works when everyone on the project uses it and uses it the same way. There is no way in CSS for me to write a "module" (for lack of a better word) that someone else cannot override and break with later CSS.

Yes, if you are using CSS you should absolutely employ (something like) ITCSS and BEM, but those are merely ways to reduce the pain of the symptoms of the disease, they do nothing to cure the disease itself.

Collapse
iamschulz profile image
I am Schulz

Regarding the title pic: as a front end dev, I'm pretty scared of floating :D

I was left as the only dedicated front end dev in a company once too. It didn't decrease the bus factor to 1, since we exclusively worked with a 3rd party product, but I felt that I was the only one thinking about innovation in our front end.
I talked to the boss and got the permission to have internal workshops. Turns out, if you take the time to explain flex or svg hands-on, most back end guys can comprehend it pretty quickly and take their knowledge to production.

Collapse
steffenpedersen profile image
Steffen Pedersen Author

I love hearing stories like this one ๐Ÿ˜ƒ You are right. I have also explained CSS to back-end developers. Most of them have learned the basics of CSS in school at some point.

Collapse
cschliesser profile image
Charlie Schliesser

I'm finding more and more new developers see CSS as voodoo. At first this didn't make sense to me, but the points you bring up are the root cause. If you didn't cut your teeth on inline style attributes, and then get CSS support, and then start working on old browser compatibility bugs... a lot of it just doesn't make sense. It's almost a series of stepping stones, and those of us that experienced them when they were laid know what to look out for โ€“ everyone else is just constantly getting "gotcha'd" and it's got to be very offputting.

Collapse
prahladyeri profile image
Prahlad Yeri

The biggest fear comes from the fact that debugging or troubleshooting isn't easy with CSS especially when complex layouts and things like floats and transformations are involved.

Add to that the fact that you can have responsiveness, various levels of styling (external sheets, <style> tag, element property) and browsers can also have subtle differences in rendering, it easily gets mind numbing!

Front-end debugging with html/css is still an evolving science compared to back-end debugging which is quite straightforward in comparison.

Collapse
tyrrrz profile image
Alexey Golub

Great article. I wouldn't use the word "scares", but I have a hard time picking names for classes, especially when there are child elements or wrappers involved. Somehow I don't seem to get that problem in backend context very often.

Collapse
steffenpedersen profile image
Steffen Pedersen Author

I think naming in general can be tough ๐Ÿ˜ฒ In CSS there several different ways to help organising. There are ITCSS and BEM, which combined is called BEMIT. There is also Atomic CSS, which I haven't tried out yet ๐Ÿ˜ƒ

Collapse
tyrrrz profile image
Alexey Golub

I have only heard about BEM so far, I'll look into others. Thanks :)

Collapse
zuhriutama profile image
Ahmad Zuhri Utama

i'm backend dev. i can write CSS but to build good and nice web from scratch is hard. that needs skill as same as backend build database structure and CRUD.

from my point, the scare thing is when write CSS from scratch and when you have complex element and you find something wrong with the CSS that the element not displayed properly. there is no error log and you cannot debug it.

Collapse
steffenpedersen profile image
Steffen Pedersen Author

I remember building something from scratch was really tough in the beginning ๐Ÿ˜ƒ There are some tricks to help you debug CSS. With linting you can catch more obvious errors. But no, plain old CSS doesn't give you much help ๐Ÿ˜ƒ

Collapse
techiev2 profile image
Sriram Velamur

This is a lovely read Steffen. Thanks for it.

As someone who has been kept away/kept myself away from CSS, can vouch for both how easy and how important it is to understand stuff like specificity/cascading after building something from scratch with plain grids and mental models of the concepts above.

Good job :)

Collapse
minid profile image
Minide

Actually, the main problem of CSS is the metodologies we use to develop. They force us to do mistakes and technical debt. Over the time, anything becomes unmaintainable. That's where the functional CSS shines all over you minid.net/2019/04/07/the-css-utili...

Collapse
comaldave profile image
David Skinner

Great article, right on target. We use SCSS 4.6 with Wellington preprocessor SMACSS compliant. GoHtml5 templates. No JS now with WebAssembly. CSS can now be well organised and reusable, it is a different world.

Collapse
steffenpedersen profile image
Steffen Pedersen Author

Thank you! A lot have happened in the past few years ๐Ÿ˜ƒ

Collapse
sudo_kaizen profile image
Orim Dominic Adah

This certainly was worth the read. Very true, especially the part about changing something somewhere an it affecting many other parts. Even though I had these fears, I really couldn't have put them into words as you've done. I just use frameworks and learn enough to do what I want that those frameworks I use don't do.

Now I know what my exact fears are, I can face them

Collapse
steffenpedersen profile image
Steffen Pedersen Author

Thank you so much ๐Ÿ˜ƒ

Collapse
ut4utc profile image
ut4utc

was helpful. I did not know about @support, although I constantly work with css, there is nothing complicated at all (well, except for the latest fashionable innovations such as transition and others, where you can already just program the interface behavior - yes, itโ€™s confusing and complicated if you donโ€™t constantly practice track the latest trends.

Collapse
leob profile image
leob

What I disliked most about CSS was layout, but with Flex and so on that's improved a lot. But before the modern layout techniques (and even still, I have to confess), I often had a hard time understanding why my layout was broken. Even when looking at Chrome Inspector it often wasn't clear who or what was the cause!

On the other hand I'm surprised to hear that cascading is such a big deal, because most devs are familiar with inheritance as a concept.

Nowadays what I fear about CSS is its sheer complexity, just the huge size of the "API surface".

Collapse
martinstreicher profile image
Martin Streicher

Box model? Grid? Float? How does this darn thing work? I can't make CSS do what I want easily. That's my issue.

Collapse
steffenpedersen profile image
Steffen Pedersen Author

MDN Web Docs often has some great examples. But I know the feeling ๐Ÿ˜‰

Collapse
steelvoltage profile image
Brian Barbour

Man, I feel like the opposite, with design Since I don't have someone handing me a design, coming up with or thinking of one is hard. I'm comfortable with very basic designs, and those will get the job done, but they don't really stand out.

I guess it's a weakness I hope to shore up. But, I often feel caught between where to spend my time. Learn more design oriented skills, or more programming oriented skills. Never enough time in the day, I suppose. It sucks.

Collapse
theodesp profile image
Theofanis Despoudis

I think mainly because IT TAKES A LOT OF FREAKING TIME to do stuff with CSS. It's like programming in Assembly. Horrendous.

Collapse
steffenpedersen profile image
Steffen Pedersen Author

It really depends on what you're making. But yes, it can take a lot of time ๐Ÿ˜ƒ

Collapse
xas7wcrg9e profile image
Paul Herring

Is it really necessary to insert emojis in the text of such an article? It's very distracting, and detracts from any serious points it's trying to get across.

Collapse
steffenpedersen profile image
Steffen Pedersen Author

Thank you for the feedback. I will reduce the amount of emojis in the next article. I was going for a more informal tone.

Collapse
bennypowers profile image
Benny Powers ๐Ÿ‡ฎ๐Ÿ‡ฑ๐Ÿ‡จ๐Ÿ‡ฆ

Most developers like CSS

It's a vocal minority that casts shade.

Collapse
steffenpedersen profile image
Steffen Pedersen Author

I think you're absolutely right.

Collapse
mohammadhaydar0 profile image
Mohammad Haydar

CSS is magic and I love it. but it's not rocket science.

Collapse
mrjozzi profile image
Joz

Nice overview, thigh there is one failing... Css IS magic ๐Ÿค“๐Ÿ˜‰๐Ÿ’ซ

Collapse
steffenpedersen profile image
Steffen Pedersen Author

We're not developers. We're magicians ๐Ÿ˜‰๐ŸŽฉโœจ

Collapse
jijii03 profile image
lincey.J

good article ! i love CSS is so fun to use it ! i think the lack of knowledge make developper in general fear CSS

Collapse
steffenpedersen profile image
Steffen Pedersen Author

You're so right ๐Ÿ˜€

Collapse
fengerzh profile image
Buzz Zhang

I'd prefer they fear CSS rather than writing lots of !important.

Collapse
adilmae profile image
adilmae

it's about time before we see another system to replace it..

Collapse
katsanos_george profile image
Collapse
floroz profile image
Daniele Tortora

I think most back-end dev are scared on what CSS used to be, not knowing what you 'actually can do with it' now.

Collapse
nailsonlinux profile image
Nailson Landim

I see CSS much alike iptables rules.