I was recently asked my process for handling CSS, and I realized since I haven't worked on a CSS project for a year now, the details weren't fresh in my mind. In my own personal projects, I just use Bootstrap because their default designs are good enough for my purposes. But when working on a professional project, it's worth considering other options. So I'm writing this article to refresh my memory of my professional experience with CSS.
My first job where I got some exposure to advanced CSS concepts was on the Mindbody Marketing team. We were migrating from a Drupal 7 site that was a mix of Bootstrap-like selectors and BEM selectors, and the team wanted to look into a more deliberately structured approach to CSS. Some best practices were put into place such as alphabetizing class selectors with HTML attributes and alphabetizing CSS properties within the CSS selectors in the stylesheets. The idea is you don't have to scan the HTML and the CSS as much looking for a certain selector if you know everything is in alphabetical order.
As for choosing a methodology, first, we tried Atomic Selectors, where each selector represents one CSS property. For example, to absolute position an element, one would add this class to the element: ps-a, where `ps` stands for `position`, and `a` stands for `absolute`. I have to admit, I liked this because it was really easy to style the HTML without touching the CSS, as long as the Atomic Selector had been created. Then later, one of the Marketing Developers pushed to use a PatternLab approach to the website, where the site would be broken up into components since many of the pages had repeated elements anyway. He pointed out that BEM is well suited for styling the components. (BEM stands for Block-Element-Modifier.)
I did a little bit of BEM for the Mindbody site, but I was shortly after laid off, so I don't have a lot of experience with it. But the basics are simple enough. Blocks are anything that stands alone without needing a parent, so a section is a block. But a button can be considered a block too, even though it's typically used in a parent element. This is because the button's styling would be the same whether it's in one section or another section. So it doesn't have a dependency on any one section for it to be styled properly. You could copy the button's HTML and paste it anywhere in the document and the button would still be styled properly. If HTML is dependent on a particular parent block, then this would be considered an Element. The selector syntax for styling an element goes like this: `.block__element`. Then finally a Modifier is used to modify the appearance of a Block or an Element. So for example, a button could be modified into a red button like this: `.button--red`. So double underscores to prefix Elements, and double dashes to prefix Modifiers.
If a project didn't already have a framework or an agency didn't already have a chosen methodology for CSS, then I would probably recommend a PatternLab/BEM approach. And I would use SASS as the preprocessed language. I think it's worth having a grid similar to Bootstrap where the breakpoint is set in the class. And this is still valid BEM since blocks can have single dashes in them, so something like .col-sm-6 is actually valid. If non-grid components need to have responsive styling then I would just put the responsive logic directly in the component's SASS file.
768px and 1024px cover most bases, but I've also seen 320px and 990px used. The Mindbody site had even larger breakpoints to design for business owners who have the big Mac screens. At Mindbody, the designers picked the breakpoints. Also, they provided mock-ups for all breakpoints. I have heard some agencies just design for Desktop, and the Tablet and Mobile views are determined by the default gird logic and touched up if needs be. But I'm flexible, I can adapt to any existing pipeline.
Process of implementing a design
Generally, I develop from mobile to desktop, but I do the coding in multiple passes. Here's what I do in each iteration:
- 1. layout
- 2. type styling
- 3. images
- 4. spacing
- 5. animations (if there are any.)
And then I would iterate over the breakpoints again a few times looking for any details I missed.