{"id":26325,"date":"2016-04-11T23:16:11","date_gmt":"2016-04-11T15:16:11","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=26325"},"modified":"2024-09-03T23:08:08","modified_gmt":"2024-09-03T15:08:08","slug":"css-writing-methodologies","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-writing-methodologies\/","title":{"rendered":"Mastering Effective CSS Writing Methodologies"},"content":{"rendered":"<p class=\"note\"><strong>Editor\u2019s note:<\/strong> This article is part of our <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/code-optimization-series\/\">Code Optimization series<\/a>, where we explore how to optimize coding for better efficiency and become better developers.<\/p>\n<p>In this post, we\u2019re going to explore <strong>CSS writing methodologies<\/strong>, discuss some well-known approaches, and understand how they can help us optimize our CSS code. Let\u2019s start with the basics: What is a methodology?<\/p>\n<p>A methodology is <strong>a systematic approach<\/strong>. Think of it as a structured way of doing something, a predefined method to achieve the desired results effectively.<\/p>\n<p>To improve outcomes, <strong>we refine our methods through better planning<\/strong>, reordering steps, simplifying processes, and doing whatever it takes to work <strong>faster<\/strong> and more <strong>efficiently<\/strong>.<\/p>\n<h2>CSS Methodology<\/h2>\n<p>Now, let\u2019s dive into CSS methodology. Just like many things in life, we have a method for writing CSS too: some prefer starting with reset CSS, others place layout styles at the end, some begin with a couple of classes for styling an element, while others may write all the CSS code in a single file.<\/p>\n<p>These preferred methods may develop over time through personal experience, influence from others, workplace requirements, or a combination of these factors. Over the years, CSS veterans have developed <strong>methodologies for writing CSS<\/strong> that are more <strong>flexible, defined, reusable, understandable<\/strong>, and <strong>manageable<\/strong>.<\/p>\n<p>We\u2019ll be looking at these established methodologies, including:<\/p>\n<ul>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"#oocss\">OOCSS<\/a> (Object-Oriented CSS)<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"#bem\">BEM<\/a> (Block, Element, Modifier)<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"#acss\">ACSS<\/a> (Atomic CSS)<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"#smacss\">SMACSS<\/a> (Scalable and Modular Architecture for CSS)<\/li>\n<\/ul>\n<p><strong>Note<\/strong>: The concepts discussed below should not be confused with any framework, library, or tool that shares the same name. This post is focused solely on the methodologies for writing CSS.<\/p>\n<h2 id=\"oocss\">1. OOCSS<\/h2>\n<p>Developed by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/www.stubbornella.org\">Nicole Sullivan<\/a> in 2008, OOCSS (Object-Oriented CSS) emphasizes key concepts such as CSS <em>object<\/em> identification, the separation of structure and visual styles, and the avoidance of location-based styles.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-writing-methodologies\/oocss.jpg\" width=\"800\" height=\"488\" alt=\"OOCSS concept illustration\"><\/figure>\n<p>In OOCSS, Nicole\u2019s first recommendation is to <strong>identify objects in CSS<\/strong>.<\/p>\n<p><em>\u201cBasically, a CSS \"object\" is a repeating visual pattern that can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript. That object can then be reused throughout a site.\u201d \u2013 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/stubbornella\">Nicole Sullivan, GitHub (OOCSS)<\/a><\/em><\/p>\n<p>Consider this structure from the site as an example. Here\u2019s a repeating visual pattern that has its own independent HTML and\/or CSS:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-writing-methodologies\/css-methodologies-object.jpg\" alt=\"Example of OOCSS objects\" width=\"848\" height=\"466\"><\/figure>\n<p>We can identify two types of objects here: a larger preview of titles, which we\u2019ll name <code>post-preview-primary<\/code>, and a sidebar with titles, which we\u2019ll name <code>post-preview-secondary<\/code>.<\/p>\n<p>Next, we need to <strong>separate structure and skin<\/strong> (i.e., the styles that define the objects\u2019 appearance). The two types of objects have different structures, even though they look similar \u2013 one is in a larger box with images to the left and titles to the right.<\/p>\n<p>Let\u2019s assign the images of both objects the class <code>post-preview-image<\/code> and add the CSS that positions the image on the left. This approach prevents code repetition regarding image placement inside objects in CSS. For other similar objects, we can simply reuse the <code>post-preview-image<\/code> class.<\/p>\n<p>Skin separation can also be applied to simpler styles, such as <strong>borders or backgrounds<\/strong>. If multiple objects share the same blue border, <strong>creating a separate class for the blue border<\/strong> and applying it to the objects will <strong>reduce the number of times the blue border code needs to be written<\/strong> in CSS.<\/p>\n<p>Nicole also advises <em><strong>against<\/strong><\/em> <strong>adding styles based on location<\/strong>. For instance, instead of targeting all links inside a particular div for highlighting, assign those links a <strong>highlighter class<\/strong> with the appropriate CSS styles. This way, when you need to highlight a link elsewhere on the page, you can reuse the highlighter class.<\/p>\n<ul>\n<li><strong>Pros of OOCSS:<\/strong> Reusable visual styling, location-independent code, and reduced deep nesting of selectors.<\/li>\n<li><strong>Cons of OOCSS:<\/strong> If there aren\u2019t many repeating visual patterns, separating structure and visual style code may seem unnecessary.<\/li>\n<\/ul>\n<h2 id=\"bem\">2. BEM<\/h2>\n<p>Developed by Yandex developers in 2009, BEM (Block, Element, Modifier) focuses on identifying <em>blocks<\/em>, <em>elements<\/em>, and <em>modifiers<\/em> and naming them accordingly.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-writing-methodologies\/bem.jpg\" width=\"800\" height=\"488\" alt=\"BEM methodology example\"><\/figure>\n<p>A \u201cblock\u201d is similar to an \u201cobject\u201d (as mentioned in the OOCSS example). An \u201celement\u201d refers to the components within the block, such as an image, title, or preview text in the <code>preview-post - <\/code> objects. A \u201cmodifier\u201d is used when the state of a block or element changes; for instance, adding an active class to a menu item to highlight it \u2013 the active class serves as your modifier.<\/p>\n<p>Once you\u2019ve identified the components, name them accordingly. For example:<\/p>\n<ul>\n<li>A menu block will have the class <code>menu<\/code><\/li>\n<li>Its items will have the class <code>menu__item<\/code> (block and element are separated by a double underscore)<\/li>\n<li>The modifier for the disabled state of the menu can have the class <code>menu_disabled<\/code> (modifier delimited by a single underscore)<\/li>\n<li>The modifier for the disabled state of a menu item can be <code>menu__item_disabled<\/code><\/li>\n<\/ul>\n<p>For modifiers, you can also use the <code>key_value<\/code> format for naming. For example, to distinguish menu items that link to obsolete articles, you can use the class <code>menu__item_status_obsolete<\/code>, and for styling menu items that point to pending documents, the class name can be <code>menu__item_status_pending<\/code>.<\/p>\n<p>The naming convention can be adjusted to suit your needs. The key is to ensure you can easily <strong>identify blocks, elements, and modifiers from the class names<\/strong>. For more naming conventions, check out the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.bem.info\/method\/naming-convention\/\">BEM site<\/a>.<\/p>\n<p>The BEM site also outlines <strong>how block, element, and modifier segregation can be applied to the CSS file system<\/strong>. Blocks like \u201cbuttons\u201d and \u201cinputs\u201d can have their own folders containing associated files (.css, .js), making it easier to import these blocks into other projects.<\/p>\n<ul>\n<li><strong>Pros of BEM:<\/strong> Easy-to-use class names and a reduction in deep CSS selectors.<\/li>\n<li><strong>Cons of BEM:<\/strong> To maintain clear and manageable class names, BEM recommends keeping block-to-element nesting shallow.<\/li>\n<\/ul>\n<h2 id=\"acss\">3. ACSS<\/h2>\n<p>Popularized by Yahoo toward the end of the first decade of the 21<sup>st<\/sup> century, ACSS (Atomic CSS) focuses on creating classes for the most atomic level of styling, i.e., a property-value pair, and then using them in HTML as needed.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-writing-methodologies\/acss.jpg\" width=\"800\" height=\"488\" alt=\"ACSS example in practice\"><\/figure>\n<p>Determining when ACSS was first developed is challenging, as the concept has been around for a while. Developers have long used classes like <code>.clearfix{overflow: hidden}<\/code>. The idea behind ACSS is to <strong>create a class for nearly every reusable non-content-related property-value pair<\/strong> needed on the site, then apply those classes to HTML elements as required.<\/p>\n<p>Below is an example of classes based on ACSS and how they are used in HTML:<\/p>\n<pre>\r\n .mr-8{margin-right: 8px;}\r\n .fl-r{float:right;}\r\n \r\n &lt;div class='mr-8 fl-r'&gt; &lt;\/div&gt;\r\n<\/pre>\n<p>As you can see, this method can lead to a large number of classes, making the HTML quite crowded. While this method isn\u2019t 100% efficient, it can be useful when implemented appropriately. After all, Yahoo uses it.<\/p>\n<ul>\n<li><strong>Pros of ACSS:<\/strong> Styling HTML directly within the HTML structure.<\/li>\n<li><strong>Cons of ACSS:<\/strong> Excessive classes, cluttered HTML, and it may not appeal to everyone.<\/li>\n<\/ul>\n<h2 id=\"smacss\">4. SMACSS<\/h2>\n<p>Developed in 2011 by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/snook.ca\/\">Jonathan Snook<\/a>, SMACSS (Scalable and Modular Architecture for CSS) organizes CSS by identifying five distinct types of style rules, with class names and file systems created accordingly.<\/p>\n<p><em>\u201cSMACSS is a way to examine your design process and to fit those rigid frameworks into a flexible thought process.\u201d \u2013 Jonathan Snook<\/em><\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-writing-methodologies\/smacss.jpg\" width=\"800\" height=\"488\" alt=\"SMACSS methodology example\"><\/figure>\n<p>SMACSS identifies five types of style rules: <strong>base, layout, module, state<\/strong>, and <strong>theme<\/strong>.<\/p>\n<ul>\n<li><strong>Base styles:<\/strong> Default styles applied to basic HTML tags like <code>&lt;p&gt;<\/code> and <code>&lt;a&gt;<\/code>.<\/li>\n<li><strong>Layout styles:<\/strong> Styles that define the page layout, such as coding the placement of the header, footer, and side menus.<\/li>\n<li><strong>Module styles:<\/strong> Styles specific to a module, like a gallery or slideshow.<\/li>\n<li><strong>State styles:<\/strong> Styles for elements with changeable states, like hidden or disabled elements.<\/li>\n<li><strong>Theme styles:<\/strong> Styles used to change the visual scheme of the page.<\/li>\n<\/ul>\n<p>These different style rules can be identified using a prefix in the class name, such as <code>l-header<\/code> (for layout) or <code>t-header<\/code> (for theme). Additionally, these types of rules can be organized by placing them in separate files and folders.<\/p>\n<ul>\n<li><strong>Pros of SMACSS:<\/strong> Better-organized code.<\/li>\n<li><strong>Cons of SMACSS:<\/strong> None that come to mind.<\/li>\n<\/ul>\n<p>There\u2019s a free <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/smacss.com\/book\/\">online book<\/a> you can read about SMACSS, or you can purchase its <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/smacss.com\/getsmacked\">ebook<\/a> version to study it further.<\/p>\n<h2>Conclusion<\/h2>\n<p>The CSS methodologies discussed above provide a structured approach to <strong>managing and optimizing your CSS code<\/strong>. These methodologies can be combined, such as OOCSS-SMACSS, OOCSS-BEM, or BEM-SMACSS, to best fit your project needs.<\/p>\n<p>If you\u2019re looking for an automated system to implement CSS methodologies, there are frameworks and libraries available, such as:<\/p>\n<ul>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/stubbornella\/oocss\/wiki\">OOCSS framework<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.bem.info\/tools\/\">BEM tools<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/krasimir.github.io\/organic-css\/\">Organic CSS framework (based on the atomic concept)<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Editor\u2019s note: This article is part of our Code Optimization series, where we explore how to optimize coding for better efficiency and become better developers. In this post, we\u2019re going to explore CSS writing methodologies, discuss some well-known approaches, and understand how they can help us optimize our CSS code. Let\u2019s start with the basics:&hellip;<\/p>\n","protected":false},"author":145,"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":[3427,507,4501,3761],"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.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Mastering Effective CSS Writing Methodologies - Hongkiat<\/title>\n<meta name=\"description\" content=\"Editor&#039;s note: This article is part of our Code Optimization series, where we explore how to optimize coding for better efficiency and become better\" \/>\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\/css-writing-methodologies\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mastering Effective CSS Writing Methodologies\" \/>\n<meta property=\"og:description\" content=\"Editor&#039;s note: This article is part of our Code Optimization series, where we explore how to optimize coding for better efficiency and become better\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-writing-methodologies\/\" \/>\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-04-11T15:16:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-03T15:08:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-writing-methodologies\/oocss.jpg\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\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=\"Preethi Ranjit\" \/>\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\\\/css-writing-methodologies\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-writing-methodologies\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"Mastering Effective CSS Writing Methodologies\",\"datePublished\":\"2016-04-11T15:16:11+00:00\",\"dateModified\":\"2024-09-03T15:08:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-writing-methodologies\\\/\"},\"wordCount\":1379,\"commentCount\":20,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-writing-methodologies\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-writing-methodologies\\\/oocss.jpg\",\"keywords\":[\"Code Optimization\",\"CSS\",\"CSS Tutorials\",\"Series: Code Optimization\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-writing-methodologies\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-writing-methodologies\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-writing-methodologies\\\/\",\"name\":\"Mastering Effective CSS Writing Methodologies - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-writing-methodologies\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-writing-methodologies\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-writing-methodologies\\\/oocss.jpg\",\"datePublished\":\"2016-04-11T15:16:11+00:00\",\"dateModified\":\"2024-09-03T15:08:08+00:00\",\"description\":\"Editor's note: This article is part of our Code Optimization series, where we explore how to optimize coding for better efficiency and become better\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-writing-methodologies\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-writing-methodologies\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-writing-methodologies\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-writing-methodologies\\\/oocss.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-writing-methodologies\\\/oocss.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-writing-methodologies\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mastering Effective CSS Writing Methodologies\"}]},{\"@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\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Mastering Effective CSS Writing Methodologies - Hongkiat","description":"Editor's note: This article is part of our Code Optimization series, where we explore how to optimize coding for better efficiency and become better","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\/css-writing-methodologies\/","og_locale":"en_US","og_type":"article","og_title":"Mastering Effective CSS Writing Methodologies","og_description":"Editor's note: This article is part of our Code Optimization series, where we explore how to optimize coding for better efficiency and become better","og_url":"https:\/\/www.hongkiat.com\/blog\/css-writing-methodologies\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-04-11T15:16:11+00:00","article_modified_time":"2024-09-03T15:08:08+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-writing-methodologies\/oocss.jpg","type":"","width":"","height":""}],"author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-writing-methodologies\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-writing-methodologies\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"Mastering Effective CSS Writing Methodologies","datePublished":"2016-04-11T15:16:11+00:00","dateModified":"2024-09-03T15:08:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-writing-methodologies\/"},"wordCount":1379,"commentCount":20,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-writing-methodologies\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-writing-methodologies\/oocss.jpg","keywords":["Code Optimization","CSS","CSS Tutorials","Series: Code Optimization"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-writing-methodologies\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-writing-methodologies\/","url":"https:\/\/www.hongkiat.com\/blog\/css-writing-methodologies\/","name":"Mastering Effective CSS Writing Methodologies - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-writing-methodologies\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-writing-methodologies\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-writing-methodologies\/oocss.jpg","datePublished":"2016-04-11T15:16:11+00:00","dateModified":"2024-09-03T15:08:08+00:00","description":"Editor's note: This article is part of our Code Optimization series, where we explore how to optimize coding for better efficiency and become better","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-writing-methodologies\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-writing-methodologies\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-writing-methodologies\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-writing-methodologies\/oocss.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-writing-methodologies\/oocss.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-writing-methodologies\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Mastering Effective CSS Writing Methodologies"}]},{"@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\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6QB","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26325","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\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=26325"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26325\/revisions"}],"predecessor-version":[{"id":72809,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26325\/revisions\/72809"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=26325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=26325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=26325"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=26325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}