Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

CSS Formatting

DZone's Guide to

CSS Formatting

Using CSS properly ensures that your web app looks its best and runs optimally on the front-end. We take a look at how to do this by using Sass and other CSS tools.

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

The SASS 3 preprocessor introduces a new syntax known as SCSS which is used in our projects.

One of the most important things to learn is nesting in Sass.

The two most frequently used guide systems are RSCSS and BEM. We will go through the basics of both systems in order to ensure they will be used properly in any current and future projects.

General Rules

First, we will take a look at some general CSS rules that should be followed.

  1. When writing CSS, classes should be used, while IDs should be avoided.
  2. Use the SCSS syntax, never the SASS syntax.
  3. Use two spaces for indentation.
  4. When using multiple selectors in the rule declaration, give each selector its own line.
  5. When a margin or padding helper class needs to be used, first see if it could be incorporated into the element's CSS rules, to avoid having too many classes added to a single element.
  6. Do not nest selectors more than two levels deep.

RSCSS

Components

When working with RSCSS, you should think in components. Each piece of the UI should be thought as an individual component.

Classes of components should be named with two words, with a dash in the middle.

Some of the naming examples include:

  • search-form
  • photo-container
  • primary-button

Elements

Each component contains elements. These elements should have only one word.

If an element contains multiple words, they should be joined together to make one word.

For example:

  • userimg
  • smalltext
  • navlink

Using tag names and ids while writing your CSS should be avoided.

Variants

Variants can be used for both component and element names.
Class names for variants are prefixed with a dash.

For example:

  • class="button-primary -large"
  • class="avatar -round"
  • class="input-form -wide"

In the example below, we will break down the components into elements and show a real life use case of RSCSS.

The image shows a simple input field with a button and placeholder text.
First, we will identify the component and break it down into elements.

The component includes the input field and a submit button.

Now, it is time to write the CSS classes. We will name the component, element, and variable.

.signup-form { 
  .inputfield { 
    ... 
  } 
  .submitbtn {
    ... &.-inverted { 
      .. 
    } 
  } 
} 

For naming the elements, we connected the two words (didn't use a dash or underscore). A variable was used for defining the style of the button. Therefore, both submitbtn and -invertedof the classes will have to be used on the button element.

BEM

BEM is a methodology that based on the Block - Element - Modifier system. Only class name selectors are used, ids are to be avoided.

Blocks

Blocks can be nested or can interact with each other. They are similar to components in RSCSS and are semantically equal.

Bloks usually have a class name with one word or two words separated by a dash. Block names may consist of Latin letters, digits, and dashes.

Elements

Elements are a part of the block.

Element names may consist of Latin letters, digits, dashes, and underscores. The class name is formed with the name of the block plus two underscores and the element name. For example: "forminput".

Modifiers

Modifiers are used on elements to show a change in appearance, behavior, or state. An elements design is changed by adding or removing a modifier.

Modifier names may consist of Latin letters, digits, dashes, and underscores.
A modifier class name is formed by taking the name of the element class and adding two dashes plus a name of the modifier. When an element has a modifier, it must have both the element class and modifier class. For example: "blockinput blockinput--dashed"

In the next example, we will show a practical example of the BEM methodology.

The above image shows a block which has the class "form." It consists of an input field and a submit button.

Next, we have identified the elements within the block. Those elements are "input" and "submit." The "submit" element has an appearance modifier which makes the button wider.

According to all of this information, our stylesheet will be written as:

.form { } 
.form__input { } 
.form__submit { } 
.form__submit--wide { } 

The HTML file will look like this:

<form class="form">
  <input class="form__input" placeholder="your email address" />
  <input type="submit" class="form__submit form__submit--wide" />
</form>

We hope this article helped you understand the basics of RSCSS and BEM, as well as the class naming conventions.

Check out other detailed articles related to CSS properties such as this one: CSS Positions, SASS and LESS Nesting, CSS Columns.

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
css ,sass ,web dev ,bem ,rscss

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}