In many communities i have been, exists certain dislike towards writing css, people get frustrated, or tend to settle towards a certain technology or strategy because it is what certain author says, or is just more comfortable
I will talk a little about myself, Im gracrys, you can call me hazy, i have been working for more than 5 years as UI designer and web developer, lately studying and practicing as UX designer, worked with many frameworks like react, vue, and my favorite svelte, but specialized on interfaces, on interactions, on what the user sees, you can know a little more about the differences between front end developers on the article called the great divide i studied css a lot, css frameworks from the inside, different html and css preprocessors and even advanced html and semantics, like when not to use a div for example, but thats another topic, and, css has become opinionated, so, in summary, im gracrys, and i make web layouts with floats.
Css has become opinionated
Now that i just dropped the scary headline, there is nothing bad with some technology being opinionated, most frameworks are, even javascript or html, but if you get used to those tactics and approaches, your tendency is to look over what you know, to repeat these approaches and struggle over creative technicalities. The design patterns exist for one reason, but they arent a bible to follow, you can adapt your algoritms to the language you are using and can work even better if you trust your capabilities.
And no, i am not a float css developer, i used other technologies too, but overcomplicating things when floats do the work is something you have to ask yourself, most of the time i have read "dont use grid because flex can do the work" and you have to use more steps, more lines, and two @medias to solve the issue.... No thanks. thats where the opinionated part comes, use what you know, and when it does fail, break the glass, and hack the part
hacking the code
"just set the image in absolute and -20 top and it does the work" for the sake of love no. Your code must be comprehensible and meaningfull, if you hack different things and drop different aproaches you are losing consistency, cohesion, your future self will get lost, and pray that something doesnt work. Learning how to solve an issue properly can save a lot of tape.
Trust your methodology
"Yes i use xx methodology, but i just staple some of this some of that and some hacks too"
Or imagine this case you are using certain framework, and your css sheets are full of some other methodology and classes that dont adapt together
methodologies exist after years of research of many people who colectively worked to make that strategy viable to most cases, so trust them, or better, question them. Whatever at the end you can work around them,but do it consistently
Why is css haaard?
Because you are dumb, and we all are. Learning a new thing is always hard, and css is something you probably never seen before, and can get out of hands really easy, practice makes perfection, learn what others people use, dont be afraid of checking others pages, and learn from your mistakes. And more important; take notes.
There are other things...
That i would wish to touch here, take risks, if your mentor, tutor, jedi, etc, uses certain things, ask him why, dont be afraid, he is just more accustomed to certain technologies, over scared of them, if you cant ask, look online, or try yourself, whats the difference.
Frameworks are for lazy people... No. after you get a certain level of knowledge, using certain framework can really agilize your work, and tailwind is nothing magical, imagine having all classes that you need, without writing and rewriting them, wow! thats a library, and you can even make your own, tailwind is an interesting case while it may seem like syntactic sugar, it can add to many classes that you dont need to your code, but using it correctly, oof, that can be rewarding
tl;dr: question your methods, and you results
Top comments (30)
It's the same reason that so few people hand craft SVG files: you have to be part designer, part coder when doing that.
To let the cascade work for you instead of working against it, you need to have a mental model of the structure you want to style. Most developers don't want to bother with mental models, they want styles to be one-dimensional and imperative.
Lastly, CSS doesn't feel like a programming language, so it's frowned upon.
I personally like to get the most out of the languages I use, so I'm in favor of using CSS correctly, but I can accept that other people don't want that.
Interestingly, this is exactly why I like CSS. It's very well adapted to its specific domain and has some very neat paradigms.
It's puzzling to me how some people would rather write a loop to set styles on individual element rather than just defining a rule and letting the browser do its thing.
Sometimes it really does seem to me like most developers who dislike CSS really just don't want to put in the time to learn it. Imperative programming is the type of hammer that makes everything look like a nail, and I just wonder why people are so fond of hitting their own thumbs.
We had that before CSS; it was called JavaScript Style Sheets (JSSS) and I think we're rather lucky it never made it standard.
I use CSS only because it's been forced on me. Kind of like Javascript was. At least Javascript is a real language. Visual Studio Code proves that.
Strange because a part of visual studio code is written in... CSS.
Yes they were forced too.
How would you know that? Have you asked all of them? Or are you just projecting your bias against CSS on them?
Not projecting any bias just stating a fact. If anyone wants style css MUST be used.
You could use tools like tailwind to reduce your direct exposition to CSS if you wanted to. It's not a dependency for vs code, though. So I'm not sure if your "fact" is actually factual.
It's a tool on top of css, developed because css is dumb. Have you ever asked 'why are there so many Css tools'?
It's actually a library that abstracts parts of CSS away, similar to MVC frameworks that abstracts away DOM operations. And there are far more (complex) JS tools than there are CSS tools.
And you're wrong, CSS isn't dumb, but simple, and the kind of simplicity out of which complexity may arise, which is why many developers don't like it, yourself included.
CSS is hard for most developers as they are used to IDEs autocorrecting your code, getting helpful popups when you do something wrong, etc. In CSS? You do something wrong, nothing. Trial and error is the main way to do stuff. You need to be designer and coder when you write CSS.
CSS isn't really straightforward. You don't have many algorithms to follow; most of the time you may have to eyeball it.
There are people who genuinely enjoy CSS. I wish I was one of them.
For properties, you usually get auto-correct. If you use CSS modules, you can even import class names to make sure they're correct.
CSS is easy to learn, difficult to master, which is frustrating once you learned but not yet master it.
Because css is a DSL, it is not a true language and has zero refactoring support.
DSLS were; at one time, everywhere and everything. Today they are relics causing the issues we see in css.
You must have a very interesting definition of "language", would you mind sharing it with us?
Again, what is your definition of "refactoring"? It certainly isn't the definition most other developers use.
And what would those issues be? CSS has its problems, just as any other language, but nothing even remotely close to offsetting the benefits the language brings with it.
lol, every point they made is because they are a programmer, not a web developer.
If css is so great why is there Tailwind. Bootstrap et. al., Less and Scss? Answer: css is a pos.
This is the dumbest answer of the week.
You can't say CSS is a POS just because you're bad at it.
This is a sign of a bad developer. You don't like something, just because you don't know how to use it.
Tailwind and Bootstrap etc etc only exist because devs made tools that made things easier to use. The problem appeared when newbies started only learning the tools and then complain when they run into bugs the tools can't handle.
Much of CSS is based on user experience, a program can't tell if a human being is enjoying the experience [at least not yet] , it can only make sure the code follows certain rules.
The tools help some, but we don't need them when we know how to write CSS properly. This is something that takes time and people have little patience as you've just exhibited.
It's like buying IKEA because you don't want to go to Home depot to buy the wood and build your table yourself. Obviously if you've built enough tables, you won't bother going to IKEA. And it's not WRONG to just buy a prebuilt table, but don't complain when one of the legs is slightly wobbly later on and you can't fix it.
Relics are people who don't keep up with the evolution of CSS - language features such as variables and calculation.
No comment other than, I can tell you like DSLs. Go for it!
But DSLs are the new languages of the web, be it JSX, svelte, Vue, angular, etc., whether you like it or not. If you don't like them, maybe you want to go into another branch of development than web.
Tell me, how are they DSLs?
The domain is content markup, but they are not exactly (X)HTML, though they share a similar look; especially attribute values with {} show the difference.
OP here is a bit to heavy-handed, demanding everyone do beautiful work when it comes to CSS and HTML.
You have to remember, the skin and bones of the frontend don't generally carry a website. The backend data is far more valuable and important. The larger a company gets, the more they care about that instead.
Those of us who do frontend code often find ourselves neglected with changes coming in as an afterthought to everyone else....UNTIL something breaks, then all hell breaks loose and we get yelled at.
CSS is easy. HTML is easy.
Both take a long time to master and even once you master them there will be exceptions that leave you cursing and scratching your head for hours.
Once you understand them though, you wonder why others can't.
The problem is that most developers [i generalize only because it's true] suck at both.
I can't count the number of times I've seen sites without correct meta tags [charset and viewport are imperative]
Sites without structured data or semantic elements [That's for SEO btw, THE single most important thing on a frontend site you want search engines to find]
Sites without CSS overrides for things like iframe/image max-width:100%; webkit-appearance:none; box-sizing:border-box; [these are basic things every site needs to avoid iframes and images extending beyond their parent and to make sure buttons and inputs display correctly on all browsers and devices. box-sizing being most important so 100% width actually means 100%]
There's a lot more, but i can't spell it all out here.
Most devs just don't know these rules and because they lack HTML and CSS fundamentals [just throwing that in to pick on hardcore programmers], they can't write good, clean and functional frontends that don't make people rip their hair out.
Most devs, again with the generalizing, i know, use bootstrap,tailwind, less/sass, and so on and so on and rely too much on these tools to do the thinking for them as far as CSS goes. So when they encounter a real world problem where they don't have access to those tools [or often even if the tools are there but someone else built it], they can't solve the actual problem.
Aside from the languages, a really hard skill to learn is when to look at an existing website, and decide "This CSS is utter crap, my choices are, rebuild it all, or just write a buncha overrides with !important to get the task done and move on".
Instead i've seen devs spend days trying to fix a tiny bug because they didn't want to "hack it". Guess what, in the real world we have budgets and timelines and that "hack" will last the 2-5 years it takes before they finally rebuild that site.
The biggest issues with CSS I see are the following:
Love the article and I agree with everything you say. I've been using pure CSS for as long as I can remember and now I could easily create my own Bootstrap/Tailwind/MUI for any project I get, but I would never do that JUST because most developers couldn't describe flexbox or grid to save their lives.
You don't have to like using CSS, you don't even have to be good at it but understanding how it works is as essential as any other "language" when you're writing code. Hell, even if you just learn the specificity you should be fine.
But I see way to many new developers who just relies on bootstrap in school and never learns how it actually works, and then when they enter the real world they get a slap in the face because they have to relearn everything from scratch.
I recommend everyone to at least skim through this book if they want to learn more
I agree with you. As a backend developer, I always hack the CSS to make the things works. Never tried to learn the basics, most of the time the intention was to 'fix' it.
It's easy like other languages :) believe me
You can lint your css.
Excellent article. all very true