[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"cms-page:\u002Fblog\u002Fobject-oriented-front-end-framework":3},{"date":4,"date_gmt":4,"content":5,"sticky":7,"format":8,"categories":9,"collections":11,"coauthors":12,"class_list":14,"acf":23,"head_links":316,"breadcrumbs":317,"reading_minutes":133,"category":325,"head":327},"2016-07-26T11:01:05",{"rendered":6},"\u003Ch2 id=\"introduction\">Introduction\u003C\u002Fh2>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Object Oriented Programming (OOP) is a widely used programming paradigm, typically seen in back-end development languages such as \u003C\u002Fspan>\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FJava_(programming_language)\">\u003Cspan style=\"font-weight: 400;\">Java\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">, \u003C\u002Fspan>\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FC%2B%2B\">\u003Cspan style=\"font-weight: 400;\">C++\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">,\u003C\u002Fspan> \u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FC_Sharp_(programming_language)\">\u003Cspan style=\"font-weight: 400;\">C#\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">,\u003C\u002Fspan> \u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FPython_(programming_language)\">\u003Cspan style=\"font-weight: 400;\">Python\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">,\u003C\u002Fspan> \u003Cspan style=\"font-weight: 400;\">and\u003C\u002Fspan> \u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FPHP\">\u003Cspan style=\"font-weight: 400;\">PHP\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">. It essentially  preaches the encouragement of\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\"> code reuse and, ultimately, a faster and more efficient codebase that is easier to expand, maintain and understand. This is something that is becoming more and more relevant in modern front end environments, especially with the introduction of SASS which encourages the use of a directory structure, I’ll explain this in more detail later.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">This post will go over the basics that I consider and implement whenever starting a new front-end development project, and discuss the methodologies behind utilising BEM, SASS and OOCSS to supercharge it. I will also provide a link to the repo I use and maintain for the majority of my static front end projects.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Ch2 id=\"the-principles\">The Principles\u003C\u002Fh2>\n\u003Ch3 id=\"bem-syntax\">\u003Ci>BEM Syntax\u003C\u002Fi>\u003C\u002Fh3>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">BEM, or \u003C\u002Fspan>\u003Ci>\u003Cspan style=\"font-weight: 400;\">Block, Element, Modifier\u003C\u002Fspan>\u003C\u002Fi>\u003Cspan style=\"font-weight: 400;\"> is a front-end naming methodology which essentially offers a structured way of naming CSS classes to give them more meaning and encourage reusable code that is transparent for other developers. Harry at CSSWizardry wrote a \u003C\u002Fspan>\u003Ca rel=\"noreferrer noopener\" href=\"http:\u002F\u002Fcsswizardry.com\u002F2013\u002F01\u002Fmindbemding-getting-your-head-round-bem-syntax\u002F\">\u003Cspan style=\"font-weight: 400;\">great article\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> explaining this in much more detail, for now I’ll cover the very basics.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">The\u003C\u002Fspan> \u003Ca rel=\"noreferrer noopener\" href=\"http:\u002F\u002Fgetbem.com\u002Fnaming\u002F\">\u003Cspan style=\"font-weight: 400;\">BEM website\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> explains that \u003C\u002Fspan>\u003Ci>\u003Cspan style=\"font-weight: 400;\">“The BEM approach ensures that everyone who participates in the development of a website works with a single codebase and speaks the same language. Using proper naming will prepare you for the changes in design of the website.”\u003C\u002Fspan>\u003C\u002Fi>\u003C\u002Fp>\n\u003Cp>The naming conventions mentioned follow the pattern below:\u003C\u002Fp>\n\u003Cpre>\u003Cspan style=\"font-weight: 400;\">.block {} \u003C\u002Fspan>\u003C\u002Fpre>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Encapsulates a standalone entity that is meaningful on its own. While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy, for example .header {}\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre>\u003Cspan style=\"font-weight: 400;\">.block__element {}\u003C\u002Fspan>\u003C\u002Fpre>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Parts of a block and have no standalone meaning.  Any element is semantically tied to its block, for example .header__logo\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre>\u003Cspan style=\"font-weight: 400;\">.block--modifier {} \u003C\u002Fspan>\u003C\u002Fpre>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Flags on blocks or elements. Use them to change appearance, behavior or state, for example .button–success {}\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Ch3 id=\"sass\">\u003Cb>\u003Ci>SASS\u003C\u002Fi>\u003C\u002Fb>\u003C\u002Fh3>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">The \u003C\u002Fspan>\u003Ca rel=\"noreferrer noopener\" href=\"http:\u002F\u002Fsass-lang.com\u002F\">\u003Cspan style=\"font-weight: 400;\">SASS website\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> gloats that it is \u003C\u002Fspan>\u003Ci>\u003Cspan style=\"font-weight: 400;\">“the most mature, stable, and powerful professional grade CSS extension language in the world” \u003C\u002Fspan>\u003C\u002Fi>\u003Cspan style=\"font-weight: 400;\">and it definitely lives up to it’s claims. Most front-end developers will be more than clued up on this preprocessor, so I’ll just cover the very basics, for a more detailed overview on why you should consider using SASS, there’s a great article by Dan Cederholm at \u003C\u002Fspan>\u003Ca rel=\"noreferrer noopener\" href=\"http:\u002F\u002Falistapart.com\u002Farticle\u002Fwhy-sass\">\u003Cspan style=\"font-weight: 400;\">A List Apart\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">SASS essentially brings a plethora of new features to vanilla CSS that make larger, more complex codebases much easier to maintain, for example nesting, variables, mixins and much more. \u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">The main feature of SASS I’ll be talking about in this article is the ability to separate your stylesheets into separate files. This allows you to use the @import directive to include the source of your individual files into one master stylesheet, essentially allowing the setup up an object oriented directory structure.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Ch3 id=\"oocss\">\u003Cb>\u003Ci>OOCSS\u003C\u002Fi>\u003C\u002Fb>\u003C\u002Fh3>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">OOCSS or \u003C\u002Fspan>\u003Ci>\u003Cspan style=\"font-weight: 400;\">Object Oriented CSS \u003C\u002Fspan>\u003C\u002Fi>\u003Cspan style=\"font-weight: 400;\">is an approach for writing CSS that’s fast, maintainable, and standards-based, pioneered by \u003C\u002Fspan>\u003Ca rel=\"noreferrer noopener\" href=\"http:\u002F\u002Fwww.stubbornella.org\u002Fcontent\u002F\">\u003Cspan style=\"font-weight: 400;\">Nicola Sullivan\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">, she explains that\u003C\u002Fspan> \u003Ci>\u003Cspan style=\"font-weight: 400;\">“It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites”. \u003C\u002Fspan>\u003C\u002Fi>\u003Cspan style=\"font-weight: 400;\">It is based on two main principles which are explained in more detail \u003C\u002Fspan>\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fgithub.com\u002Fstubbornella\u002Foocss\u002Fwiki\">\u003Cspan style=\"font-weight: 400;\">here\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli style=\"font-weight: 400;\">Separate structure and skin\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\">Separate container and content\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">The overall idea is to create 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.\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">\u003Cbr \u002F>\n\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp>\u003Cimg loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2731\" src=\"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F05\u002FV4EnfE03-1.png?auto=compress%2Cformat&q=90\" alt=\"1\" width=\"1200\" height=\"420\" \u002F>\u003C\u002Fp>\n\u003Ch2 id=\"getting-started\">\u003Cb>Getting Started\u003C\u002Fb>\u003C\u002Fh2>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">As previously mentioned, the introduction of SASS allows for the ability to separate your stylesheets and create a directory, this is the first thing I consider when starting a new project, the boilerplate I’ve created (github repo towards the bottom of this article) has a generic ‘starter point’ with a few preset files, it is structured in an object oriented way as follows:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre>scss\u002F\n|\n|-- modules\u002F              # Modules\n|   |--_config.scss       # project configuration\n|   |--_mixins.scss       # include Mixins\n|   |--_maps.scss         # include SASS Maps\n|\n|-- partials\u002F             # Partials\n|   |--_reset.sass        # css reset\n|   |--_grid.scss         # grids\n|   |--_buttons.sass      # buttons\n|   |--_typography.scss   # typography\n|   |--_spacing.scss      # padding\u002Fmargin modifiers\n|   |--_displays.scss     # display modifiers\n|\n-- main.scss             # primary Sass file\u003C\u002Fpre>\n\u003Cp> \u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">To break this down further,  I use the main.scss file in the root to pull in all my modules and partials, this means I have one global place to keep track of my imports, as you can see in the below example, the file is incredibly easy to understand and acts as a great place to build my main stylesheet.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre>\u003Cspan style=\"font-weight: 400;\">\u002F\u002F Config files\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\">@import \"modules\u002Fconfig\";\u003C\u002Fspan>\n\n\u003Cspan style=\"font-weight: 400;\">\u002F\u002F Partials files\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\">@import \"partials\u002Freset\";\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\">@import \"partials\u002Fgrid\";\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\">@import \"partials\u002Fcolors\";\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\">@import \"partials\u002Fbuttons\";\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\">@import \"partials\u002Ftypography\";\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\">@import \"partials\u002Fpadding\";\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\">@import \"partials\u002Fdisplays\";\n\n\u003C\u002Fspan>\u003C\u002Fpre>\n\u003Cp> \u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">I use the \u003C\u002Fspan>\u003Cb>modules\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> directory for things such as variables, mixins declarations and other things that don’t actually output any CSS. The _config.scss file works as a base and includes global project variables, such as project specific colours, font stacks, responsive breakpoints etc, by default the  _mixins.scss stylesheet is also imported here (rather than the main.scss) to keep it nice and tidy. You could break this up to be more granular, for example you may want your project specific colours in another stylesheet, this would sit within the modules folder then be imported through _config.scss.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">I use the \u003C\u002Fspan>\u003Cb>partials\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> directory to construct the majority of my CSS, using the OOCSS methodology to break the partials up, I create a granular file structure which breaks up structural elements and modifier elements,  for example, the _buttons.scss file will build the base button styling for the project, as well as modifiers for each, and nothing more. \u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">The structure of this directory changes slightly for each project, there is also room for expansion, for example you may want a \u003C\u002Fspan>\u003Cb>vendor\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> folder, where you can keep files that belong specifically to external libraries, for example, the SCSS for jQuery UI or Bootstrap. \u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp>\u003Cimg loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2732\" src=\"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F05\u002F3HzMJ1dR-2.png?auto=compress%2Cformat&q=90\" alt=\"2\" width=\"1200\" height=\"420\" \u002F>\u003C\u002Fp>\n\u003Ch2 id=\"creating-objects\">\u003Cb>Creating Objects\u003C\u002Fb>\u003C\u002Fh2>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Now the SASS directory is setup, we can start making some objects, we’ll want to be considering the fact that we’re approaching this project in a modular, object oriented way.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Ideally we’d want a style guide to best approach this, but it isn’t completely necessary – some great examples of style guides, and why they can be so helpful can be found \u003C\u002Fspan>\u003Ca rel=\"noreferrer noopener\" href=\"http:\u002F\u002Fstyleguides.io\u002Fexamples.html\">\u003Cspan style=\"font-weight: 400;\">here\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> – they don’t need to be this elaborate, it may be as simple as considering the different font sizes and weights in a methodical way before developing the project. Although this adds a bit of preparation time, it can save time in the long run and serve as an all encompassing guide for expanding the project in the future.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">I’ll use font sizing as an example, and show how i’d approach it for this environment.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Ch3 id=\"font-sizing-preperation\">\u003Cb>\u003Ci>Font Sizing: \u003C\u002Fi>\u003C\u002Fb>\u003Ci>\u003Cspan style=\"font-weight: 400;\">Preperation\u003C\u002Fspan>\u003C\u002Fi>\u003C\u002Fh3>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Instead of applying font sizing to individual elements (for example, .header p.title), we’ll be building some global font sizing selectors. The initial process will be to know the sizes and elements you will be using throughout your site, for example you may have something like the following (very simple) example:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli style=\"font-weight: bold;\">\u003Cb>Heading text\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> – \u003Cem>2.125rem\u003C\u002Fem>\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: bold;\">\u003Cb>Intro Text\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> – \u003Cem>1.125rem\u003C\u002Fem>\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: bold;\">\u003Cb>Paragraphs\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> – \u003Cem>1rem\u003C\u002Fem>\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: bold;\">\u003Cb>Small Paragraphs\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> – \u003Cem>0.875rem\u003C\u002Fem>\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp> \u003C\u002Fp>\n\u003Ch3 id=\"font-sizing-converting-to-variables\">\u003Cb>\u003Ci>Font Sizing: \u003C\u002Fi>\u003C\u002Fb>\u003Ci>\u003Cspan style=\"font-weight: 400;\">Converting to Variables\u003C\u002Fspan>\u003C\u002Fi>\u003C\u002Fh3>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">This may not always be relevant, however, font sizing is a good example of a good time to create variables. As we’ve prepared the required global sizes for the project, we can set these up as variables in our _config.scss file (or split into _font-sizes.scss as mentioned earlier) and refer to that throughout the project, this means if anything changes in the future, say you want to increase the heading text to 38px, you’ll only have to change one value. \u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">The following example shows the previously prepared font sizes as SASS variables:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre>\u003Cspan style=\"font-weight: 400;\">\u002F\u002F Global Font Sizes\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\">$heading-text: 2.125rem;\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\">$intro-text: 1.125rem;\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\">$paragraph-text: 1rem;\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\">$small-paragraph-text: 0.875rem;\n\u003C\u002Fspan>\u003C\u002Fpre>\n\u003Cp> \u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">We can then reference these variables throughout the project, for example:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre>.h1 { font-size: $heading-text; }\u003C\u002Fpre>\n\u003Cp> \u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">However we want to do this in an object oriented way and create a global, reusable class. This can be achieved by utilising the BEM methodology and creating a global \u003Ci>\u003Cspan style=\"font-weight: 400;\">modifier\u003C\u002Fspan>\u003C\u002Fi>\u003Cspan style=\"font-weight: 400;\"> class, for example, we could do something like the example below.\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Ch3 id=\"font-sizing-global-objects\">\u003Cb>\u003Ci>Font Sizing: \u003C\u002Fi>\u003C\u002Fb>\u003Ci>\u003Cspan style=\"font-weight: 400;\">Global Objects\u003C\u002Fspan>\u003C\u002Fi>\u003C\u002Fh3>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">As stated, we don’t want to be attributing these on a per element basis, so instead we’ll be creating a global \u003C\u002Fspan>\u003Ci>\u003Cspan style=\"font-weight: 400;\">modifier\u003C\u002Fspan>\u003C\u002Fi>\u003Cspan style=\"font-weight: 400;\"> class within the _typography.scss file for each font size, which will usable throughout the site. Using BEM naming conventions, it would look something like:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre>\u003Cspan style=\"font-weight: 400;\">\u002F\u002F Global Font Sizes Modifiers\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\">.p--heading-text { font-size: $heading-text; }\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\">.p--intro-text { font-size: $intro-text; }\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\">.p--paragraph-text { font-size: $paragraph-text; }\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\">.p--small-paragraph-text { font-size: $small-paragraph-text; }\u003C\u002Fspan>\n\u003C\u002Fpre>\n\u003Cp> \u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Using this method, we create a class selector that can be applied to any element across the site, for example, we may have a h2 in the sidebar that actually wants to be quite small, there may be default h2 styling already set in your stylesheets that make the aside’s h2 24px, so usually you’d have to target this uniquely, something like .aside h2 { font-size: 16px; } – using the above method, we can simply \u003C\u002Fspan>\u003Ci>\u003Cspan style=\"font-weight: 400;\">modify \u003C\u002Fspan>\u003C\u002Fi>\u003Cspan style=\"font-weight: 400;\">the h2 by adding a global class selector:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre>\u003Cspan style=\"font-weight: 400;\"><aside>\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\">   <h2 class=”p--small-paragraph-text”>Sidebar<\u002Fh2>\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\"><\u002Faside>\n\u003C\u002Fspan>\u003C\u002Fpre>\n\u003Cp> \u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">This method can be applied to almost anything, another great example being font colouring. \u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Cp>\u003Cimg loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2733\" src=\"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F05\u002FXHG0cE7s-3.png?auto=compress%2Cformat&q=90\" alt=\"3\" width=\"1200\" height=\"420\" \u002F>\u003C\u002Fp>\n\u003Ch2 id=\"going-even-further\">\u003Cb>Going Even Further\u003C\u002Fb>\u003C\u002Fh2>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">As previously mentioned, SASS has a bunch of great features which we can take advantage of for this kind of setup. Take the font-sizing setup previously explained, we can use SASS maps to advance this setup even further.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Ch3 id=\"font-sizing-mapping-in-sass\">\u003Cb>\u003Ci>Font Sizing: \u003C\u002Fi>\u003C\u002Fb>\u003Ci>\u003Cspan style=\"font-weight: 400;\">Mapping in SASS\u003C\u002Fspan>\u003C\u002Fi>\u003C\u002Fh3>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">SASS Maps bring dimensionality to SASS Lists. Maps are associations of values with a syntax that very closely resembles JSON. Utilising this feature, we can further advance our font-size stack to automatically output a list of class selectors based on one map.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">\u003Cbr \u002F>\n\u003Cspan style=\"font-weight: 400;\">Take the current font-size stack as an example:\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre>\u003Cspan style=\"font-weight: 400;\">\u002F\u002F Global Font Sizes\n\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">$heading-text: 2.125rem;\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\">$intro-text: 1.125rem;\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\">$paragraph-text: 1rem;\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\">$small-paragraph-text: 0.875rem;\u003C\u002Fspan>\n\n\u003Cspan style=\"font-weight: 400;\">\u002F\u002F Global Font Sizes Modifiers\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\">.p--heading-text { font-size: $heading-text; }\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\">.p--intro-text { font-size: $intro-text; }\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\">.p--paragraph-text { font-size: $paragraph-text; }\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\">.p--small-paragraph-text { font-size: $small-paragraph-text; }\n\u003C\u002Fspan>\u003C\u002Fpre>\n\u003Cp> \u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">This is pretty sweet, but utilising a map, we could minimise that amount of code needed. The first step is to add the variables to a map, as below:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre>\u003Cspan style=\"font-weight: 400;\">$fontsizes: (\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\"> heading-text: $heading-text,\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\"> intro-text: $intro-text,\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\"> paragraph-text: $paragraph-text,\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\"> small-paragraph-text: $small-paragraph-text,\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\">);\n\u003C\u002Fspan>\u003C\u002Fpre>\n\u003Cp> \u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">This is simply creating a comma-separated list of key\u002Fvalue pairs and giving it the variable of $fontsizes, this could be named anything. The next step is to loop through each of these.\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">\u003Cbr \u002F>\n\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre>\u003Cspan style=\"font-weight: 400;\">@each $fontsize, $size in $fontsizes {\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\"> .p--#{$fontsize} {\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\">   font-size: $size;\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\"> }\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\">}\n\u003C\u002Fspan>\u003C\u002Fpre>\n\u003Cp> \u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">This each loop is essentially going through each key\u002Fpair set in the $fontsizes variable, it will assign the key to $fontsize and the value to $size. The class selector (or ID) is generated within the loop, which eventually will output as .p–heading-text etc) and the $size attribute applied to each (in this case ‘34px’. This results in the following output:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cpre>\u003Cspan style=\"font-weight: 400;\">.p--heading-text { font-size: 2.125rem; }\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\">.p--intro-text { font-size: 1.125rem; }\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\">.p--paragraph-text { font-size: 1rem; }\u003C\u002Fspan>\n\u003Cspan style=\"font-weight: 400;\">.p--small-paragraph-text { font-size: 0.875rem; }\u003C\u002Fspan>\u003C\u002Fpre>\n\u003Cp> \u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">All you’ll need to do to create new selectors is add it to the original map, woohoo – Jason Garber wrote a great article \u003C\u002Fspan>\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fwww.viget.com\u002Farticles\u002Fsass-maps-are-awesome\">\u003Cspan style=\"font-weight: 400;\">here\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> with a much more detailed explanation of maps. The idea is to use these globally throughout your project, rather than assigning a unique font size on a per-element basis. This could be expanded to a variety of other things, take a look at the boilerplate towards the bottom of the article, I have a couple set up by default including global font sizing, colouring, padding and display.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Ch2 id=\"real-life-example\">\u003Cb>Real Life Example\u003C\u002Fb>\u003C\u002Fh2>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">I regularly update my front-end boilerplate and have recently been approaching it using the methodologies discussed in this article. For a real life example feel free to grab my starter point from here \u003C\u002Fspan>\u003Ca rel=\"noreferrer noopener\" href=\"https:\u002F\u002Fgithub.com\u002Fsamuelgoddard\u002Fstripped\">\u003Cspan style=\"font-weight: 400;\">https:\u002F\u002Fgithub.com\u002Fsamuelgoddard\u002Fstripped\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> which utilises many of the points discussed above.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">The setup uses npm to install packages and grunt to watch \u002F compile everything, essentially all you need to do is pull down the files, run npm install and then run grunt, the default task will watch and compile the CSS for you. \u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp> \u003C\u002Fp>\n\u003Ch2 id=\"who-would-use-this-and-why\">\u003Cb>Who would use this and Why?\u003C\u002Fb>\u003C\u002Fh2>\n\u003Cp>\u003Cspan style=\"font-weight: 400; font-size: 16px; line-height: 1.5;\">This methodology and approach to front-end code can be applied to pretty much any project, however it lends itself to a methodical approach, which is best suited for projects utilising a \u003C\u002Fspan>\u003Cem style=\"font-weight: 400; font-size: 16px; line-height: 1.5;\">relatively\u003C\u002Fem>\u003Cspan style=\"font-weight: 400; font-size: 16px; line-height: 1.5;\"> strict setup (IE predefined colour pallets, font sizing etc). Saying that, this approach (IMO) works really well for anything that is going to be worked on by multiple developers or incur common updates in the future.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400; font-size: 16px; line-height: 1.5;\">The main reason behind using these practises for me personally is to encourage a shared codebase that is fast, reliable and incredibly easy to expand. If you don’t want to commit to such an object oriented setup, I’d still highly recommend checking out some of the more advanced SASS features and BEM syntax, as they can be extremely powerful on their own. Happy coding!\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400; font-size: 16px; line-height: 1.5;\">If you have any questions or thoughts on this article, please feel free to comment below.\u003C\u002Fspan>\u003C\u002Fp>\n",false,"standard",[10],37,[],[13],135,[15,16,17,18,19,20,21,22],"post-2730","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web",{"page_content_modules":24,"hero":129},[25,91],{"acf_fc_layout":26,"reduced":27,"top_overlap":-1,"bottom_underlap":-1,"disable_observer":27,"title":28,"content":6,"authors":29},"blog_post_content",true,"Creating an Object Oriented front-end framework using BEM, SASS and OOCSS",[30],{"id":31,"path":32,"display_name":33,"job_title":34,"description":35,"avatar_url":36,"acf":37},33,"\u002Fabout\u002Four-team\u002Fimpression-team\u002F","Team Impression","","This post may have been written by a past member of the Impression team, or be a collaboration of us all. We hope you like it!","https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress&fit=crop&fm=jpg&h=150&q=80&w=150&bg=CFE6F9",{"job_title":34,"full_bio":34,"specialist_service_links":7,"photo":38},{"ID":39,"id":39,"title":40,"filename":41,"filesize":42,"url":43,"link":44,"alt":34,"author":45,"description":34,"caption":34,"name":46,"status":47,"uploaded_to":42,"date":48,"modified":48,"menu_order":42,"mime_type":49,"type":50,"subtype":51,"icon":52,"width":53,"height":53,"sizes":54},12476,"Impression-Icon","Impression-Icon.jpg",0,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&q=90","\u002Fimpression-icon\u002F","12","impression-icon","inherit","2021-11-02 16:49:21","image\u002Fjpeg","image","jpeg","\u002Fwp\u002Fwp-includes\u002Fimages\u002Fmedia\u002Fdefault.png",500,{"thumbnail":55,"thumbnail-width":56,"thumbnail-height":56,"medium":57,"medium-width":58,"medium-height":58,"medium_large":59,"medium_large-width":60,"medium_large-height":60,"large":61,"large-width":62,"large-height":63,"1536x1536":64,"1536x1536-width":65,"1536x1536-height":65,"2048x2048":66,"2048x2048-width":67,"2048x2048-height":67,"post-thumbnail":68,"post-thumbnail-width":69,"post-thumbnail-height":70,"12_col":71,"12_col-width":72,"12_col-height":73,"default_landscape":74,"default_landscape-width":75,"default_landscape-height":76,"default_portrait":77,"default_portrait-width":76,"default_portrait-height":75,"6_col_and_margin_short":78,"6_col_and_margin_short-width":69,"6_col_and_margin_short-height":73,"11_col_and_margin":79,"11_col_and_margin-width":80,"11_col_and_margin-height":73,"9_col_rectangle":81,"9_col_rectangle-width":82,"9_col_rectangle-height":83,"11_col":84,"11_col-width":85,"11_col-height":73,"staff_image_696_600":86,"staff_image_696_600-width":87,"staff_image_696_600-height":76,"rectangular_thumbnail":88,"rectangular_thumbnail-width":89,"rectangular_thumbnail-height":90},"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=640&q=90&w=640","640","https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=scale&h=200&q=90&w=200",200,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=scale&h=768&q=90&w=768",768,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=1000&q=90&w=1892","1892","1000","https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=scale&h=1536&q=90&w=1536",1536,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=scale&h=2048&q=90&w=2048",2048,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=1180&q=90&w=1860",1860,1180,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=870&q=90&w=2880",2880,870,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=600&q=90&w=800",800,600,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=800&q=90&w=600","https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=870&q=90&w=1860","https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=870&q=90&w=3080",3080,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=1400&q=90&w=2150",2150,1400,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=870&q=90&w=2640",2640,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=600&q=90&w=696",696,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress%2Cformat&fit=crop&h=300&q=90&w=750",750,300,{"acf_fc_layout":92,"reduced":27,"top_overlap":93,"bottom_underlap":93,"disable_observer":-1,"heading":94,"cta_text":95,"cta_link":96,"items":97},"related_module","small","See more posts","See all articles","\u002Fblog\u002F",[98,110,119],{"type_key":16,"title":99,"excerpt":100,"to":101,"postedAt":102,"readingTime":103,"image":104,"authors":105,"category":107},"Conquering the fear of HTML coding","\u003Cp>This post has been written by Alex Bennett. Alex is a final year English student from the University of Nottingham and is currently part of a 10-week placement with Impression. The prospect of learning to code can be daunting. There are loads of different languages that all do different things in different ways, and the […]\u003C\u002Fp>\n","\u002Fblog\u002Fconquering-the-fear-of-html-coding\u002F","2022-02-07T16:48:24",4,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F07\u002FR0FY9Cp6-050720211625512429_christopher-gower-291246-unsplash-scaled.jpg?auto=compress%2Cformat&fit=crop&h=640&q=90&w=640",[106],{"name":33,"image":36},{"to":108,"name":109},"\u002Fblog\u002Fcategory\u002Fweb\u002F","Web",{"type_key":16,"title":111,"excerpt":112,"to":113,"postedAt":114,"readingTime":103,"image":115,"authors":116,"category":118},"Best Sketch plugins for 2018","\u003Cp>Discover the best Sketch plugins, where and how you can get them, and how to make the most of them. What is Sketch? Sketch is a professional design tool for Mac that utilises a fully vector-based workflow. Its simple layout, features and plugins make it a very capable replacement to other design tools like Photoshop. […]\u003C\u002Fp>\n","\u002Fblog\u002Fbest-sketch-plugins-2018\u002F","2022-02-07T16:48:28","https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F07\u002Fo5LExbve-050720211625518164_Sketch-blog-post-bg.jpg?auto=compress%2Cformat&fit=crop&h=640&q=90&w=640",[117],{"name":33,"image":36},{"to":108,"name":109},{"type_key":16,"title":120,"excerpt":121,"to":122,"postedAt":123,"readingTime":124,"image":125,"authors":126,"category":128},"Why There’s Never Been a Better Time to Invest in Your Business Website","\u003Cp>While a new website might seem like a hefty commitment, recent updates from Google and trends toward a more technically-advanced web approach mean that we suggest there’s never been a better time to review your online presence and invest in making it the best it can be. Here, we explain what you should be reviewing […]\u003C\u002Fp>\n","\u002Fblog\u002Fweb-2018-theres-never-better-time-invest-business-website\u002F","2022-02-07T16:48:30",17,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F07\u002FQ77g1pcS-050720211625519452_business-websites.jpeg?auto=compress%2Cformat&fit=crop&h=640&q=90&w=640",[127],{"name":33,"image":36},{"to":108,"name":109},{"type":130,"style":131,"heading":28,"date":4,"updatedAt":132,"reading_minutes":133,"image":134,"imageAlt":28,"categories":135,"collections":315},"blog-post","light","2022-02-07T16:48:42",11,"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F07\u002F53WchC2H-050720211625526958_object-oriented-framworks-2-scaled.jpeg?auto=compress%2Cformat&fit=crop&h=1180&q=90&w=1860",[136],{"id":10,"count":137,"description":138,"link":108,"name":109,"slug":139,"taxonomy":140,"parent":42,"meta":141,"acf":142,"head_links":143,"resource_count":42,"yoast_title":144,"yoast_meta":145,"yoast_json_ld":189,"_links":287,"path":108},39,"The way your website is designed and developed has a huge effect on the user experience and likelihood of conversion.\r\n\r\nImpression is an award winning digital agency which delivers results-focused, data driven web projects for a wide range of clients. Our in-house team of designers and web developers works closely with our marketing team to produce \u003Cem>performance websites\u003C\u002Fem> which don't just look great, they perform well across all channels, including search, too.\r\n\r\nCheck out our latest tips, advice, guides and insights into the world of web development now.","web","category",[],{"hidden":27,"sub_title_override":34,"title_override":34},[],"Web Development Blog | Tips, Advice & Guides | Impression",[146,148,151,154,157,160,163,165,167,169,172,175,178,181,183,186],{"property":147,"content":144},"title",{"property":149,"content":150},"description","Keeping up to date with the latest web design & dev trends, strategies, and industry movements can be difficult. Browse our latest web development blogs!",{"name":152,"content":153},"robots","index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1",{"property":155,"content":156},"canonical","https:\u002F\u002Fadmin.impressiondigital.com\u002Fblog\u002Fcategory\u002Fweb\u002F",{"name":158,"content":159},"og:locale","en-GB",{"property":161,"content":162},"og:type","article",{"property":164,"content":144},"og:title",{"property":166,"content":150},"og:description",{"property":168,"content":156},"og:url",{"property":170,"content":171},"og:site_name","Impression",{"property":173,"content":174},"og:image","https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F06\u002FABFPXguH-Opengraph-BLUE.jpg?auto=compress%2Cformat&q=90",{"property":176,"content":177},"og:image:width",1200,{"property":179,"content":180},"og:image:height",630,{"property":182,"content":49},"og:image:type",{"property":184,"content":185},"twitter:card","summary_large_image",{"property":187,"content":188},"twitter:site","@impressiontalk",{"@context":190,"@graph":191},"https:\u002F\u002Fschema.org",[192,200,210,220],{"@type":193,"@id":194,"url":194,"name":144,"isPartOf":195,"description":150,"breadcrumb":197,"inLanguage":199},"CollectionPage","https:\u002F\u002Fwww.impressiondigital.com\u002Fblog\u002Fcategory\u002Fweb\u002F",{"@id":196},"https:\u002F\u002Fwww.impressiondigital.com\u002F#website",{"@id":198},"https:\u002F\u002Fwww.impressiondigital.com\u002Fblog\u002Fcategory\u002Fweb\u002F#breadcrumb","en",{"@type":201,"@id":198,"itemListElement":202},"BreadcrumbList",[203,208],{"@type":204,"position":205,"name":206,"item":207},"ListItem",1,"Home","https:\u002F\u002Fwww.impressiondigital.com\u002F",{"@type":204,"position":209,"name":109},2,{"@type":211,"@id":196,"url":207,"name":171,"description":34,"publisher":212,"inLanguage":159,"potentialAction":214},"WebSite",{"@id":213},"https:\u002F\u002Fwww.impressiondigital.com\u002F#organization",{"@type":215,"target":216,"query-input":219},"SearchAction",{"@type":217,"urlTemplate":218},"EntryPoint","https:\u002F\u002Fwww.impressiondigital.com\u002Fsearch?q={search_term_string}","required name=search_term_string",{"@type":221,"@id":213,"name":171,"url":207,"logo":222,"image":228,"sameAs":229,"@context":233,"email":234,"foundingDate":235,"legalName":236,"vatID":237,"description":238,"telephone":239,"address":240,"location":247,"areaServed":280},"Organization",{"@type":223,"inLanguage":159,"@id":224,"url":225,"contentUrl":225,"width":226,"height":227,"caption":171},"ImageObject","https:\u002F\u002Fwww.impressiondigital.com\u002F#\u002Fschema\u002Flogo\u002Fimage\u002F","https:\u002F\u002Fcdn.impression.co.uk\u002F2021\u002F06\u002FA5LuTDrq-Impression_Wordmark.png",920,176,"https:\u002F\u002Fcdn.impression.co.uk\u002F2021\u002F04\u002FFAVxDeOS-Nottingham.jpg",[230,231,232],"https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fimpression-digital-limited","https:\u002F\u002Fwww.facebook.com\u002Fimpression\u002F","https:\u002F\u002Fwww.instagram.com\u002Fimpressiontalk\u002F","https:\u002F\u002Fwww.schema.org\u002F","hello@impressiondigital.com","2012-11-07","Impression Digital Limited","GB186363774","Impression is an award-winning digital marketing agency based in the UK and USA. We offer SEO agency, PPC agency, Digital PR agency and Analytics services to companies of all sizes across the UK, North America, Europe and beyond. Get in touch with us if you think we can work together.","01158 242 212",{"@type":241,"streetAddress":242,"addressLocality":243,"addressRegion":244,"postalCode":245,"addressCountry":246},"PostalAddress","Fothergill House, 16 King Street","Nottingham","Nottinghamshire","NG1 2AS","United Kingdom",[248,257,269],{"@type":249,"name":250,"geo":251,"address":255,"photo":228,"telephone":256},"Place","Impression Digital - Nottingham",{"@type":252,"latitude":253,"longitude":254},"GeoCoordinates","52.95501401025914","-1.1494887460285232",{"@type":241,"streetAddress":242,"addressLocality":243,"addressRegion":244,"postalCode":245,"addressCountry":246},"+44 01158 242 212",{"@type":249,"name":258,"geo":259,"address":262,"photo":267,"telephone":268},"Impression Digital - London",{"@type":252,"latitude":260,"longitude":261},"51.50237208377361","-0.09229841534284115",{"@type":241,"streetAddress":263,"addressLocality":264,"addressRegion":265,"postalCode":266,"addressCountry":246},"201 Borough High St","Southwark","London","SE1 1JA","https:\u002F\u002Fcdn.impression.co.uk\u002F2021\u002F04\u002FwD0pPVWz-London.jpg","+44 020 7112 8148",{"@type":249,"name":270,"geo":271,"address":274},"Impression Digital - New York",{"@type":252,"latitude":272,"longitude":273},"40.726722746949","-74.00527778220652",{"@type":241,"streetAddress":275,"addressLocality":276,"addressRegion":277,"postalCode":278,"addressCountry":279},"160 Varick St","New York","NY","10013","USA",[281,284,286],{"@type":282,"name":283},"Country","Worldwide",{"@type":282,"name":285},"GBR",{"@type":282,"name":279},{"self":288,"collection":294,"about":297,"wp:post_type":300,"curies":311},[289],{"href":290,"targetHints":291},"\u002Fwp-json\u002Fwp\u002Fv2\u002Fcategories\u002F37",{"allow":292},[293],"GET",[295],{"href":296},"\u002Fwp-json\u002Fwp\u002Fv2\u002Fcategories",[298],{"href":299},"\u002Fwp-json\u002Fwp\u002Fv2\u002Ftaxonomies\u002Fcategory",[301,303,305,307,309],{"href":302},"\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts?categories=37",{"href":304},"\u002Fwp-json\u002Fwp\u002Fv2\u002Fwhite_papers?categories=37",{"href":306},"\u002Fwp-json\u002Fwp\u002Fv2\u002Ftools?categories=37",{"href":308},"\u002Fwp-json\u002Fwp\u002Fv2\u002Fwebinars?categories=37",{"href":310},"\u002Fwp-json\u002Fwp\u002Fv2\u002Fevents?categories=37",[312],{"name":313,"href":314,"templated":27},"wp","https:\u002F\u002Fapi.w.org\u002F{rel}",[],[],[318,320,322,323],{"path":319,"name":206},"\u002F",{"path":96,"name":321},"Blog",{"path":108,"name":109},{"path":324,"name":28},null,[326],{"id":10,"name":109,"path":108},{"title":328,"script":329,"meta":405,"link":433},"Creating an Object Oriented front-end framework using BEM, SASS and OOCSS - Impression",[330],{"type":331,"key":332,"innerHTML":333},"application\u002Fld+json","yoast-json-ld",{"@context":190,"@graph":334},[335,358,365,368,376,380,398],{"@type":336,"@id":337,"isPartOf":338,"author":340,"headline":28,"datePublished":342,"dateModified":343,"mainEntityOfPage":344,"wordCount":345,"commentCount":42,"publisher":346,"image":348,"thumbnailUrl":350,"articleSection":351,"inLanguage":159,"potentialAction":352},"Article","https:\u002F\u002Fwww.impressiondigital.com\u002Fblog\u002Fobject-oriented-front-end-framework\u002F#article",{"@id":339},"https:\u002F\u002Fwww.impressiondigital.com\u002Fblog\u002Fobject-oriented-front-end-framework\u002F",{"name":33,"@id":341},"https:\u002F\u002Fadmin.impressiondigital.com\u002F#\u002Fschema\u002Fperson\u002F401562873f414eb98c8fb548c6a15fb6","2016-07-26T11:01:05+00:00","2022-02-07T16:48:42+00:00",{"@id":339},2020,{"@id":347},"https:\u002F\u002Fadmin.impressiondigital.com\u002F#organization",{"@id":349},"https:\u002F\u002Fwww.impressiondigital.com\u002Fblog\u002Fobject-oriented-front-end-framework\u002F#primaryimage","https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F07\u002F53WchC2H-050720211625526958_object-oriented-framworks-2-scaled.jpeg?auto=compress%2Cformat&q=90",[109],[353],{"@type":354,"name":355,"target":356},"CommentAction","Comment",[357],"https:\u002F\u002Fwww.impressiondigital.com\u002Fblog\u002Fobject-oriented-front-end-framework\u002F#respond",{"@type":359,"@id":339,"url":339,"name":328,"isPartOf":360,"primaryImageOfPage":361,"image":362,"thumbnailUrl":350,"datePublished":342,"dateModified":343,"breadcrumb":363,"inLanguage":199},"WebPage",{"@id":196},{"@id":349},{"@id":349},{"@id":364},"https:\u002F\u002Fwww.impressiondigital.com\u002Fblog\u002Fobject-oriented-front-end-framework\u002F#breadcrumb",{"@type":223,"inLanguage":159,"@id":349,"url":350,"contentUrl":350,"width":366,"height":367},2560,1707,{"@type":201,"@id":364,"itemListElement":369},[370,371,373,375],{"@type":204,"position":205,"name":206,"item":207},{"@type":204,"position":209,"name":321,"item":372},"https:\u002F\u002Fwww.impressiondigital.com\u002Fblog\u002F",{"@type":204,"position":374,"name":109,"item":194},3,{"@type":204,"position":103,"name":28},{"@type":211,"@id":196,"url":207,"name":171,"description":34,"publisher":377,"inLanguage":159,"potentialAction":378},{"@id":213},{"@type":215,"target":379,"query-input":219},{"@type":217,"urlTemplate":218},{"@type":221,"@id":213,"name":171,"url":207,"logo":381,"image":228,"sameAs":382,"@context":233,"email":234,"foundingDate":235,"legalName":236,"vatID":237,"description":238,"telephone":239,"address":383,"location":384,"areaServed":394},{"@type":223,"inLanguage":159,"@id":224,"url":225,"contentUrl":225,"width":226,"height":227,"caption":171},[230,231,232],{"@type":241,"streetAddress":242,"addressLocality":243,"addressRegion":244,"postalCode":245,"addressCountry":246},[385,388,391],{"@type":249,"name":250,"geo":386,"address":387,"photo":228,"telephone":256},{"@type":252,"latitude":253,"longitude":254},{"@type":241,"streetAddress":242,"addressLocality":243,"addressRegion":244,"postalCode":245,"addressCountry":246},{"@type":249,"name":258,"geo":389,"address":390,"photo":267,"telephone":268},{"@type":252,"latitude":260,"longitude":261},{"@type":241,"streetAddress":263,"addressLocality":264,"addressRegion":265,"postalCode":266,"addressCountry":246},{"@type":249,"name":270,"geo":392,"address":393},{"@type":252,"latitude":272,"longitude":273},{"@type":241,"streetAddress":275,"addressLocality":276,"addressRegion":277,"postalCode":278,"addressCountry":279},[395,396,397],{"@type":282,"name":283},{"@type":282,"name":285},{"@type":282,"name":279},{"@type":399,"@id":400,"name":33,"image":401,"description":35,"url":404},"Person","https:\u002F\u002Fwww.impressiondigital.com\u002F#\u002Fschema\u002Fperson\u002F401562873f414eb98c8fb548c6a15fb6",{"@type":223,"inLanguage":159,"@id":402,"url":403,"contentUrl":403,"caption":33},"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress&fit=fit&fm=jpg&h=96&q=90&w=96124cc556989aa8a89f2f74da512d68e4","https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F11\u002FImpression-Icon.jpg?auto=compress&fit=fit&fm=jpg&h=96&q=90&w=96","https:\u002F\u002Fwww.impressiondigital.com\u002Fabout\u002Four-team\u002Fimpression-team\u002F",[406,407,409,410,411,413,414,415,418,420,422,424,425,426,427,429,430,432],{"name":152,"content":153},{"property":158,"content":408},"en_GB",{"property":161,"content":162},{"property":164,"content":328},{"property":166,"content":412},"Introduction Object Oriented Programming (OOP) is a widely used programming paradigm, typically seen in back-end development languages such as Java, C++, C#, Python, and PHP. It essentially  preaches the encouragement of code reuse and, ultimately, a faster and more efficient codebase that is easier to expand, maintain and understand. This is something that is becoming […]",{"property":168,"content":339},{"property":170,"content":171},{"property":416,"content":417},"article:publisher","https:\u002F\u002Fwww.facebook.com\u002Fimpression",{"property":419,"content":342},"article:published_time",{"property":421,"content":343},"article:modified_time",{"property":173,"content":423},"https:\u002F\u002Fimages.impression.co.uk\u002F2021\u002F07\u002F53WchC2H-050720211625526958_object-oriented-framworks-2-scaled.jpeg?auto=compress%2Cformat",{"property":176,"content":366},{"property":179,"content":367},{"property":182,"content":49},{"name":428,"content":33},"author",{"name":184,"content":185},{"name":431,"content":188},"twitter:creator",{"name":187,"content":188},[]]