Why You No Like CSS?

Ok, I’ll admit, I’m not the biggest fan of CSS. Well, maybe I’m just not a fan of ME writing CSS. Many of the devs I’ve met over the years seem to echo this sentiment as well. But why? CSS is what makes our sites look not like Craigslist, it engages users and sets the tone and feel of our application. It does so much for us and yet here we are complaining about it. What a pack of ungrateful fucks. For Shame.

I mean, I do get it. If you’re not on the design team you may not be doing that much CSS or maybe, like too many of us, you’re more concerned with logic and functionality of your site to care about the style. `I’ll let Bob handle that part of the app,` you say. Fuckin’ Bob. I have the sneaking suspicion that most of us who don’t like working with CSS just don’t know it that well.

I had the opportunity to sit down with one of the members on my team and walk through the re-design of one our pages for our web app. I expected it to be a curse filled 8 hours of trying to figure out why this div didn’t float near that div but this guy was actually looking forward to it. Sicko. We (he) finished the re-design fairly quickly and I was amazed at his command of CSS. Our site looked better and I learned a lot along the way.

What I really learned from watching this master at work was how rudimentary my knowledge of CSS was. I wasn’t making use of CSS’s native answer to Bootstrap, FlexBox, wasn’t taking advantage of pseudo-selectors to implement logic that we had unnecessarily delegated to Javascript and hadn’t used SASS very much up to this point.

Some Takeaways:

  • Use percentages/em over fixed px for things like width, or font. This way you won’t need to create more media queries than necessary and your content will be more proportional to the browser window.
  • Just use SASS already. Jesus, how did I miss this train? SASS let’s you nest CSS rules in components so you can have clear separations of CSS logic (and a lot more). Here lemme show you:

  • .myBigDiv{
    font: 'Roboto';
    .btn{
    background-color:'green';
    &:hover{
    background-color: lighten(20%);
    }
    }
    p{
    text-transform: capitalize;
    }
    }

    Now I have rules that apply to all my buttons and paragraph tags that are in my div with a class of big div. I even put a nice hover effect on my btn that will make it appear lighter when hovered over.

  • Is there logic like capitalizing an input that you’re using JS for or truncating a string? Maybe CSS can just do that for you? We were doing just that and replaced that logic with CSS properties text-transform and text-overflow:ellipsis, respectively.
  • Let your framework do the heavy lifting! There were many places on our page that was reinventing what Bootstrap is already capable of like adding padding, floating elements or the like. Check the docs… can this be done without me actually coding it?
  • My advice, to myself and perhaps to you if this applies, is to stop running from CSS! Aside from Craiglist, users expect to see some visually engaging UI. Embrace the CSS, love the CSS.

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out /  Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out /  Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out /  Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out /  Change )

    w

    Connecting to %s