23

Ask DN: How do you write and structure your CSS?

over 5 years ago from

Structuring CSS/SASS is a huge pain point for me.

On one hand, I hate the "class soup" and tricky customization that can come with big frameworks like Bootstrap/Foundation. I'd use @extend to solve the class soup, but that of course leads to a lot of CSS bloat.

On the other hand, I hate how challenging it is to stay DRY when sticking to semantic classes and conventions like BEM/ITCSS. I feel like it requires a lot of discipline to keep all aspects of the UI in line with one another and consistent. It's all too tempting to treat every element like a special, unique snowflake at first, only to realize later on it really should have shared styles with something else.

And yet on the occasion when I produce a super modular set of BEM styles with a bunch of reusable components ("button", "navigation", "card", "hero section"), it looks and feels so much like a CSS framework that I wonder if maybe I should've just used one in the first place!

So DN, how do you approach this huge and highly subjective issue?

  • Do you use a framework for every project? If so, do you strive to keep your HTML classes semantic, or do you find it just doesn't matter? Do frameworks speed things up for you, even when you customize them heavily?
  • In a world where flex is finally usable for most projects, are you still using a grid system? Which one?
  • What's your sizing unit of choice? How frequently do use EMs? Do you find their inheritance-based nature useful or do you find it just leads to different components getting out of "EM sync"?
  • Is BEM to be the best way forward in terms of CSS naming conventions? How do you reconcile creating a BEM project when also relying on non-BEM dependencies like Bootstrap?

15 comments

  • Alec LomasAlec Lomas, over 5 years ago (edited over 5 years ago )

    Like most things, it depends on the project. At work, I'm working on a project that's going down the BEM path (with a 7-1 Architecture pattern). I've done this with a few personal projects. I'm currently working on a side project that uses Tachyons, and it's nice (I even made my own module). I'm using it because I'm interested in the DRY-ness of functional CSS. The downside is, of course, that there's a very real chance my HTML will be less DRY -- but that's what templates are for.

    Regardless, for all custom CSS I make sure to have settings defined away from styling - things like spacing units, font stacks & sizing, colors, etc. These should be consistent with whatever framework you're using if you choose to use one.

    • I don't use frameworks very often, but I do use Sass libraries like Bourbon
    • I tend to use grid systems like Bourbon Neat when working with BEM stuff. Flexbox is not a grid system, but we will be getting a native one of those eventually.
    • I use rems for as many things as possible, with ems for media queries (as they're most consistent between browsers). Of course, there are small exceptions here and there.
    • As far as naming patterns go though, the most important thing is consistency. So I wouldn't mix BEM & Bootstrap -- I'd follow their naming convention.
    4 points
  • James Young, over 5 years ago

    I don't use a framework, pretty much evaluated bootstrap for one project a year or so back and the time it would have taken to make any custom changes negated any benefits we would have got from the savings of a framework.

    My opinion hasn't really changed there. We've used Bootstrap (and others) for things like internal dashboards, tools etc and they're great for that.

    I use my own "starter kit" that has evolved over time to just be a kick-off point with some useful mixins, a grid and a few other bits and pieces along with grunt tasks etc and then build on top of that.

    I'd like to make more use of Flex and saw a great talk from Stephanie Rewis at Industry Conf on using it extensively on the Salesforce Lightning Design System with great results but if I remember correctly they still use a normal grid right now.

    I think BEM is becoming a well established convention and it makes reasonable sense. I keep meaning to update our own coding guidelines to fully embrace the markup but haven't got round to it yet but it's nice to have something solid and well thought out to work to after so many years of everyone doing their own thing.

    3 points
  • Ben MJTBen MJT, over 5 years ago

    BEMITOOCSS

    1 point
  • Geoff YuenGeoff Yuen, over 5 years ago (edited over 5 years ago )

    Do you use a framework for every project? I use my own framework for every project. It follows BEM/ITCSS conventions, has a Gulp and NPM task runner, a flexbox grid system and some custom resets.

    In a world where flex is finally usable for most projects, are you still using a grid system? Of course. I have alway used a 12 column grid system after learning graphic design in college.

    What's your sizing unit of choice? Whichever is appropriate. I usually use rems for margins and padding, ems for sizing type, px for raster images.

    Is BEM to be the best way forward in terms of CSS naming conventions? I don't know. All I know is that it's much better than not using a convention.

    1 point
  • Marvin Hagemeister, over 5 years ago

    Frontend dev here: I work on huge enterprise sites and platforms with dozens of components and templates.

    If you care about performance you should never use a framework like bootstrap or foundation, with the only exception being the grid if the design clearly demands one. Keep everything simple and stupid (KISS). This makes it a lot easier to reason about your own code. If you have something that can easily be reused across projects put it into your tool-bag. You'll quickly grow your own framework that fits your specific needs at your workplace.

    BEM is a great step in the right direction, but you will quickly run out of ideas to name the classes and you'll end up repeating lot's of css properties.

    For the sites we built we have seen the greatest payoff in productivity and performance with ITCSS. It feels dirty at first to put that much class names into the html, but compression will play in your favour.

    0 points
  • Alex Duncan, over 5 years ago

    I lead Product for KAWO.com and we use our own custom framework which we store in a separate Github repository and pull into our main app via bower. There is a gulp script in the repo that compiles, minifies and creates a release and pushes the code to github. This makes it super easy to deploy changes. We've found the separation from the rest of our frontend code very powerful.

    We were early adopters of flexbox and now rely on it throughout our app.

    Absolutely everything is sized in px.

    Our naming conventions are BEM like, but we're more practical and not so strict about adhering to the methodology.

    0 points
  • Ryan MackRyan Mack, over 5 years ago (edited over 5 years ago )

    I don't.

    Basscss | Tachyons

    0 points
  • Tyler WanlassTyler Wanlass, over 5 years ago (edited over 5 years ago )

    Sorry for the drive-by but a few quick thoughts :-D -

    • Consider using SASS very minimally. It's easy to create a big mess when you have the 'power' of nesting, mixins, etc. Even when using SASS I still try and write very flat (non-nested) CSS. Take a look at Myth and PostCSS too

    • Re: keeping your CSS DRY - I actually think this is what creates so much mess and frustration on larger projects. I much prefer WET :-D CSS. I think this need much more discussion as it goes against the grain in current software development. CSS isn't code though..

    • BEM is great. Just remember you can tweak / adjust it to fit your project.

    • Frameworks: agreed. Bootstrap et el starts to have very diminishing returns on larger projects and just gets in the way. Consider using a few smaller CSS libs instead (which you can then easily remove later).

    0 points
  • Julian LengfelderJulian Lengfelder, over 5 years ago (edited over 5 years ago )

    I use no framework. Never found them worth the hassle. The few times I tried them it led to a ton of unused code. Same applies to grid systems. I actually enjoy building them myself. But I have reused some of my own.

    For sizing units I stick to vw/vh and % for major elements in combination with flexbox. For typography I stick to rem for global values and em for local ones. In some specific cases I mix in px if it is absolutely necessary, luckily this happens way less in recent days. I tend to use SCSS variables to make sure paddings and margins stay the same across multiple elements. This and some use of calc() makes it easy for me to wrap my hand around any sizing issues.

    Naming is mostly done the BEM way mixed with a few single purpose classes (e.g. for floats).

    0 points
  • Daniel HaimDaniel Haim, over 5 years ago

    I've built a massive SASS framework over the last 3 years, it's been evolving and I've been really dying to find someone to collaborate with on it. It's superb. Ping me on twitter if you're interested in hearing more, @danielhaim

    0 points
  • Austin PriceAustin Price, over 5 years ago

    I've used a few different frameworks, including Bootstrap, Foundation, and some lighter weight boilerplates/grid systems like Skeleton. I've found that Foundation is the easiest to customize out of the box, but it's still more work than it's really worth for most things, I think

    For the most recent project I started on this week, I decided to give Bourbon a try, along with Flexbox Grid. So far, I'm liking that setup a lot. In the future, I may look to start incorporating more of the Thoughtbot tools.

    As far as organization and naming conventions go, I'm sticking with BEM and the 7-1 architecture pattern and try to stay as DRY as possible. One thing that helps keep things clean is looking at all the styles that you'll need to define before you start and sketch out your folder structure before diving in. Also just be willing to rewrite and restructure things early on and just take your time thinking through everything as you're building it out.

    It's like anything else, though, it just depends on the project, your preference, and your team dynamic.

    0 points
  • stephen fstephen f, over 5 years ago

    I never use frameworks because I find that I want to alter so much "stuff" when I do a comparison between, let's say bootstrap, to my design I end up like "screw it I'll just do it myself". I think this attitude is a positive as I learn something new every time because I try and push myself more, and I'm always fearful that if I make something based on a framework I'll feel like I've cheated and feel less satisfied at the end.

    I always try to modularise things like, sections, shared elements, fonts, colours etc, I keep them in separate scss files... but then most people do right?

    I love flex box and use it for every project where i see fit, however I have to say I still use a (stripped back custom) floated grid for general layout, but I think this will soon change.

    Bem is cool an all but i like naming stuff like class="banana--yo-yo47wrp-5" so i'm screwed, i joke, but i've got my own way and im stuck in my ways

    oh an generally im px bitch

    0 points
  • Dan Gamble, over 5 years ago
    • We used to use Foundation but then found it was so easy to misuse and it got to the point where we were only including the grid so i've made a very small base we start projects from.

    • We have a couple of grid mixins that handle "rows" and "columns" but no grid system.

    • We use px for everything as it's how most people think in then we use postcss to change some of our px values to rem.

    • We personally use ECSS (http://ecss.io) which isn't exactly BEM but it borrows some principles from it.

    0 points
  • shaune westshaune west, over 5 years ago

    I use a mix of popular naming conventions and some of my own. You can read about how I do SASS/CSS here: https://github.com/theshaune/fluent

    0 points
  • Simon EvansSimon Evans, over 5 years ago (edited over 5 years ago )

    BEM with Pattern Lab has worked well for us.

    0 points