{"id":5961,"date":"2013-10-22T17:59:55","date_gmt":"2013-10-22T14:59:55","guid":{"rendered":"http:\/\/railsware.com\/blog\/?p=5961"},"modified":"2021-08-15T15:09:10","modified_gmt":"2021-08-15T12:09:10","slug":"object-oriented-thinking-in-css","status":"publish","type":"post","link":"https:\/\/railsware.com\/blog\/object-oriented-thinking-in-css\/","title":{"rendered":"Object Oriented Thinking in CSS"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Most modern methodologies like <a title=\"Object Oriented CSS\" href=\"http:\/\/oocss.org\/\">OOCSS<\/a>, <a title=\"BEM\" href=\"http:\/\/bem.info\/\">BEM<\/a>, <a href=\"http:\/\/smacss.com\/\">SMACSS<\/a> are all about learning to think about your UI and CSS in terms of objects. Which appeared to be really useful and flexible approach to organize and reuse code-base leaving it simple and DRY.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Objects are simple independent and indivisible components that are used across the project. We can think of them as interface elements like headings, form fields, buttons and content blocks.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here is a simplest example of a button object:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">  .button {\n    display: inline-block;\n    padding: 5px 15px;\n    color: #333;\n    border: 1px solid #ccc;\n    border-radius: 3px;\n    background: linear-gradient(#ffffff, #e6e6e6);\n  }\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Everything looks simple so far but apparently this is not the only type of buttons you&#8217;ll need during the project. You may need buttons of different size, colors and behaviour and here is where you have several options.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Subclassing<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s think about <code class=\"\" data-line=\"\">.button<\/code> as about parent class in programming languages, we&#8217;ll be extending with child classes. It&#8217;s useful for inheriting the properties of parent object while adding additional behavior. Let&#8217;s say we want to create two more simple types of buttons &#8211; button with icon before text and dropdown button.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">  .iconed-button:before {\n    content: \"\\24BE\\ \";\n  }\n\n  .dropdown-button:after {\n    content: \" \\25BE\";\n  }\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now we are able to create both child elements by applying parent and child class to <code class=\"\" data-line=\"\">button<\/code> element.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">  <button class=\"button iconed-button\">Button text<\/button>\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">or<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">  <button class=\"button dropdown-button\">Button text<\/button>\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Not to create a mess in HTML and reduce number of classes applied to the element one more optimization is required. We can list our child classes with coma right after parent class in selector, so that all these classes will have common styles and two of them will differ in a minor way.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">  .button, .iconed-button, .dropdown-button {\n    display: inline-block;\n    padding: 5px 15px;\n    color: #333;\n    border: 1px solid #ccc;\n    border-radius: 3px;\n    background: linear-gradient(#ffffff, #e6e6e6);\n  }\n\n  .iconed-button:before {\n    content: \"\\24BE\\ \";\n  }\n\n  .dropdown-button:after {\n    content: \" \\25BE\";\n  }\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">In this case you can use only one of <code class=\"\" data-line=\"\">.button, .iconed-button, .dropdown-button<\/code> classes in your HTML applying it to the button element.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">  <button class=\"button\">Button text<\/button>\n  <button class=\"dropdown-button\">Button text<\/button>\n  <button class=\"iconed-button\">Button text<\/button>\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Result<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"27\" src=\"\/\/railsware.com\/blog\/wp-content\/uploads\/2013\/10\/buttons_example.png\" alt=\"buttons_example\" class=\"wp-image-6015\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Modifiers<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Modifier classes are used to make minor modifications to the existing behavior or to indicate that the object is in a certain state. Nouns are used for object&#8217;s class names, in case of classes modifiers it is apparent to use adjectives.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Modifiers are meant to <strong>modify<\/strong> which means to override some properties of &#8216;default&#8217; objects whereas subclassing is used to extend them with new properties, thus creating new objects.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">  .button.primary {\n    background: #006dcc;\n    color: #fff;\n  }\n\n  .button.disabled {\n    background: #aaa;\n    color: #eee;\n  }\n<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">  <button class=\"button primary\">Button text<\/button>\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This is how by applying a <code class=\"\" data-line=\"\">.primary<\/code> or <code class=\"\" data-line=\"\">.disabled<\/code> modifier to the button object we can now change the coloring of button. In this case, we also wanted to force these modifiers to apply to the button object only so we used <code class=\"\" data-line=\"\">.button<\/code> class in selector.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Parental namespacing<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">One more way to change object&#8217;s appearance or behaviour is to use parent&#8217;s class name in selector to add changes to the object. Location dependent styles are usually the kind of things you should avoid, because in general object&#8217;s styles should not depend on placement. But in rare cases you may come up with an idea of modifying object due to it&#8217;s location. For example let&#8217;s make the submit button larger than the default one.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">  .signup-form .button {\n    padding: 8px 20px;\n  }\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">In this case the button will remain an independent object you can place anywhere on the page, and only if placed inside signup form it will change its appearance.<\/p>\n\n\n\n<form class=\"signup-form\"><button class=\"button\">Button text<\/button><\/form>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Despite the fact that CSS, unlike programming languages, is declarative, there&#8217;s a lot to pick from object oriented programming. Thinking &#8220;objects&#8221; is the kind of skill that will help you create re-usable objects and stop writing redundant code. It becomes easy to maintain code base and make modifications to existing UI without harming different parts of application.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Most modern methodologies like OOCSS, BEM, SMACSS are all about learning to think about your UI and CSS in terms of objects. Which appeared to be really useful and flexible approach to organize and reuse code-base leaving it simple and DRY. Objects are simple independent and indivisible components that are used across the project. We&#8230;<\/p>\n","protected":false},"author":23,"featured_media":6047,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[3],"tags":[],"coauthors":["Alex Chaplinsky"],"class_list":["post-5961","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.10 - aioseo.com -->\n\t<meta name=\"description\" content=\"Most modern methodologies like OOCSS, BEM, SMACSS are all about learning to think about your UI and CSS in terms of objects. Which appeared to be really useful and flexible approach to organize and reuse code-base leaving it simple and DRY. Objects are simple independent and indivisible components that are used across the project. We\" \/>\n\t<meta name=\"robots\" content=\"max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n\t<meta name=\"author\" content=\"Alex Chaplinsky\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/railsware.com\/blog\/object-oriented-thinking-in-css\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.10\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"| Blog on Engineering, Product Management, Transparency, Culture and many more...\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Object Oriented Thinking in CSS | Railsware Blog\" \/>\n\t\t<meta property=\"og:description\" content=\"Most modern methodologies like OOCSS, BEM, SMACSS are all about learning to think about your UI and CSS in terms of objects. Which appeared to be really useful and flexible approach to organize and reuse code-base leaving it simple and DRY. Objects are simple independent and indivisible components that are used across the project. We\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/railsware.com\/blog\/object-oriented-thinking-in-css\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2013\/10\/oocss.png\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2013\/10\/oocss.png\" \/>\n\t\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2013-10-22T14:59:55+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2021-08-15T12:09:10+00:00\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/railsware.com\\\/blog\\\/object-oriented-thinking-in-css\\\/#article\",\"name\":\"Object Oriented Thinking in CSS | Railsware Blog\",\"headline\":\"Object Oriented Thinking in CSS\",\"author\":{\"@id\":\"https:\\\/\\\/railsware.com\\\/blog\\\/author\\\/alexander-chaplinsky\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/railsware.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/railsware.com\\\/blog\\\/wp-content\\\/uploads\\\/2013\\\/10\\\/oocss.png\",\"width\":150,\"height\":150},\"datePublished\":\"2013-10-22T17:59:55+03:00\",\"dateModified\":\"2021-08-15T15:09:10+03:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/railsware.com\\\/blog\\\/object-oriented-thinking-in-css\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/railsware.com\\\/blog\\\/object-oriented-thinking-in-css\\\/#webpage\"},\"articleSection\":\"Engineering\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/railsware.com\\\/blog\\\/object-oriented-thinking-in-css\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/railsware.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/railsware.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/railsware.com\\\/blog\\\/category\\\/development\\\/#listItem\",\"name\":\"Engineering\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/railsware.com\\\/blog\\\/category\\\/development\\\/#listItem\",\"position\":2,\"name\":\"Engineering\",\"item\":\"https:\\\/\\\/railsware.com\\\/blog\\\/category\\\/development\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/railsware.com\\\/blog\\\/object-oriented-thinking-in-css\\\/#listItem\",\"name\":\"Object Oriented Thinking in CSS\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/railsware.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/railsware.com\\\/blog\\\/object-oriented-thinking-in-css\\\/#listItem\",\"position\":3,\"name\":\"Object Oriented Thinking in CSS\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/railsware.com\\\/blog\\\/category\\\/development\\\/#listItem\",\"name\":\"Engineering\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/railsware.com\\\/blog\\\/#organization\",\"description\":\"Blog on Engineering, Product Management, Transparency, Culture and many more...\",\"url\":\"https:\\\/\\\/railsware.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/railsware.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/Logo-circle.png\",\"@id\":\"https:\\\/\\\/railsware.com\\\/blog\\\/object-oriented-thinking-in-css\\\/#organizationLogo\",\"width\":3137,\"height\":1054,\"caption\":\"Railsware logo\"},\"image\":{\"@id\":\"https:\\\/\\\/railsware.com\\\/blog\\\/object-oriented-thinking-in-css\\\/#organizationLogo\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/railsware.com\\\/blog\\\/author\\\/alexander-chaplinsky\\\/#author\",\"url\":\"https:\\\/\\\/railsware.com\\\/blog\\\/author\\\/alexander-chaplinsky\\\/\",\"name\":\"Alex Chaplinsky\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/railsware.com\\\/blog\\\/object-oriented-thinking-in-css\\\/#authorImage\",\"url\":\"https:\\\/\\\/railsware.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/alex-chaplinsky-96x96.jpg\",\"width\":96,\"height\":96,\"caption\":\"Alex Chaplinsky\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/railsware.com\\\/blog\\\/object-oriented-thinking-in-css\\\/#webpage\",\"url\":\"https:\\\/\\\/railsware.com\\\/blog\\\/object-oriented-thinking-in-css\\\/\",\"name\":\"Object Oriented Thinking in CSS | Railsware Blog\",\"description\":\"Most modern methodologies like OOCSS, BEM, SMACSS are all about learning to think about your UI and CSS in terms of objects. Which appeared to be really useful and flexible approach to organize and reuse code-base leaving it simple and DRY. Objects are simple independent and indivisible components that are used across the project. We\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/railsware.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/railsware.com\\\/blog\\\/object-oriented-thinking-in-css\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/railsware.com\\\/blog\\\/author\\\/alexander-chaplinsky\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/railsware.com\\\/blog\\\/author\\\/alexander-chaplinsky\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/railsware.com\\\/blog\\\/wp-content\\\/uploads\\\/2013\\\/10\\\/oocss.png\",\"@id\":\"https:\\\/\\\/railsware.com\\\/blog\\\/object-oriented-thinking-in-css\\\/#mainImage\",\"width\":150,\"height\":150},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/railsware.com\\\/blog\\\/object-oriented-thinking-in-css\\\/#mainImage\"},\"datePublished\":\"2013-10-22T17:59:55+03:00\",\"dateModified\":\"2021-08-15T15:09:10+03:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/railsware.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/railsware.com\\\/blog\\\/\",\"description\":\"Blog on Engineering, Product Management, Transparency, Culture and many more...\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/railsware.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Object Oriented Thinking in CSS | Railsware Blog","description":"Most modern methodologies like OOCSS, BEM, SMACSS are all about learning to think about your UI and CSS in terms of objects. Which appeared to be really useful and flexible approach to organize and reuse code-base leaving it simple and DRY. Objects are simple independent and indivisible components that are used across the project. We","canonical_url":"https:\/\/railsware.com\/blog\/object-oriented-thinking-in-css\/","robots":"max-snippet:-1, max-image-preview:large, max-video-preview:-1","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/railsware.com\/blog\/object-oriented-thinking-in-css\/#article","name":"Object Oriented Thinking in CSS | Railsware Blog","headline":"Object Oriented Thinking in CSS","author":{"@id":"https:\/\/railsware.com\/blog\/author\/alexander-chaplinsky\/#author"},"publisher":{"@id":"https:\/\/railsware.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2013\/10\/oocss.png","width":150,"height":150},"datePublished":"2013-10-22T17:59:55+03:00","dateModified":"2021-08-15T15:09:10+03:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/railsware.com\/blog\/object-oriented-thinking-in-css\/#webpage"},"isPartOf":{"@id":"https:\/\/railsware.com\/blog\/object-oriented-thinking-in-css\/#webpage"},"articleSection":"Engineering"},{"@type":"BreadcrumbList","@id":"https:\/\/railsware.com\/blog\/object-oriented-thinking-in-css\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/railsware.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/railsware.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/railsware.com\/blog\/category\/development\/#listItem","name":"Engineering"}},{"@type":"ListItem","@id":"https:\/\/railsware.com\/blog\/category\/development\/#listItem","position":2,"name":"Engineering","item":"https:\/\/railsware.com\/blog\/category\/development\/","nextItem":{"@type":"ListItem","@id":"https:\/\/railsware.com\/blog\/object-oriented-thinking-in-css\/#listItem","name":"Object Oriented Thinking in CSS"},"previousItem":{"@type":"ListItem","@id":"https:\/\/railsware.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/railsware.com\/blog\/object-oriented-thinking-in-css\/#listItem","position":3,"name":"Object Oriented Thinking in CSS","previousItem":{"@type":"ListItem","@id":"https:\/\/railsware.com\/blog\/category\/development\/#listItem","name":"Engineering"}}]},{"@type":"Organization","@id":"https:\/\/railsware.com\/blog\/#organization","description":"Blog on Engineering, Product Management, Transparency, Culture and many more...","url":"https:\/\/railsware.com\/blog\/","logo":{"@type":"ImageObject","url":"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2020\/11\/Logo-circle.png","@id":"https:\/\/railsware.com\/blog\/object-oriented-thinking-in-css\/#organizationLogo","width":3137,"height":1054,"caption":"Railsware logo"},"image":{"@id":"https:\/\/railsware.com\/blog\/object-oriented-thinking-in-css\/#organizationLogo"}},{"@type":"Person","@id":"https:\/\/railsware.com\/blog\/author\/alexander-chaplinsky\/#author","url":"https:\/\/railsware.com\/blog\/author\/alexander-chaplinsky\/","name":"Alex Chaplinsky","image":{"@type":"ImageObject","@id":"https:\/\/railsware.com\/blog\/object-oriented-thinking-in-css\/#authorImage","url":"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2021\/06\/alex-chaplinsky-96x96.jpg","width":96,"height":96,"caption":"Alex Chaplinsky"}},{"@type":"WebPage","@id":"https:\/\/railsware.com\/blog\/object-oriented-thinking-in-css\/#webpage","url":"https:\/\/railsware.com\/blog\/object-oriented-thinking-in-css\/","name":"Object Oriented Thinking in CSS | Railsware Blog","description":"Most modern methodologies like OOCSS, BEM, SMACSS are all about learning to think about your UI and CSS in terms of objects. Which appeared to be really useful and flexible approach to organize and reuse code-base leaving it simple and DRY. Objects are simple independent and indivisible components that are used across the project. We","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/railsware.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/railsware.com\/blog\/object-oriented-thinking-in-css\/#breadcrumblist"},"author":{"@id":"https:\/\/railsware.com\/blog\/author\/alexander-chaplinsky\/#author"},"creator":{"@id":"https:\/\/railsware.com\/blog\/author\/alexander-chaplinsky\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2013\/10\/oocss.png","@id":"https:\/\/railsware.com\/blog\/object-oriented-thinking-in-css\/#mainImage","width":150,"height":150},"primaryImageOfPage":{"@id":"https:\/\/railsware.com\/blog\/object-oriented-thinking-in-css\/#mainImage"},"datePublished":"2013-10-22T17:59:55+03:00","dateModified":"2021-08-15T15:09:10+03:00"},{"@type":"WebSite","@id":"https:\/\/railsware.com\/blog\/#website","url":"https:\/\/railsware.com\/blog\/","description":"Blog on Engineering, Product Management, Transparency, Culture and many more...","inLanguage":"en-US","publisher":{"@id":"https:\/\/railsware.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"| Blog on Engineering, Product Management, Transparency, Culture and many more...","og:type":"article","og:title":"Object Oriented Thinking in CSS | Railsware Blog","og:description":"Most modern methodologies like OOCSS, BEM, SMACSS are all about learning to think about your UI and CSS in terms of objects. Which appeared to be really useful and flexible approach to organize and reuse code-base leaving it simple and DRY. Objects are simple independent and indivisible components that are used across the project. We","og:url":"https:\/\/railsware.com\/blog\/object-oriented-thinking-in-css\/","og:image":"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2013\/10\/oocss.png","og:image:secure_url":"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2013\/10\/oocss.png","og:image:width":150,"og:image:height":150,"article:published_time":"2013-10-22T14:59:55+00:00","article:modified_time":"2021-08-15T12:09:10+00:00"},"aioseo_meta_data":{"post_id":"5961","title":null,"description":null,"keywords":[],"keyphrases":{"focus":[],"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":[],"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":{"id":"aioseo-article-6385f5b18c4c9","slug":"article","graphName":"Article","label":"Article","properties":{"type":"BlogPosting","name":"#post_title","headline":"#post_title","description":"#post_excerpt","image":"","keywords":"","author":{"name":"#author_name","url":"#author_url"},"dates":{"include":true,"datePublished":"","dateModified":""}}},"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":"{\"article\":{\"articleType\":\"BlogPosting\"},\"course\":{\"name\":\"\",\"description\":\"\",\"provider\":\"\"},\"faq\":{\"pages\":[]},\"product\":{\"reviews\":[]},\"recipe\":{\"ingredients\":[],\"instructions\":[],\"keywords\":[]},\"software\":{\"reviews\":[],\"operatingSystems\":[]},\"webPage\":{\"webPageType\":\"WebPage\"}}","pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","location":null,"local_seo":{"locations":{"business":{"name":"","businessType":"","image":"","areaServed":"","urls":{"website":"","aboutPage":"","contactPage":""},"address":{"streetLine1":"","streetLine2":"","zipCode":"","city":"","state":"","country":"","addressFormat":"#streetLineOne\n#streetLineTwo\n#city, #state #zipCode"},"contact":{"email":"","phone":"","phoneFormatted":"","fax":"","faxFormatted":""},"ids":{"vat":"","tax":"","chamberOfCommerce":""},"payment":{"priceRange":"","currenciesAccepted":"","methods":""}}},"openingHours":{"useDefaults":true,"show":true,"alwaysOpen":false,"use24hFormat":false,"timezone":"","labels":{"closed":"","alwaysOpen":""},"days":{"monday":{"open24h":false,"closed":false,"openTime":"09:00","closeTime":"17:00"},"tuesday":{"open24h":false,"closed":false,"openTime":"09:00","closeTime":"17:00"},"wednesday":{"open24h":false,"closed":false,"openTime":"09:00","closeTime":"17:00"},"thursday":{"open24h":false,"closed":false,"openTime":"09:00","closeTime":"17:00"},"friday":{"open24h":false,"closed":false,"openTime":"09:00","closeTime":"17:00"},"saturday":{"open24h":false,"closed":false,"openTime":"09:00","closeTime":"17:00"},"sunday":{"open24h":false,"closed":false,"openTime":"09:00","closeTime":"17:00"}}}},"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2021-01-04 12:44:29","updated":"2025-09-26 11:19:39","seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/railsware.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/railsware.com\/blog\/category\/development\/\" title=\"Engineering\">Engineering<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tObject Oriented Thinking in CSS\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/railsware.com\/blog"},{"label":"Engineering","link":"https:\/\/railsware.com\/blog\/category\/development\/"},{"label":"Object Oriented Thinking in CSS","link":"https:\/\/railsware.com\/blog\/object-oriented-thinking-in-css\/"}],"reading_time":"3 min read","categories_data":[{"name":"Engineering","link":"https:\/\/railsware.com\/blog?category=development"}],"post_thumbnails":"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2013\/10\/oocss.png","article_background":"","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts\/5961","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/comments?post=5961"}],"version-history":[{"count":56,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts\/5961\/revisions"}],"predecessor-version":[{"id":14064,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts\/5961\/revisions\/14064"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/media\/6047"}],"wp:attachment":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/media?parent=5961"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/categories?post=5961"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/tags?post=5961"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/coauthors?post=5961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}