↵

AMA: Brad Frost, Web Designer

7 years ago from Brad Frost, Brad Frost Web

  • Travis Arnold, 7 years ago (edited 7 years ago )

    I'm very interested to know how you handle one-off css? So I've built up patterns at my current job to use throughout our site and they work great. I'm able to get things a lot done faster, but I always hit a snag where something is different and doesn't necessarily fit a pattern. At that point do I do an inline style? Do I try to figure out a class name then add the two styles I needed? Do I add an id to the top level page/component and add modifications as needed? That's my biggest trip up when styling UI's.

    0 points
    • Brad FrostBrad Frost, 7 years ago (edited 7 years ago )

      That's a great question, and of course the answer is "it depends."

      I'd probably advise against inline styles, ids, and the like. I probably would advise having a conversation with the team about what you're trying to accomplish, and adapting the pattern to accommodate the variation.

      Design systems are a living, breathing entity, so constant tweaks, extensions, and improvements should be encouraged. If the design system isn't doing what you need, I don't think the answer is to go rogue and make exceptions. That's a fast track to making the design system obsolete. The better approach would be to make the system more flexible so it works across the board.

      Quick example: one thing I always struggle with is stuff like this: section { margin-bottom: 2em; }. In most cases, I want there to be some room in between major sections of the site. Except when I don't. Sometimes there are cases where I want the sections to be flush together (say if I'm applying background colors to the sections). I could hard-code <section style="margin-bottom: 0;">, but that would become unruly pretty quick. A better option would be to make a modifier for the pattern called .section--flush or something along those lines. That way the pattern becomes more versatile and can address similar scenarios in the future.

      If you do have to go the hacky route for whatever reason, I'd recommend following Harry Robert's advice about having a shame.css file or something where you can put all your knowingly-hacky code. It's a place you can put things and say "heeeeeey, so I know this goes against the design system and is all sorts of hacky, but the deadline is looming and I needed to get this done!" With any luck, you'll be able to revisit that issue down the road and solve it properly.

      Good luck!

      0 points