My flavour of IT CSS

Folder structure

- hyphens in front of names to get correct alphabetical sorting and to visualize the inverted triangle.

-------settings
------tools
-----generic
----elements
---objects
--components
-overrides
main.scss

1. Settings

used with preprocessors and contain font, colors definitions, etc

2. Tools

Mixins, functions using the the preprocessor.

3. Generic

Resets, Normalize, generic styling for <html> & <body> for example.

4. Elements

Styling for bare HTML elements such as <ul>, <li> <h1>, <a>, <p> etc.

5. Objects

Generic reusable objects that work as structural elements.
For example a layout grid, wrapper elements, responsive media containers. Shouldn't contain styling in terms of colors, sizing but only the structure/layout required.

Example: media-object, code-block, video-embed

6. Components

Everything else decoupled into self contained components.

Example: youtube-embed

7. Overrides

Utilities, helpers and hacks that need to override anything else. For when code don't fit into a component, need to override other styles or when a temporary hack is needed. This is where it goes. For example helpers for hide/show element (display: none).

File naming

File names are all lower-case similar to BEM classes except with a dot separator instead of double underscore __.

type-name.block-name.element-name

Depending on how much is included in each individual file parts the type-name and/or the element-name can be omitted.

For example a file containing all elements of a block would have a name like type-name.block-name.

The type-name is used for grouping similar elements. For example it can be layout when used for the overall layout of the site or header when used for the header.

Examples:

  • header.navigation.menu (Type - Block - Element)
  • header.site-logo (Type - Block)
  • footer.widgets (Type - Block)
  • footer.widgets.location-map (Type - Block - Element)
  • buttons (Block)

BEM (My bastardization)

Largely based on ABEM

Objects: block-name__element-name

Components: block-name__element-name --modifier --modifier2

Main difference from BEM is objects start with a capital letter. Modifiers are separate classes with hypen-prefix to allow inheritance. Only one level of this type of nesting allowed.

Example SCSS:

.block-name {
    &__element-name {
        // styling for element
        &.--modifier-1 {
            // styling for modifier 1
        }
        &.--modifier-2 {
            // styling for modifier 2
        }
    }
}

This will give us the following CSS:

.block-name__element-name {
    /* Styling for element */
}
.block-name__element-name.--modifier-1 {
    /* Styling for modifier 1 */
}
.block-name__element-name.--modifier-2 {
    /* Styling for modifier 2 */
}

And in our HTML it will look something like this:

<div class="block-name__element-name --modifier-1 --modifier-2"></div>

Much cleaner than standard BEM which can give absurdly long class attribute values. Such as:

<div class="block-name__element-name
            block-name__element-name--modifier-1
            block-name__element-name--modifier-2">
</div>