CSS is hard to maintain and scale without a well-defined approach. Here are five CSS development methodologies and style guides that can help.
1. SMACSS
SMACSS stands for Scalable and Modular Architecture for CSS. A core idea behind this CSS development approach is minimizing the depth of selectors in order to keep them modular as well as to lower dependency on the HTML structure. In SMACSS, there are five style-rule categories: Base, Layout, Module, State, and Theme.
2. CSS Guidelines
CSS Guidelines is a comprehensive guide for writing maintainable CSS. It has rules such as limiting stylesheet lines to 80 characters, using soft tabs equal to four spaces, and so forth.
3. OOCSS
OOCSS stands for Object-oriented CSS. The central component of this approach is the CSS object, defined as “a repeating visual pattern, that can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript.”1
4. BEM
BEM stands for Block, Element, Modifier. In this front-end development methodology, a block is a discrete component, or a “building block”. An element is a part of a block; for instance, a search form block has two elements: (1) a text input box and (2) a button. A modifier is a property that changes a block or element visually or behaviorally. Each block has a unique name (a CSS class).
5. idiomatic CSS
Principles of writing consistent, idiomatic CSS — or idiomatic CSS for short — is a CSS development style guide. It includes guidelines for code-formatting, commenting in the stylesheet, and such. The core principle behind this style guide is to keep your source CSS consistent and readable.
Citations
Related Content
Related Resources
- A List of CSS Style Guides for Inspiration
- A Close Look at CSS Box Shadow
- CSS Link Pseudo-classes
- Introduction to CSS Colors
- A Look at Some CSS Methodologies
- 13 Best Responsive CSS Grid Systems for Your Web Designs
- A Code Editor Built Using Only HTML, CSS and JavaScript
- Popular Logos Recreated Using Only CSS
- 30 Exceptional CSS Techniques and Examples
Resources by Industry
- Web Design for Excavation Companies: Top 5 Tips (With Examples!)
- 5 Web Design Tips for Fence Installers
- 5 Simple and Successful Web Design Tips for Auto Parts Retailers
- Tips for Medical Website Designs
- Medical Website Design from an Award Winning Agency
- Top 10 Effective Web Design Tips for Auto Service Centers
- Web Design for Renewable Energy: Tips for a Site That Shines
- Insurance Website Design Services
- 5 Web Design Tips for Fertility Clinics
How is your website’s SEO?
Use our free tool to get your score calculated in under 60 seconds.
Continue Reading
Get posts by email
Join 200,000 marketing managers and subscribe to Revenue Weekly!
"*" indicates required fields
WebFX Careers
Join our mission to provide industry-leading digital marketing services to businesses around the globe - all while building your personal knowledge and growing as an individual.