How I deal with CSS(2019)

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

https://speakerdeck.com/mdo/at-mdo-ular-css
https://rscss.io
https://codeguide.co
https://www.aastudio.fr/box-sizing.html

Comments

[Teippi Viritykset]

Why you prefer the PascalCase if everything else has almost always been camelcase?
So in one project you have pascal in css and camel in js.

[Neil Gardose]

Hey Teippi, I use PascalCase for the component name itself and camelCase for both component's modifier and elements. The reason why it gives identification that it's a component and not modifier or element.

Here's an example to give more clarity on how I approach my CSS. Let's say we have a ListGroup component:

.ListGroup { /* ... */ }  /*  👈 Component name. In PascalCase */
.ListGroup.slim { /* ... */ } /*  👈 Component's modifier. In camelCase. */
.ListGroup > .item { /* ... */ } /*  👈 Component's element. In camelCase. */
.ListGroup > .actionBox { /* ... */ } /*  👈 Component's element. In camelCase. */

As stated in my post, since React components are in PascalCase already. Naming its class name in PascalCase format would be reasonable as well. Here's a React example:

const ListGroup = ({/* ... */}) => (
  <div className="ListGroup">
      <div className="item">/* ... */</div>
     /* ... */
  </div>
)

export default ListGroup

I hope this explanation helps. Cheers! 🍻