How I deal with CSS(2019)

Neil Gardose — Thu, 05 Dec 2019 10:10:56 +0000

In this post, I'll be sharing some of my methodologies in writing CSS and will show some component examples.

Feel free to comment and share some tips for improvement. This is my first post in https://dev.to and I hope you find it interesting!

👉 What CSS language extension do you use?

Answer: None. I just use plain CSS with custom properties(variables) on my projects and open-source repository.

Reasons:

I decided not to use any CSS language extension so that developers who are new to CSS can jump on board more easily.

There's a chance that SASS may bloat your CSS. Here's one:

    /* https://gist.github.com/nkpgardose/2160141607f98f74f86679fde1d914b7 - 2015 */
    .list {
      background-color: red;

      & .list-item {
        color: white;

        & .list-item-icon {
          margin-right: 5px;
        }
      }
    }

    .wh-list__icon {
      @extend .list-item-icon;
    }

    .wh-list__label {
      @extend .list-item;
    }

Pretty simple right? Here the generated css result:

    .list {
      background-color: red;
    }

    .list .list-item, .list .wh-list__label {
      color: white;
    }

    .list .list-item .list-item-icon,
    .list .wh-list__label .list-item-icon,
    .list .list-item .wh-list__icon,
    .list .wh-list__label .wh-list__icon {
      margin-right: 5px;
    } /* eyyy */

When it comes to SASS, new developers must read the documentation and do some practices to totally understand how SASS works. But, this will consume learning time for new developers, instead of using that time to do the actual feature of a project.

I also refrain from including other styles from other components, so @include and @mixin will not be used that much.
To be brutally honest, I'm a fan of create-react-app node package -- so whenever I use it, I just want to run the project locally and do experiments or features since I'm too lazy to configure and read READMEs of many build tools. CRA doesn't have support on SASS when creating a new app so I just stick on whatever works for now.

📖 What CSS methodology you prefer?

Answer: rscss but in pascal case & camel case.

Reasons:

I used a lot of CSS methodology(BEM, bootstrap way) before and RSCSS is suited to my liking.
It has nice balance on HTML & CSS.
This methodology challenge to make simple HTML template and CSS which result in less code. Less code meaning a few bugs.
Since naming react components is in PascalCase, I'm using PascalCase and camelCase for component name and modifiers respectively. This will lighten CSS as well since we don't have an extra - character.

Example:

    /* field.css */
    .Field { ... }
    .Field > .label { ... }
    .Field > .input { ... }
    .Field > .errorMsg { ... }

    /* modifiers */
    .Field.compact { ... }
    .Field.compact > .input { ... }
    .Field.sticky { ... }
    .Field.helloWorld { ... }

Here's an example template:

    <div class="Field">
      <label class="label" for="sample">{label}</label>
      <input class="input" id="sample" type="text" />
      <span class="error">{errorMsg}</span>
    </div>

Here's a react example as well: https://github.com/nkpgardose/EmojiPicker/tree/master/src/components

🤔 Dealing with nested components

Let's do a search bar and button as an example:

    /* search bar */
    .SearchBar { ... }
    .SearchBar > .input { ... }
    .SearchBar > .submit { ... }

    /* button */
    .Btn { ... }
    .Btn.primary { ... }

We'll use these styles on our template, it will look something like this:

    <div className="SearchBar">
      <input class="input" />
      <button class="submit Btn primary" />
    </div>

Whenever you need a component inside a larger component. Class name declaration will be in this order.

    [element class of Parent component] [Component] [component\'s modifier]

👍 Some CSS tips that I find it useful

Always use classes.
Abbreviate CSS names. Btn instead of Button, Nav instead of Navigation.
As much as possible, prevent using * {} on your CSS. A component should work flawlessly on any website.
Use box-sizing: border-box when class have width and height (and min/max) properties.

Some useful links