CSS

CSS Architecture

We use a version of Atomic CSS, a modular architecture system also known as Functional CSS. It uses favors small, single-purpose classes with names based on function and the use of multiple classes on an element to achieve more complex designs.

Note: It is not the same as Atomic Web Design by Brad Frost, which encompasses more than CSS, nor BEM CSS. It's similar to Bootstrap.

Class Name Structure

A base class and any modifier classes are applied to an element - with the parent class name being the first word of the modifier class name. Example: div.alert.alert-warning

IDs vs Classes

And ID can only be used once per page, so on any repeating or dynamic element, a class should be used instead. In general, only use and ID where there is a specific need to identify a very specific element.

We do not limit ID usage to elements getting manipulated by JavaScript.

How to Set Class Names

Use function-based (semantic) instead of visually descriptive names. Think about what the item does, content-wise, and give it a name related to that.

Examples: priority-2, image-supplemental, success, error, signup-newsletter, strut, sequence, recipe-card-ingredients

When working with branding, don't use the actual name of the color, use the brand function. Example: mainBrandColor-text instead of text-blue

Code Structure - Sass or CSS

Basic rules:

• Each selector is on its own line, followed by the opening brace on the same line as the last selector
• Each attribute lives on its own indented line
• Attributes are ordered alphabetically by property name
• Each attribute has a space after the colon
• Each attribute name value pair ends with a semi-colon
• The closing brace should be on its own line at the same indentation as the selector

Alphabetizing Attributes

Each developer has their own way of thinking about attribute grouping. Instead of reading each style definition to learn how that developer has organized the types of CSS attributes, use the organization inherent in the alphabet. By alphabetizing your properties, you are creating consistency and making it faster to find a specific property in the future.

Whitespace

Use whitespace freely, to create an easy to scan document. The gulp preprocessor will clean it up and compress the document for production, so our code files should be organized and laid out to make coding easy and efficient.

Large Sections

• Begin each large section with 5 blank lines above the comment.
• Use a visually large comment block; width: 80 characters.

Sub-Section

• 2 blank lines above the section
• Single line comment with visually unique preface

Line/Definition Comment

• No blank lines necessary above
• Single line comment with space between comment characters and start of comment text

Code Blocks

Related code should be grouped together in the document, Related style rules should be grouped together, from least to most specific, and be visually separated from other code blocks.

Nesting

Nest descendant style definitions and related styles, even if you’re writing in CSS not Sass. The only difference in Sass is where the closing brackets go.

Limit nesting to three levels -- where possible, given IBM's level of specificity in the WebSphere Commerce coding.

Nesting CSS

/* Example: CSS nesting */

.name-parent {
    /* attributes */
}
    .name-child {
        /* attributes */
    }
        .name-grandchild {
            /* attributes */
        }

Nesting Sass

/* Example: Sass nesting */

.name-parent {
    /* attributes */

    .name-child {
        /* attributes */

        .name-grandchild {
            /* attributes */
        }
	}
}