Coding Standards & Best Practices : CSS

CSS

Best Practices

When we create for ourselves we are free to do anything, however when we work as a team and large projects, CSS is something that gets infected easily. In order to make every ones life easier we should follow these base rules:

  • Keep your conventions and syntax consistent, readable and simple
  • Bring modularity and scalablity to your css architecture
  • Organize your code so that it’s easier to maintain
  • Use comments where ever necessary

Formatting

Different editors might have different formatting, so we prefer to have most common and clean looking formatting which includes

  1. No tabbing or tabs being used as spaces
  2. Indents to contain 4 spaces
  3. Write selctors in new lines

Example

.first-class-name,
.second-class-name {
    background-image: url('/path/to/image.png') center center no-repeat $scss-color-variable;
    color: #FFFFFF;
    margin: 0 2px 2px 5px;
    padding: 0 20px;
    transform: translate(20px, 30px 20px);
}

Few more conventions

  1. For pseudo elements, prefer double colons”::”
  2. Use a space after each comma in comma-separated values
  3. Use Uppercase for color codes
  4. Prefer to alphabetize the properties list
  5. Prefer to have single quotes in strings in values

Naming Conventions

Though css class names can be written in n number ways. But we strongly advise to use either hyphenated or camelCasing. And follow it through out your application. For StaticFrame we recomend using hyphenated which is inline with most famous libraries that we see arround the world

There are different type of approach to CSS project.

Basic CSS best practices

  • Prefere rem units compared to em or px. While pixel values are the best in some cases( heights of a container, box shadows, borders etc), we recommend rem units for rest if you target for advanced browsers. We suggest to restrict em units inside small components only.
  • Avoid inline styles

    This may impact performance and makes yor code cluttered

  • Avoid element selectors

    Applying styles over div, span or any html tag can create problem later when you would like to change the markup. So it’s a better way to put classes and apply style.

  • Keep minimum style declaration on bases css files
  • Prefer subclassing to overriding via parent

    If same component going to behave differently, it’s a good practice to add a subclass. Ex: .btn for regular buttons , and .primary-btn to make it act like a CTA and change background color or dimensions.

  • Group similar styled elements together.

    Group style declarations comma separated in component/module/file. This reduces bytes as well as distributedness of same functionality

  • Avoid * as key selector

    When * is used as key selector (Ex: .content *) browser considers all elements of thier parent which is slower than defining a perticular

  • Avoid overqualified selectors

    Ex. prefer .main-nav a to .main-nav ul li a

  • Use small and meaningful class names
  • Avoid mediaqueries for each selector if using SASS

    Group them together for a component/module/file. Though there is no browser performance benifits ever noticed, yet they add to file size.