CSS organization Patterns

.md

Industry Organization Patterns

1. Object Oriented CSS
2. SMACSS
3. BEM
4. DRY CSS
5. Atomic CSS

Goal: Scalable and Modular HTML and CSS

1. Flexibility
2. Maintainability
3. Performance
4. Scalable

Modular = reusable code

Note:

consider this patterns as guidelines rather than absolute rules

OOCSS

• Based in OOP but not quite
• Abstract design patterns into blocks
• Encourage modular code for faster, efficient, and easier to maintain
• Separte structure and skin
• Separate container and content

Example

Abstract similar boxes with a class

#box-1 {
	border: 1px solid black;
	border-radius: 5px
}

#box-2 {
	border: 1px solid black;
	border-radius: 5px
}

.box-border{
	border: 1px solid black;
	border-radius: 5px
	}

• Avoids IDs
• Lack of duplication reduces size of CSS files and HTML

SMACSS

• A way to examine your design process
• Encourages classes
• IDs are appropriate even if used less often
• Goal: increase the semantic value of a section of HTML
• Goal: decrease the expectation of a pecific HTML structure

Categorizing CSS

• Base: applied directly to element selectors (resets)
• Layout: rules for mayor components (header)
• Module: live inside layout (repeated navigation)
• State Theme:

DRY CSS

• Encourages reorganization of the selectors to avoid classes
• Keep style separte form content
• Avoid specificity by harnessing the cascade
• Selectors and definitios should be as global as possible

Atomic CSS

• approach to CSS architecture that favors small, single-purpose classes with names based on visual function.