23 votes

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

This post has now a soundtrack.

22 comments

  1. [10]
    Alfred
    Link
    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...

    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.

    23 votes
    1. [7]
      arp242
      Link Parent
      My gripe with CSS is mostly with how many features it has and how they all interact. For example, there's a new(-ish) CSS feature position: sticky which allows you to "stick" content so it's...

      My gripe with CSS is mostly with how many features it has and how they all interact. For example, there's a new(-ish) CSS feature position: sticky which allows you to "stick" content so it's always visible. It's like position: absolute except that it'll still position according to the normal flow instead of absolute.

      Cool feature, and east to use? Well, not if you use it in combination with flexbox, RTL text, text-overflow, webextension popups, negative margins, fixed elements, tables(1 2 3 4) forms, z-index, large children, or transform. Never mind that scrolling behaviour is pretty broken.

      There are many many examples for this, and not just in newer features. Using position: absolute in tables is a classic example. CSS is a large spec, and everything interacts with everything else.

      This is different from how many GUI systems work, where the layout tends to be a lot simpler to achieve. I don't know why it took so long for CSS to play catch-up (...and now we're stuck with having all these legacy things).

      Never mind that vertically aligning things can still be tricky.

      12 votes
      1. DrStone
        Link Parent
        Funny you should bring up position: sticky and 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...

        Funny you should bring up position: sticky and 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 an overflow other than visible, 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, includes overflow-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.

        2 votes
      2. [5]
        Alfred
        Link Parent
        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...

        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: sticky so, 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.

        1 vote
        1. [4]
          arp242
          Link Parent
          Have you ever programmed with Tk, Qt, GTK, or similar libraries? Things work so much easier and more consistent there. HTML and CSS were designed to format documents, not GUIs. This is why...

          Have you ever programmed with Tk, Qt, GTK, or similar libraries? Things work so much easier and more consistent there. HTML and CSS were designed to format documents, not GUIs. This is why vertical alignment is so hard: it's not something you need to format a document, just as you don't need it in e.g. Markdown. It's a typesetting tool, not a programming one, or even a layout one.

          Over the years, it turned in to a programming tool (whether that's a good thing is a separate issue) and CSS is now playing catch-up with CSS grid so people can finally build GUIs without all sort of complex tricks involving table layouts or float-based CSS grid frameworks. That's all great, but all of this already existed 30 years ago. As with many cases, the webdev crowd is reinventing the wheel decades after it had been invented.

          how often in your professional experience do you actually have to use those things together?

          Many times. This is just one feature, and the only reason I know about this (non-comprehensive) list of problems with sticky is because scrolling with it is broken (still is, after 2 years). I suppose that fixing it is too hard because you're going to have to think about loads of other features it could possibly interact with.

          In the meanwhile, no one is able to implement a new browser engine because the amount of (edge-)cases it will have to deal with will be bewildering. It took about 10 years for the current browsers to implement CSS to a state where it was relatively bug-free. Firefox's "quantum" rewrite took about 3 years for just the CSS part and is "only" 85k lines of Rust code. It's getting more complex by the year.

          Never mind the W3C/CSS broke the entire web for an entire decade by refusing to implement IE's box model that made more sense and was used by >95% of the web, and now we all use IE's box model anyway with * { box-sizing: border-box } 🤷‍♂️

          10 votes
          1. [2]
            Alfred
            Link Parent
            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...

            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?

            2 votes
            1. arp242
              Link Parent
              I don't think there's an easy solution, because removing/changing features will break pages. Backwards-compatibility is good. Inventing a new style language might sound tempting, but will probably...

              I don't think there's an easy solution, because removing/changing features will break pages. Backwards-compatibility is good. Inventing a new style language might sound tempting, but will probably only complicate things further and CSS is workable enough for it to not be a good return-of-investment.

              A CSS "strict mode" might be a good idea though. For example I'd argue that floats can be considered deprecated in this new strict mode (although I don't know if the current CSS spec and browser support is quite far enough for that).

              1 vote
          2. teaearlgraycold
            Link Parent
            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...

            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.

            1 vote
    2. [2]
      mrbig
      Link Parent
      Thanks. CSS hurts. But love hurts too.

      Thanks. CSS hurts. But love hurts too.

      4 votes
      1. Alfred
        Link Parent
        Haha, I should have put a disclaimer not to fall in love with the computers. Good luck with your continued learning!

        Haha, I should have put a disclaimer not to fall in love with the computers.

        Good luck with your continued learning!

        3 votes
  2. [3]
    nbrempel
    Link
    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...

    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.

    6 votes
    1. [2]
      mrbig
      (edited )
      Link Parent
      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...

      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.

      3 votes
      1. nbrempel
        Link Parent
        Bootstrap is good to learn because you will see it in a lot of projects.

        Bootstrap is good to learn because you will see it in a lot of projects.

        1 vote
  3. [3]
    cptcobalt
    Link
    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...

    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.

    6 votes
    1. [2]
      drannex
      (edited )
      Link Parent
      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...

      The weird thing is, I don't ever remember learning it?

      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.

      7 votes
      1. emdash
        Link Parent
        So true. Probably the only three things I ever need to refer back to the documentation about usually involve: The order of parameters in a linear-gradient or radial-gradient. transform origins and...

        Not 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:

        • The order of parameters in a linear-gradient or radial-gradient.
        • transform origins and the matrix math surrounding that.
        • A few z-index gotchas.

        Otherwise I feel like I can pretty much write good CSS on autopilot.

        5 votes
  4. skybrian
    Link
    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...

    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.

    5 votes
  5. [2]
    Akir
    Link
    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...

    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.

    4 votes
    1. mrbig
      Link Parent
      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...

      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 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 don't think it's a very good resource because he doesn't really go in-depth on anything

      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!

      1 vote
  6. reese
    (edited )
    Link
    CSS has its quirks, but you could say the same for so many other programming and scripting languages. As much as CSS pissed me off when I first learned it, I've come to appreciate it as opposed to...

    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.

    CSS has its quirks, but you could say the same for so many other programming and scripting languages. As much as CSS pissed me off when I first learned it, I've come to appreciate it as opposed to any non-web styling alternative I've ever had the displeasure of using. Soon the Unity game engine should have CSS-based styling for UI included in a stable release, and I couldn't be happier about that.

    I would dissuade against frameworks like Bootstrap. They're heavy and full of opinions that you will not share. Just use the flexbox/grid layout and have a color scheme. CSS Tricks has a wonderful flexbox guide that I've referenced for years now, because I inevitably forget things. Originally that guide was written by Chris Coyier. You should pay attention to him because he CSS's harder than most. By the way, there is also a CSS Tricks guide on the grid. I've been meaning to learn the grid layout—I was waiting for sufficient browser buy-in and forgot about it.

    Officially MDN should be your answer for all frontend web things, so according to the compatibility chart for the MDN grid page, looks like I have a new tool to add to the toolbox.

    Personally, I do use a framework for CSS, but it's not monolithic like Bootstrap. It's called Tailwind, and it takes the frustration out of modern, component-based styling. While styled components with Angular/React/Vue might make sense to be passed around for branding cohesion at corporations, for any other purpose that paradigm is hot garbage, a fad I wish would die off any day now. (Honestly I find those frontend JavaScript frameworks to be unnecessary 99.99% of the time, and maintaining with them just means rewriting your codebase every three months, but that's a whole other discussion.)

    With Tailwind, you just use styles as classes in-lined as needed in your HTML, since otherwise you'll be in override hell as you previously mentioned. Add PostCSS on top of it, and now your site only includes the styles it needs. Of course, then you have a little build process, but it's justifiable. The footprint in my blog is infinitesimal compared to most sites thanks to Tailwind and PostCSS, and it looks pretty good—which is the point.

    Also, I echo the other post on this topic: leverage those dev tools included in your browser. The ones in Firefox are awesome. It even has a responsive design mode, which I have used extensively to guarantee my sites look just as good on mobile devices as it does on the desktop. Take the time with CSS; it's worth it. Yes, even today I will spend an hour yelling, "What the fuck is going on? FUCK CSS!", and then realize another style I created was overriding another, lol.

    3 votes
  7. zigzagzig
    Link
    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...

    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.

    3 votes
  8. ThatFanficGuy
    Link
    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...

    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?

    2 votes