CSS coding style

CSS coding style

Variable names

Scss variables should follow this convention :

${package-prefix}-{component-name}-{variable-name}

package-prefix the prefix that is common for all the package. It is composed of 2 letters to identify the package.

Prefix	Package
tc	Talend Components
ti	Talend Icons
tf	Talend Forms

component name the targeted component

variable-name the specific name

don't use camel case or underscore in variable naming.

Increase click area

Good practice could be to increase click area.

button {
  position: relative;

  &:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
  }
}

In addition, it could be to use to render a table row clickable. Let's imagine a <table>, with <button> in its first cell of each row.

table {
  overflow: hidden;

  tr:hover {
    td:first-child {
      position: relative;

      button:before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        content: '';
        width: 100vw;
      }
    }
  }
}

Ok but let's imagine we have others buttons in others cells

table {
  overflow: hidden;

  tr:hover {
    td:first-child {
      position: relative;

      button:before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        content: '';
        width: 100vw;
      }
    }
  }

  td.actions {
    button {
      position: relative;
      z-index: 1;
    }
  }
}