Do people like CSS or just grow to tolerate it?
I've been trying to learn CSS. I went through the relevant sections of Colt Steele's Web Bootcamp. It is mostly focused on Bootstrap, which disappointed me a bit. So I went through MDN to learn Flexbox and CSS Grid, which seemed like a better alternative. The fundamentals are easy enough, but when I try to make a layout everything gets mixed in my head (even though I have the documentation open at all times). The impression I get is that modern CSS is not one thing, but a bunch of little things that resemble each other in a confusing way. It's hard to infer stuff and there are gotchas everywhere. I know this is not a programming language, but it is at least programming-related. Learning CSS feels more like learning English than a technology: you must accept that it's not a cohesive system, but rather the culmination of a long historical process full of random developments.
I tried getting back to Bootstrap, but then I have to override a bunch of stuff I don't even know is there.
I'm having a lot of trouble trying to put something very simple together. I just wanna leave that behind and go back to my beloved Python.
I did not want this to be a rant, but it is now a rant. So be it :P
CSS is a programming language. I think what you'll find is that all web technologies are culminations of long historical processes once you get sufficiently proficient with them.
You're getting frustrated because you're trying to learn. That's okay, that's how we learn things. You'll get better as you stick with it and practice more, just like anything else.
CSS gets the worst wrap in contemporary web development culture. The cascade is really difficult to wrangle when you pull in a bunch of third-party styles because there aren't any namespaces by default. Lots of people act like it's not real programming because its entirely style based, but anyone running a successful business in modern times understands a good product is nothing if not well designed, and polished.
I like CSS. It relaxes me to write because of how many different ways there are to accomplish a certain task. You can also create really unique things with it, or even art. The pressure to have a really performant solution isn't really there as opposed to when I write JavaScript or other code, because CSS is just fast, and it pretty much is always fast.
If you're just starting, hell yeah, pull in Bootstrap and override the things you don't like, but as a tip, don't try to override the same classes and IDs, but really dive in those DevTools and see what you're overriding and what the styles do. Just like anything else, you'll get better and better until you won't need the training wheels that Bootstrap offers and you'll be styling your entire pages and apps yourself!
Don't give up on CSS because it doesn't make sense, it will eventually make sense if you practice, it's difficult just like other topics in programming and technology, you just have to keep working hard to learn it.
Funny you should bring up
position: stickyand interaction with other properties, as I ran into that exact problem this week. If any parent element anywhere up the chain, no matter how distant from the desired sticky element, has anoverflowother thanvisible, no matter how far away, it breaks. There's no other clearfix-equivalent that can be placed near/around the desired sticky element to make it work. This, includesoverflow-x, which intuitively you'd think would be irrelevant to a vertically scrolling thing. Took a while to figure out why the simple test codepen worked fine, but applying the same properties to what I thought were the only relevant elements on the actual page didn't.So, these are issues that not everything in the spec can be used together, in every browser. That's part of building a spec and hoping that those that implement the spec are able to implement it in a way that works 100% of the time. I'm skeptical that other software systems that have the amount of use as CSS (100% of the internet, over the last 20 years) can be shown to have less compatibility issues between itself.
But I guess, how often in your professional experience do you actually have to use those things together? We were getting by with making sticky content before
position: stickyso, is your use-case so specific that you have to use it to get your ideal design?Yeah, it's cool when you can use new things, but you can accomplish your goals another way, why use the new things? Just because they're new?
My point is that the how many features CSS has and how they interact is a strength, not a weakness.
I don't really find any faults in your comments. I haven't ever had to use any of those GUI tools, because I build things for the web where CSS has been sufficient for my needs.
I do agree that the barrier to entry on creating a viable browser engine that is spec-compliant shouldn't be so high, but I don't know any realistic solutions to that.
What do you think needs to be done to address your pain-points? Should we create and embrace a new styling system for the web, knowing that browser vendors ultimately choose what they implement anyways?
If Firefox dies we might see Google create a CSS replacement designed from the ground up for layout. The monoculture would make it easy to implement an entirely new system.
Granted, I don't want Firefox to die.
Thanks. CSS hurts. But love hurts too.
Haha, I should have put a disclaimer not to fall in love with the computers.
Good luck with your continued learning!
I used to really dislike CSS but after a while, you just get used to it and your ideas flow nicely into markup and styles to create nice websites.
A friend of mine once had a good point: CSS may not be great, but it’s the best styling language that exists. And he’s right. It’s weird, and has lots of baggage, but it’s the best we’ve got.
I recommend taking a look at Tailwind CSS. It provides utility classes for css. It is a great way to learn best practices since it basically is a bundle of best practices ready to be applied.
I looked into Tailwind, but there are so many CSS frameworks that it makes my head spin. I went back to Bootstrap not because I think it is best, but because that's the one used in the Udemy course I took.
Bootstrap is good to learn because you will see it in a lot of projects.
I really love CSS.
The weird thing is, I don't ever remember learning it? Same for HTML, too. I first came on the web in the days of MySpace, which allowed you to customize your profiles with custom HTML/CSS (very table heavy, no divs or sections those days), and I guess I just sort of internalized my HTML/CSS knowledge from editing my profile and mashing different chunks of HTML & CSS snippets together. I picked up PHP for my own websites quite easily (which is syntactically similar-ish to Java which I learned for AP Computer Science) once myspace was more or less done for, and my explorations of designing things for the internet have never really ceased.
Now, everything is CSS flexboxes and grids for me.
Right there with you. After so many years of working with it, I just... know it. Even things I've never tried before, I somehow just know how/why it does/doesn't work.
Now for the things that I don't understand why or how they work, it's probably because 'position: relative' isn't set in the parent container.
So true. Probably the only three things I ever need to refer back to the documentation about usually involve:
linear-gradientorradial-gradient.transformorigins and the matrix math surrounding that.z-indexgotchas.Otherwise I feel like I can pretty much write good CSS on autopilot.
I'm very out of date when it comes to CSS. There are a couple of generations of new layout rules I haven't learned yet.
One thing I can say is that it is very easy to write CSS rules that have no effect since they don't actually select the elements you want. Learning to use your browser's debugger to see when this happens is essential. There are also tricks like temporarily turning the borders a bright color to make it obvious what you're selecting. It can be rather frustrating compared to programming languages that tell you right away if you make a typo and have an undefined reference.
Then, once you are selecting the elements you want, often the effect isn't the one you want, either because you made a typo in a property name and there's no effect, or you misunderstood what the property does. For misspelled property names, a good editor can highlight mistakes. Understanding what the properties do comes from experience.
There is also the problem that the property does do what you want but it has no effect because some other rule has higher priority.
So, no, this isn't my favorite experience. It seems like layout could be done better.
I actually really love the relative simplicity of CSS as a language; there's something beautiful about the simple selector{property:value} syntax.
The thing about the actual implementation of CSS is that there is simply no replacement for actual experience. The main difficulty with CSS is understanding what all the properties and meta-selectors are and what they do. But you also have to deal with understanding the different display models and selector priorities. Do yourself a favor and stop using bootstrap until you get a basic understanding of CSS properties so you don't have to worry about your CSS rules not working.
I took Colt Steele's boot camp before, and frankly I don't think it's a very good resource because he doesn't really go in-depth on anything. Since I originally took the class, he had hired someone to add JavaScript classes after we had already built an entire application in JavaScript. If you are going to become a web dev, then yes, you do need to know every HTML tag, how the DOM works, essentially every bit of CSS, and be an expert on whatever today's version of JavaScript looks like.
I agree with you. The choice for Bootstrap in the short term was motivated by an urgent need. But I'm open to reconsidering that choice.
I agree. His Python course is the same, but since Python is more monolithic it's not so bad. I'm using MDN learning resources as a complement now.
Thanks!
I highly enjoy CSS and now using SCSS, I can do it in my sleep. Once you wrap your head around margins and padding aka the box model, things become a lot easier. Just play around on a website with the inspector tool and update live CSS on different elements on the page to start.
Most of what you said doesn't ring a bell for me. I've been dealing with CSS for something like 5 or 6 years, at this point. I still miss things, and I still have to consult MDN at least twice every two hours of work, but in the end, my impression of it is far more positive than yours.
When you say it's hard to infer stuff, what do you mean? What are you trying to infer? What kinds of gotchas do you encounter?