An Introduction to SMACSS Guidelines for Writing CSS

Learn the basics of Scalable and Modular Architecture for CSS

Steven Bradley has been discussing ideas and approaches to writing CSS. He's looked at abstracting CSS and talked in some detail about Object Oriented CSS. If classic CSS sits on one side of an approach to writing CSS and OOCSS sits on the other, SMACSS sits somewhere in the middle. While he’ll do his best to cover the basics here, he recommends reading through the SMACSS documentation. It’s not a long read and of course it is the original source.


What is SMACSS?

SMACSS stands for Scalable and Modular Architecture for CSS and it has 2 core goals.

  • Increase the semantic value of a section of HTML and content
  • Decrease the expectation of a specific HTML structure

Like Object Oriented CSS, SMACSS is an approach to writing CSS and HTML with more emphasis placed on using classes. Unlike OOCSS, it doesn’t suggest using classes for everything. It’s fine with IDs and descendent selectors where appropriate.

Lubov Cholakova

Lubov CholakovaLubov has been with DMXzone for 8 years now, contributing to the Content and Sales departments. She is bringing high quality content in the form of daily blog updates, reviews, tutorials, news, newsletters,update emails and extensions' manuals. If you have a product that needs publicity or any other questions about the entire DMXzone community, she is the one you can contact.

See All Postings From Lubov Cholakova >>


Be the first to write a comment

You must me logged in to write a comment.