---
version: 1.0
status: draft
---

# Styling Standards

The Benzinga Pro styling standards enforce a combination of **Stylus** and the **SUIT CSS** methodology.

### Stylus
http://stylus-lang.com/

Along with [Nib](https://github.com/tj/nib) - a powerful mixin library - we take advantage of the space-based syntax that Stylus offers.

### The Code
#

```stylus
.MyComponent
.MyComponent.is-animating
.MyComponent--modifier

.MyComponent-part
.MyComponent-anotherPart
```
#### ComponentName
The component's name must be written in pascal case. Nothing else in the HTML/CSS uses pascal case.
```stylus
.MyComponent
```
```html
<article className="MyComponent">
    ...
</article>
```

#### ComponentName--modifierName
A component modifier is a class that modifies the presentation of the base component. Modifier names must be written in camel case and be separated from the component name by two hyphens. The class should be included in the HTML in addition to the base component class.

```stylus
.Button
    ...
    &--blue
        ...
```
```html
<button className="Button Button--blue" type="button">...</button>
```

#### ComponentName-descendentName
A component descendent is a class that is attached to a descendent node of a component. It's responsible for applying presentation directly to the descendent on behalf of a particular component. Descendent names must be written in camel case.

```html
<article className="Story">
    <header className="Story-header">
        <h1 className="Story-title">...</h1>
        <time className="Story-dateTime" dateTime={date}>...</time>
        ...
    </header>
    <div className="Story-bodyText">
        ...
    </div>
</article>
```

If your component decendent needs to have a decendant, you're probably doing something wrong. Consider starting a new component.

##### Incorrect (most of the time...)
```html
<article className="Story">
    <header className="Story-header">
        ...
        <div className="Story-author">
            <span className="Story-author-name">...</span>
            <img className="Story-author-thumb" src={src} alt={alt}>...</img>
        </div>
    </header>
    ...
</article>
```
##### Correct
```html
<article className="Story">
    <header className="Story-header">
        ...
        <div className="Author">
            <span className="Author-name">...</span>
            <img className="Author-thumb" src={src} alt={alt}>...</img>
        </div>
    </header>
    ...
</article>
```

#### ComponentName.is-stateOfComponent
Use `.is-stateName` to reflect changes to a component's state. The state name must be camel case. Never style these classes directly; they should always be used as an adjoining class.

This means that the same state names can be used in multiple contexts, but every component must define its own styles for the state (as they are scoped to the component).

```stylus
.Story
    ...
    &.is-expanded
        ...
```
```html
<article className="Story is-expanded">
    ...
</article>
```

<br />
<br />
<br />