Ollomedia

After a few months of working on a new project and getting comfortable transitioning to React from Angular
I’ve been turned on to a new strategy for managing component based css. Our team found that using BEM really
helps keep component styles small and manageable while also easy to debug. Below is a high level example of this approach that would require a bundler like webpack and babel to handle the es6 transpilation but could be re-written with es5 syntax as well if one desired.

I had reviewed BEM a few years back while researching large scale css strategies but hadn’t fully adopted it as it initially felt a bit too verbose for my liking and at that point I was still writing the majority of my styles in more of a monolithic cascade approach. Now with a simple bit of javascript utility I’ve found I can maintain tightly scoped modular styles for each component but also leverage a bit of classic cascade with some minimal partials.

First here is a simple component to demonstrate.

import React, { Component, PropTypes } from 'react'

export default class ArticleCard extends Component {

  render () {

    const { article } = this.props

    return {
      <article>
        <figure>
          <img src="{ article.img }" />
          <figcaption>
            <h3>{ article.title }</h3>
            <span>{ article.published_date }</span>
          </figcaption>
        </figure>
        <div>
          { article.content }
        </div>
      </article>
    }
  }
}

ArticleCard.propTypes = {
  article: PropTypes.object.isRequired
}

Now in this current state the component is modular and not tainted with styles from its specific implementation.
For instance if you want to use this article card on a magazine layout styled homepage and in a sidebar feature of an article detail how can you keep from repeating yourself while still being able to add some context
from each instance where the component is used? Our team uses a simple function for css class management.

function getClasses (parentClasses) {
  const componentClasses = [
    'article'
  ]
  if (parentClasses) {
    componentClasses.push(parentClasses)
  }
  return componentClasses.join(' ')
}

With this small utility function we can dynamically pass in context so lets add it to the component and implement some BEM classes to provide a surface area for some basic styles.

import React, { Component, PropTypes } from 'react'
import './_ArticleCard.scss'

function getClasses (parentClasses) {
  const componentClasses = [
    'article'
  ]
  if (parentClasses) {
    componentClasses.push(parentClasses)
  }
  return componentClasses.join(' ')
}

export default class ArticleCard extends Component {

  render () {

    const { article, articleClasses } = this.props

    return {
      <article className={ getClasses(props.articleClasses) }>
        <figure className='article__card'>
          <img src="{ article.img }" className='article__card-image'/>
          <figcaption className='article__card-caption'>
            <h3 className='article__card-title'>{ article.title }</h3>
            <span className='article__card-date'>{ article.published_date }</span>
          </figcaption>
        </figure>
        <div className='article__card-content'>
          { article.content }
        </div>
      </article>
    }
  }
}

ArticleCard.propTypes = {
  article: PropTypes.object.isRequired,
  articleClasses: PropTypes.array
}

Now with some BEM class names nesting in sass makes the verbosity far less cumbersome but also enforces the scoping we need for a truly reusable component.

/* _ArticleCard.scss */

.article {
  &__card {
    display: flex;
    flex-direction: column;
    background: white;
    color: slategray;
  }
  &__card-image {

  }
  &__card-caption {

  }
  &__card-title {
    font-size: 3rem;
  }
  &__card-date {
    font-size: 1.6rem;
  }
  &__card-content {

  }
}

Now each parent component that is using this Card component can also pass in a css class to provide some top level styles based on its context.

import ArticleCard from 'your/project/path/ArticleCard'

function ArticlePage(props) {
  return (
    <Page>
      <ArticleCard
        article={ articleData }
        articleClasses={ ['article-page'] } />
    </Page>
  )
}

This pattern really helped me to start thinking more creatively about re-usable styles but more through the lens of components rather than a styles that cascade through global partials and mixins. Hopefully you too find it useful.

Cheers.

So recently I was working on an angular directive that produced a content card and each of them needed a unique accent color. Each of these cards are produced through an ng-repeat as a result of an api response that was fairly limited in data / context. Essentially all I had to identify each card was a single letter that was used on each card.

Usually in this situation I would just manually write six disctinct classes since there was such a small number of variants but lately I’ve been seeing some fun applications of sass maps and functions so I wanted to give them a shot. Below is what I ended up with.

$card_colors: (
  'r': $blue,
  'i': $green,
  'a': $mustard,
  's': $burnt_orange,
  'e': $spray_blue,
  'c': $burnt_sienna_red
);

@function get-color($color_code: r) {
  @return map-get($card_colors, $color_code);
}

@each $background, $color_code in $card_colors {
  .code_background-#{$background} {
    background-color: get-color($background);
  }
}

Overall I’m pretty pleased with the power of this approach but I do worry a little about how readable and maintainable this approach would be for a developer that comes behind me.

I also at some point need to do some performance evaluations as traditionally sass maps haven’t been recommended in production due to performance. Thoughts?

So for the past few months I have been using Sass for all of my projects. I’ve been using Bourbon and Bourbon Neat as part of my workflow but recently have been working to implement rem measurements for my typography to assist in font scaling for responsive builds. This was a bit daunting at first after I read about the calculation for rems as I was already used to being spoiled by Bourbon’s em() function so I whipped up a function to do the conversion for me.

// calculate rem based on a pixel value
@function rem($value, $fontbase: 10) {
  @return($value / $fontbase) * 1.0rem;
}

.rem_test {
  font-size: rem(40); // 40px == 4rem
}

Hope you find this helpful.