Strategy and Structure

The organization of a code base can greatly affect speed of development as well as the speed at which a page is rendered.

Performance

As a website’s code base and traffic grows, a new skill set comes into play, one that is important to both development time and user experience. Knowing the fundamentals will help increase performance and organization of a website.

This organization of a code base (a whole collection of code that is used to build a website) can greatly affect the speed of development and the speed at which a page will render (display HTML or CSS), as a slow page load can greatly affect the users’ experience. Taking the time to design the right structure for your code base will lead to a better experience all around.

A first step in improving a website’s performance and organization revolves around identifying a good strategy and structure for developing your code base and finding ways to reuse common code.

Style Architecture

How to organize your styles really boils down to your personal preference and what is best for a given website. However, generally there are a few best practices to follow. One way is separating styles based on intent, which include creating directories for common base styles, components, or modules.

Common base styles may include a base.css file for standard styles that will be used on every page in your website.

Component styles will hold all styles to handle buttons, forms, alerts, tables or even navigation for your website. Essentially, interface driven styles.

While the modules directory will hold your footer and header styles.

This separation of styles encourages well thought-out presets (any defaults that have been built) and the ability for styles to be widely shared and reused. Two other methodologies will also be covered in this lesson: “Object Oriented CSS” and “Scalable and Modular Architecture for CSS”. These methodologies have their own opinions on structure, as well as on how to use styles.

Object-oriented CSS

Object-oriented CSS involves writing cleaner, more readable CSS, and is a way to organize style sheets to keep them tidy.

Object-oriented CSS Methodology

The Object-oriented CSS methodology was coined by Nicole Sullivan in her work with writing styles for a larger website. This identifies two principles that will help build a scalable website (code written in a way that allows a website to grow) with a strong structure and reasonable amount of code. The two principles are:

  • Separate structure from skin
  • Separate content from container

Skin refers to the layer of CSS [styles] that defines theme look and feel.

Separating Structure from Skin

Separating structure from skin includes removing the layout of an element from the theme of a website. The structure of a module should be transparent, allowing other styles to be inherited and displayed without conflict, which means style only the structure of the element and leave the look of the styles to be inherited or taken from somewhere else. This is best used with a solid grid structure, along with well-created modules.

Separate Content from Container

Container refers to a class selector that defines a parent element that is wrapped or contained around a group of nested child elements. A parent element is an HTML element that has other elements nested within it, while children elements are elements that are nested within another element.

Separating content from the container involves removing the dependency of a parent element. In other words, to write code in a way that the styles are not expecting a parent element, and it can exist alone so that no matter where the code is placed on the page, the styles will be applied.

Therefore, a heading should look the same regardless of which parent it is nested within.

Note: In the following HTML example, the <p class=”message”>…</p> would be the nested child element and the <div class=”heading heading-large”> is the parent.

CSS

CSS and HTML 1

HTML

CSS and HTML 2

Scalable and Modular Architecture for CSS

We will be learning about two different methodologies when thinking about your CSS and which one you should use.

Scalable and Modular CSS

The Scalable and Modular Architecture for CSS methodology was developed by Jonathan Snook. This methodology promotes breaking up styles into five core categories, including:

  • Base
  • Layout
  • Module
  • State
  • Theme

The Five Core Categories

The base category handles core element styles, such as general defaults. The layout category handles sizing and layout of different elements. Module styles are specific styles targeting individual parts of a page, including navigation or a header/footer. The state styles handle any changes to state such as a hover, active tab or button. Lastly, the theme category would account for any styles based around the skin, or look and feel of the page.

CSS

CSS and HTML 3

HTML

CSS and HTML 4

In the HTML, above the tab class falls into the module category while the is-active class falls into the state category.Which Methodology Should You Choose?

Which method you choose is personal preference. You could mix and match or create your own structure of how you would like your style categorized. Generally speaking, as long as you keep your code clean, and easy to read and understand, the method is less important.

Reusable Code

You will learn about the importance of building your code in a reusable manner to help keep code clean and easy to understand when reviewing or changing it at a later time.

Reusing Styles

One of the leading performance issues come from large files sizes. A quick way to help cut down on a CSS file size is to reuse styles as much as possible. Whenever there are repeated styles they should be combined, allowing code to be shared. If two elements both have rounded corners, instead of stating the same style twice, write one style that applies to both, or better yet, create one class (a way to identify an element to be styled and define visual appearance and formatting of HTML documents) to handle this, as seen in the example below.

CSS and HTML 5

Which approach you take does not make a huge difference, so long as code is being shared and reused, and the overall file size is reduced.

This is an excerpt from Velsoft’s latest computer course release: Introduction to HTML and CSS Coding Part 2.