The reason I don't like CSS is because (strictly as a programming language) there are a lot of things that make it difficult to reason about and to use.
Everything is global, without an easy namespace protection.
It's hard to keep track of where classes are defined, and what priority they are given. As projects grow larger, different developers might need different definitions for .button but the browser can only access one at a time. How it "chooses" which .button attributes to use, and which to ignore can depend on a number of factors - order they're defined, specificity, the !important flag. This is one of the reasons you have the BEM syntax, which is very effective, but isn't a problem in other languages that have scope and encapsulation.
It's difficult to reason about layers.
Unlike Photoshop, you can't just position layers relatively. Strictly speaking, you can, but again, this requires understanding those pesky rules on what gets rendered first, the position attribute, etc. The "easiest" way is to use the z-index property, BUT since z-indexes are (as mentioned above), global, it can be difficult to keep track of what goes where.
The debug tools are not as good as other languages.
What I would give for some sort of tool that allows me to set breakpoints in CSS, that allows me to see what is getting loaded, in which file, in which order, where.
Don't get me wrong. There absolutely is a need for design on the web - and CSS was an amazing breakthrough in the late 1990s, but I can't believe that in the 20 years since it's introduction, nobody's come up with anything better for layout of web pages, only different ways to create the same hard-to-reason, hard-to-debug CSS code (Sass, Less, CSS-in-JS).
It's not that developers don't like CSS because they don't like design - but that the CSS language doesn't make design easy, it adds to the complexity of it.
My main focus is JavaScript specialising in frontend UI with React. I like to explore different frameworks and technologies in my spare time. Learning languages (programming and real life) is a blast.
Location
London
Education
Bachelor of Design Innovation in Media Design, Victoria University of Wellington
Namespacing and specificity are certainly challenges which need to be addressed in some way. I think there are certain rules that should be followed in larger teams to avoid these issues like BEM, avoid using !important etc. The specific issue of scope and encapsulation being present in other languages doesn't make it impossible to abuse in those languages, as programmers we just follow rules like keeping functions small and avoiding making too much public.
I haven't encountered many issues with layers though I understand the frustration. Complex layering is not intuitive with CSS and perhaps it's something that needs to be addressed. In modern CSS, I will often favour CSS grids to overlap layers effectively. I also follow a simple rule, HTML is rendered top to bottom and any 'layers' will be rendered back to front. The z-index is something to be used sparingly as there is often a way to achieve the same effect another way.
Although there is no 'breakpoint' like functionality in CSS, I think browsers have done an excellent job of providing great tools for debugging. It's improved significantly in the past decade.
Using the developer console in any modern desktop browser will show which rules are contributing to the final output and where they are coming from. (This screenshot was taken on Firefox inspecting dev.to)
You make some solid points as to why CSS isn't the easiest to reason about. What are some systems of design you find more comfortable to work with out side of the context of web development?
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
The reason I don't like CSS is because (strictly as a programming language) there are a lot of things that make it difficult to reason about and to use.
It's hard to keep track of where classes are defined, and what priority they are given. As projects grow larger, different developers might need different definitions for .button but the browser can only access one at a time. How it "chooses" which .button attributes to use, and which to ignore can depend on a number of factors - order they're defined, specificity, the !important flag. This is one of the reasons you have the BEM syntax, which is very effective, but isn't a problem in other languages that have scope and encapsulation.
Unlike Photoshop, you can't just position layers relatively. Strictly speaking, you can, but again, this requires understanding those pesky rules on what gets rendered first, the position attribute, etc. The "easiest" way is to use the z-index property, BUT since z-indexes are (as mentioned above), global, it can be difficult to keep track of what goes where.
What I would give for some sort of tool that allows me to set breakpoints in CSS, that allows me to see what is getting loaded, in which file, in which order, where.
Don't get me wrong. There absolutely is a need for design on the web - and CSS was an amazing breakthrough in the late 1990s, but I can't believe that in the 20 years since it's introduction, nobody's come up with anything better for layout of web pages, only different ways to create the same hard-to-reason, hard-to-debug CSS code (Sass, Less, CSS-in-JS).
It's not that developers don't like CSS because they don't like design - but that the CSS language doesn't make design easy, it adds to the complexity of it.
Thanks Brian, you make some great arguments.
Namespacing and specificity are certainly challenges which need to be addressed in some way. I think there are certain rules that should be followed in larger teams to avoid these issues like BEM, avoid using
!importantetc. The specific issue of scope and encapsulation being present in other languages doesn't make it impossible to abuse in those languages, as programmers we just follow rules like keeping functions small and avoiding making too much public.I haven't encountered many issues with layers though I understand the frustration. Complex layering is not intuitive with CSS and perhaps it's something that needs to be addressed. In modern CSS, I will often favour CSS grids to overlap layers effectively. I also follow a simple rule, HTML is rendered top to bottom and any 'layers' will be rendered back to front. The
z-indexis something to be used sparingly as there is often a way to achieve the same effect another way.Although there is no 'breakpoint' like functionality in CSS, I think browsers have done an excellent job of providing great tools for debugging. It's improved significantly in the past decade.
Using the developer console in any modern desktop browser will show which rules are contributing to the final output and where they are coming from. (This screenshot was taken on Firefox inspecting dev.to)
You make some solid points as to why CSS isn't the easiest to reason about. What are some systems of design you find more comfortable to work with out side of the context of web development?