{"id":26475,"date":"2016-05-18T21:01:48","date_gmt":"2016-05-18T13:01:48","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=26475"},"modified":"2022-08-07T19:44:08","modified_gmt":"2022-08-07T11:44:08","slug":"basics-of-object-oriented-css","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/basics-of-object-oriented-css\/","title":{"rendered":"The Basics of Object-Oriented CSS (OOCSS)"},"content":{"rendered":"<p>Frontend development moves quickly, with many new techniques added every year. It can be a struggle for developers to keep up with everything. Between <a href=\"https:\/\/www.hongkiat.com\/blog\/convert-css-to-sass\/\" target=\"_blank\" rel=\"noopener\">Sass<\/a> and <a href=\"https:\/\/www.hongkiat.com\/blog\/postcss-plugins\/\" target=\"_blank\" rel=\"noopener\">PostCSS<\/a> it\u2019s easy to get lost in the sea of development tools.<\/p>\n<p>One newer technique is Object-Oriented CSS, also termed OOCSS for short. This isn\u2019t a tool, but rather a <a href=\"https:\/\/www.hongkiat.com\/blog\/css-writing-methodologies\/\" target=\"_blank\" rel=\"noopener\">CSS writing methodology<\/a> that aims to <strong>make CSS modular and object-based<\/strong>.<\/p>\n<p>In this post, I\u2019d like to introduce the <strong>core fundamentals of OOCSS<\/strong>, and <strong>how these ideas can be applied to frontend web work<\/strong>. This technique may not catch on with every developer, but it\u2019s worth understanding new concepts to decide if your workflow could benefit from it.<\/p>\n<h2>What Makes CSS Object-Oriented?<\/h2>\n<p><a href=\"https:\/\/en.wikipedia.org\/wiki\/Object-oriented_programming\" target=\"_blank\" rel=\"noopener\">Object-oriented programming<\/a> (OOP) is a programming paradigm that focuses on <strong>creating reusable objects<\/strong> and <strong>establishing relationships<\/strong> between them, as opposed to <a href=\"https:\/\/en.wikipedia.org\/wiki\/Procedural_programming\" target=\"_blank\" rel=\"noopener\">procedural programming<\/a> that organizes the code into procedures (routines, subroutines, or functions).<\/p>\n<p>OOP has become widely used in both <strong>JavaScript and backend languages<\/strong> in the last few years, but organizing CSS according to its principles is still a new concept.<\/p>\n<p>The \u201cobject\u201d in OOCSS refers to an <strong>HTML element<\/strong> or anything associated with it (like CSS classes or JavaScript methods). For example, you might have a sidebar widget object that could be replicated for different purposes (newsletter signup, ad blocks, recent posts, etc.). CSS can <strong>target these objects en-masse<\/strong> which makes scaling a breeze.<\/p>\n<p>Summarizing <a href=\"https:\/\/github.com\/stubbornella\/oocss\/wiki\" target=\"_blank\" rel=\"noopener\">OOCSS\u2019 GitHub entry<\/a>, a <a href=\"https:\/\/github.com\/stubbornella\/oocss\/wiki#whats-a-css-object\" target=\"_blank\" rel=\"noopener\">CSS object<\/a> may consist of four things:<\/p>\n<ol>\n<li>HTML node(s) of the DOM<\/li>\n<li>CSS declarations about the style of those nodes<\/li>\n<li>Components like background images<\/li>\n<li>JavaScript behaviors, listeners, or methods associated with an object<\/li>\n<\/ol>\n<p>Generally speaking, CSS is object-oriented when it considers <strong>classes that are reusable <\/strong>and<strong> targetable to multiple page elements<\/strong>.<\/p>\n<p>Many developers would say OOCSS is easier to share with others and easier to pick up after months (or years) of inactive development. This compares with other modular methods like SMACSS, which has stricter rules for categorizing objects in CSS.<\/p>\n<p>The <a href=\"https:\/\/github.com\/stubbornella\/oocss\/wiki\/faq\" target=\"_blank\" rel=\"noopener\">OOCSS FAQ page<\/a> has a bunch of info if you\u2019re curious to learn more. And the creator Nicole Sullivan often <a href=\"https:\/\/www.youtube.com\/watch?v=BjAdHyA9nIY\" target=\"_blank\" rel=\"noopener nofollow\">talks about OOCSS<\/a> and how it ties in with modern web development.<\/p>\n<p class=\"video-19by6\"><iframe loading=\"lazy\" width=\"640\" height=\"480\" src=\"https:\/\/www.youtube.com\/embed\/BjAdHyA9nIY\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<h2>Separate Structure From Style<\/h2>\n<p>A big part of OOCSS is writing code that separates page structure (width, height, margins, padding) from appearance (fonts, colors, animations). This allows <strong>custom skinning<\/strong> to be applied onto multiple page elements <strong>without affecting the structure<\/strong>.<\/p>\n<p>This is also useful for designing components that can be <strong>moved around the layout<\/strong> with ease. For example, a \u201cRecent Posts\u201d widget in the sidebar should be moveable into the footer or above the content while maintaining similar styles.<\/p>\n<p>Here\u2019s an example of OOCSS for a \u201cRecent Posts\u201d widget that in this case is our CSS object:<\/p>\n<pre>\r\n\/* Structure *\/\r\n.side-widget {\r\n  width: 100%;\r\n  padding: 10px 5px;\r\n}\r\n\r\n\/* Skinning *\/\r\n.recent-posts {\r\n  font-family: Helvetica, Arial, sans-serif;\r\n  color: #2b2b2b;\r\n  font-size:1.45em;\r\n}\r\n<\/pre>\n<p>Notice that <em>layout<\/em> is managed with the <code>.side-widget<\/code> class that could be applied to multiple sidebar elements as well, while <em>appearance<\/em> is managed with the <code>.recent-posts<\/code> class that could also be used to skin other widgets. For instance, if the <code>.recent-posts<\/code> widget were moved to the footer, it might not take the same positioning, but it could have the same look and feel.<\/p>\n<p>Also take a look at <a href=\"https:\/\/codepen.io\/\/jewlofthelotus\/pen\/VYvdKE\" target=\"_blank\" rel=\"noopener nofollow\">this sidebar example<\/a> from CodePen. It uses a distinct separation of classes for floats and text alignment so that <strong>replication will not require extra CSS code<\/strong>.<\/p>\n<p><iframe height=\"480\" scrolling=\"no\" src=\"https:\/\/codepen.io\/\/jewlofthelotus\/embed\/VYvdKE\/?height=480&theme-id=0&default-tab=html,result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\">See the Pen <a href=\"https:\/\/codepen.io\/\/jewlofthelotus\/pen\/VYvdKE\/\" rel=\"nofollow\">OOCSS Sidebar Example \u2013 Completed<\/a> by Julie Cameron (<a href=\"https:\/\/codepen.io\/\/jewlofthelotus\" rel=\"nofollow\">@jewlofthelotus<\/a>) on <a href=\"https:\/\/codepen.io\/\" rel=\"nofollow\">CodePen<\/a>. <\/iframe><\/p>\n<h2>Separate Container From Content<\/h2>\n<p><strong>Separating content from its container element<\/strong> is another important <a href=\"https:\/\/github.com\/stubbornella\/oocss\/wiki#separate-container-and-content\" target=\"_blank\" rel=\"noopener\">principle of OOCSS<\/a>.<\/p>\n<p>In simpler terms, this only means that you should avoid using <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Child_selectors\" target=\"_blank\" rel=\"noopener\">child selectors<\/a> whenever it\u2019s possible. When customizing any unique page elements like anchor links, headers, blockquotes, or unordered lists, you should give them unique classes rather than <a href=\"https:\/\/www.sitepoint.com\/web-foundations\/descendant-selector-css-selector\/\" target=\"_blank\" rel=\"noopener nofollow\">descendant selectors<\/a>.<\/p>\n<p>Here\u2019s a simple example:<\/p>\n<pre>\r\n\/* OOCSS *\/\r\n.sidebar { \/* sidebar contents *\/ }\r\nh2.sidebar-title { \/* special h2 element styles *\/ }\r\n\r\n\/* Non-OOCSS *\/\r\n.sidebar { \/* same sidebar contents *\/ }\r\n.sidebar h2 { \/* adds more specificity than needed *\/ }\r\n<\/pre>\n<p>Although it\u2019s not horrendous to use the second code format, it\u2019s heavily recommended to follow the first format if you want to write clean OOCSS.<\/p>\n<h2>Development Guidelines<\/h2>\n<p>It\u2019s tough to nail down exact specifications because developers are constantly debating the purpose of OOCSS. But here are <strong>some suggestions that can help you write cleaner OOCSS code<\/strong>:<\/p>\n<ul>\n<li>Work with <strong>classes instead of IDs<\/strong> for styling.<\/li>\n<li>Try to <strong>abstain from multi-level descendant class specificity<\/strong> unless needed.<\/li>\n<li>Define <strong>unique styles with repeatable classes<\/strong> (eg floats, clearfix, unique font stacks).<\/li>\n<li>Extend elements <strong>with targeted classes<\/strong> rather than parent classes.<\/li>\n<li>Organize your stylesheet <strong>into sections<\/strong>, consider adding a table of contents.<\/li>\n<\/ul>\n<p>Note that developers should still use IDs for JavaScript targeting, but they\u2019re not required for CSS because <strong>they\u2019re too specific<\/strong>. If one object uses an ID for CSS styling it can never be replicated since IDs are unique identifiers. If you use only classes for styling then <strong>inheritance becomes much easier to predict<\/strong>.<\/p>\n<p>Moreover, classes can be chained together for extra features. A single element could have 10+ classes attached to it. While 10+ classes on one element isn\u2019t something I\u2019d personally recommend, it does allow developers to amass a library of reusable styles for unlimited page elements.<\/p>\n<p>Class names within OOCSS are somewhat controversial, and not set in stone. Many developers prefer to keep classes short and to the point.<\/p>\n<p>Camel case is also popular, for example <strong>.errorBox<\/strong> instead of <strong>.error-box<\/strong>. If you look at <a href=\"https:\/\/github.com\/stubbornella\/oocss-code-standards\" target=\"_blank\" rel=\"noopener\">class naming<\/a> in OOCSS\u2019 documentation you\u2019ll notice camel case is the \u201cofficial\u201d recommendation. There\u2019s nothing wrong with dashes but as a rule it\u2019s best to follow the <a href=\"https:\/\/github.com\/stubbornella\/oocss-accessibility-guidelines\" target=\"_blank\" rel=\"noopener\">OOCSS guidelines<\/a>.<\/p>\n<h2>OOCSS + Sass<\/h2>\n<p>Most web developers already love Sass and it has quickly overtaken the frontend community. If you haven\u2019t already tried Sass, it\u2019s worth <a href=\"https:\/\/www.hongkiat.com\/blog\/getting-started-saas\/\" target=\"_blank\" rel=\"noopener\">giving it a shot<\/a>. It allows you to write code with variables, functions, <a href=\"https:\/\/www.hongkiat.com\/blog\/easy-sass-guide\/#nesting\" target=\"_blank\" rel=\"noopener\">nesting<\/a> and compilation methods like mathematical functions.<\/p>\n<p>In competent hands, Sass and OOCSS could be a match made in heaven. You\u2019ll find an excellent writeup about this on <a href=\"https:\/\/thesassway.com\/using-object-oriented-css-with-sass\/\" target=\"_blank\" rel=\"noopener\">The Sass Way blog<\/a>.<\/p>\n<p>For instance, using the Sass <code><a href=\"https:\/\/sass-lang.com\/documentation\/file.SASS_REFERENCE.html#extend\" target=\"_blank\" rel=\"noopener\">@extend<\/a><\/code> directive you can apply the properties of one class onto another class. The properties aren\u2019t duplicated but instead, the two classes are combined with a comma selector. This way you can update CSS properties in one location.<\/p>\n<p>If you\u2019re constantly writing stylesheets this would save <strong>hours of typing<\/strong> and help <strong>automate the OOCSS process<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/basics-of-object-oriented-css\/02-sass-pink-logo-design.jpg\" alt=\"sass logo design\" width=\"700\" height=\"400\"><figcaption class=\"entry-image-caption\">IMAGE: <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/seanamarasinghe.com\/developer\/sass-introduction\/\">Sean Amarasinghe<\/a><\/figcaption><\/figure>\n<p>Also remember that <strong>code maintenance is a big part of OOCSS<\/strong>. By using Sass, your job gets easier with variables, mixins, and advanced <a href=\"https:\/\/www.npmjs.com\/package\/gulp-scss-lint\" target=\"_blank\" rel=\"noopener nofollow\">linting tools<\/a> tied into the workflow.<\/p>\n<p>A key attribute of great OOCSS code is the <strong>ability to share it with anyone<\/strong>, even yourself, at a later date and be able to pick it up with ease.<\/p>\n<h2>Performance Considerations<\/h2>\n<p>OOCSS is meant to operate smoothly and without much confusion. Developers try their best <em>not<\/em> to repeat themselves at every turn, in fact that\u2019s the premise behind <a href=\"https:\/\/en.wikipedia.org\/wiki\/Don%27t_repeat_yourself\" target=\"_blank\" rel=\"noopener\">DRY development<\/a>. Over time, the OOCSS technique can lead to hundreds of CSS classes with individual properties applied dozens of times in a given document.<\/p>\n<p>Since OOCSS is still a new topic, it\u2019s difficult to argue on the topic of bloat. Many CSS files end up bloated with little structure, whereas OOCSS provides rigid structure and (ideally) less bloat. The biggest performance concern would be in the HTML where some elements may accumulate a handful of different classes for layout structure and design.<\/p>\n<p>You\u2019ll find interesting discussions about this topic on sites like <a href=\"https:\/\/stackoverflow.com\/\/questions\/9557663\/impact-of-oocss-on-website-performance-shorter-css-but-bulky-html-with-more-cl\" target=\"_blank\" rel=\"noopener nofollow\">Stack Overflow<\/a> and <a href=\"https:\/\/css-tricks.com\/forums\/topic\/dry-html-vs-oocss-approach-better-to-have-less-html-or-css-code\/\" target=\"_blank\" rel=\"noopener\">CSS-Tricks<\/a>.<\/p>\n<p>My recommendation is to try to build a sample project, and see how it goes. If you fall in love with OOCSS, it may radically change how you code websites. Alternatively, if you hate it you\u2019re still learning a new technique and thinking critically about how it operates. It\u2019s win-win no matter what.<\/p>\n<h2>Get Busy Writing OOCSS<\/h2>\n<p>The best way to learn anything in web development is to practice. If you already understand the basics of CSS then you\u2019re well on your way!<\/p>\n<p>Since OOCSS doesn\u2019t require preprocessing you could try it with an <a href=\"https:\/\/www.hongkiat.com\/blog\/cloud-ide-developers\/\">online IDE<\/a>, such as CodePen. Simple projects are the best for getting started, and improving your knowledge from there.<\/p>\n<p>Take a look at these resources to further your research in the evolving field of OOCSS.<\/p>\n<ul>\n<li><a href=\"http:\/\/oocss.org\/\" target=\"_blank\" rel=\"noopener\">OOCSS Official Website<\/a><\/li>\n<li><a href=\"https:\/\/code.tutsplus.com\/tutorials\/object-oriented-css-what-how-and-why--net-6986\" target=\"_blank\" rel=\"noopener nofollow\">Object-Oriented CSS: What, How, and Why<\/a><\/li>\n<li><a href=\"https:\/\/ianstormtaylor.com\/oocss-plus-sass-is-the-best-way-to-css\/\" target=\"_blank\" rel=\"noopener\">OOCSS + Sass = The Best Way To CSS<\/a><\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2011\/12\/an-introduction-to-object-oriented-css-oocss\/\" target=\"_blank\" rel=\"noopener\">An Introduction To Object Oriented CSS<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Frontend development moves quickly, with many new techniques added every year. It can be a struggle for developers to keep up with everything. Between Sass and PostCSS it\u2019s easy to get lost in the sea of development tools. One newer technique is Object-Oriented CSS, also termed OOCSS for short. This isn\u2019t a tool, but rather&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>The Basics of Object-Oriented CSS (OOCSS) - Hongkiat<\/title>\n<meta name=\"description\" content=\"Frontend development moves quickly, with many new techniques added every year. It can be a struggle for developers to keep up with everything. Between\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/basics-of-object-oriented-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Basics of Object-Oriented CSS (OOCSS)\" \/>\n<meta property=\"og:description\" content=\"Frontend development moves quickly, with many new techniques added every year. It can be a struggle for developers to keep up with everything. Between\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/basics-of-object-oriented-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-18T13:01:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-07T11:44:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/basics-of-object-oriented-css\/02-sass-pink-logo-design.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/basics-of-object-oriented-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/basics-of-object-oriented-css\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"The Basics of Object-Oriented CSS (OOCSS)\",\"datePublished\":\"2016-05-18T13:01:48+00:00\",\"dateModified\":\"2022-08-07T11:44:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/basics-of-object-oriented-css\\\/\"},\"wordCount\":1367,\"commentCount\":23,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/basics-of-object-oriented-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/basics-of-object-oriented-css\\\/02-sass-pink-logo-design.jpg\",\"keywords\":[\"CSS\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/basics-of-object-oriented-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/basics-of-object-oriented-css\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/basics-of-object-oriented-css\\\/\",\"name\":\"The Basics of Object-Oriented CSS (OOCSS) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/basics-of-object-oriented-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/basics-of-object-oriented-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/basics-of-object-oriented-css\\\/02-sass-pink-logo-design.jpg\",\"datePublished\":\"2016-05-18T13:01:48+00:00\",\"dateModified\":\"2022-08-07T11:44:08+00:00\",\"description\":\"Frontend development moves quickly, with many new techniques added every year. It can be a struggle for developers to keep up with everything. Between\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/basics-of-object-oriented-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/basics-of-object-oriented-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/basics-of-object-oriented-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/basics-of-object-oriented-css\\\/02-sass-pink-logo-design.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/basics-of-object-oriented-css\\\/02-sass-pink-logo-design.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/basics-of-object-oriented-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The Basics of Object-Oriented CSS (OOCSS)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"The Basics of Object-Oriented CSS (OOCSS) - Hongkiat","description":"Frontend development moves quickly, with many new techniques added every year. It can be a struggle for developers to keep up with everything. Between","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/basics-of-object-oriented-css\/","og_locale":"en_US","og_type":"article","og_title":"The Basics of Object-Oriented CSS (OOCSS)","og_description":"Frontend development moves quickly, with many new techniques added every year. It can be a struggle for developers to keep up with everything. Between","og_url":"https:\/\/www.hongkiat.com\/blog\/basics-of-object-oriented-css\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-05-18T13:01:48+00:00","article_modified_time":"2022-08-07T11:44:08+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/basics-of-object-oriented-css\/02-sass-pink-logo-design.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/basics-of-object-oriented-css\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/basics-of-object-oriented-css\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"The Basics of Object-Oriented CSS (OOCSS)","datePublished":"2016-05-18T13:01:48+00:00","dateModified":"2022-08-07T11:44:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/basics-of-object-oriented-css\/"},"wordCount":1367,"commentCount":23,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/basics-of-object-oriented-css\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/basics-of-object-oriented-css\/02-sass-pink-logo-design.jpg","keywords":["CSS"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/basics-of-object-oriented-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/basics-of-object-oriented-css\/","url":"https:\/\/www.hongkiat.com\/blog\/basics-of-object-oriented-css\/","name":"The Basics of Object-Oriented CSS (OOCSS) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/basics-of-object-oriented-css\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/basics-of-object-oriented-css\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/basics-of-object-oriented-css\/02-sass-pink-logo-design.jpg","datePublished":"2016-05-18T13:01:48+00:00","dateModified":"2022-08-07T11:44:08+00:00","description":"Frontend development moves quickly, with many new techniques added every year. It can be a struggle for developers to keep up with everything. Between","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/basics-of-object-oriented-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/basics-of-object-oriented-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/basics-of-object-oriented-css\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/basics-of-object-oriented-css\/02-sass-pink-logo-design.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/basics-of-object-oriented-css\/02-sass-pink-logo-design.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/basics-of-object-oriented-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"The Basics of Object-Oriented CSS (OOCSS)"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6T1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26475","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=26475"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26475\/revisions"}],"predecessor-version":[{"id":61305,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26475\/revisions\/61305"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=26475"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=26475"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=26475"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=26475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}