Wordpress bone structure

Requirements:

• Compass
• Sass gem
• Susy gem

-or-

• CodeKit (which contains all of the above)

---

OOCSS/SASS Architecture

Normalize (included in functions.php enqueued css) = HTML 5 ready alternative to CSS reset. See Normalize

1. css3 (compass include) = Cross-browser mixins for CSS properties introduced in CSS3. See Compass CSS3
2. susy (compass include) = Grid structure. See Susy
3. base (_base.scss) = These are the defaults. Almost exlusively single element selectors.
4. layout (_layout.scss) = Divide the page into sections. Layouts hold one or more modules together. Defining the grid.
5. modules (_modules.scss) = The reusable, modular parts of the design. They are the callouts, sidebar sections, product lists etc.

1 t/m 5 are compiled (output_style:compressed) into style.css

Note: Css architecture based on SMACSS: http://smacss.com/

---

Notes on Front-end architecture

Terminology:

• SMACSS - Scalable and Modular Arcitecture for CSS is not a framework, but more a style guide.
• OOCSS - Object Oriented CSS. The purpose of OOCSS is to encourage code reuse and, ultimately, faster and more efficient stylesheets that are easier to add and maintain. OOCSS is often referred to as a framework and also as a idea (styleguide).
• Semantic classes - The word semantic stands for 'the meaning of'. Semantic naming describes the releationships between things (human - female - hand). Think about why you want something a certain way instead of how it should look.
• Presentational classes - Usage often seen as a bad practice of webdevelopment, for instance in case of .red-header. But .col-3 or .nav-inline is considered good because they don't seem to be affected by minor cosmetic updates.
• Aesthetic class naming - The bad scenario of the presentational class mentioned above

---

Don'ts:

1. Don't use ID's.

Rather use classes than ID's for styling purposes. ID's mess up specificity because they are yoo strong. And also they are unique identifiers, which makes components built with them something like singletons, not reusable ont he same page.

2. Don't name classes based on aesthetics

.skyblue, .primary-green, .orange.bold.

As the design changes, these variable names will increase complexity for making rapid changes. If your class is called "blue" and you want to change it to red, you also have to edit the html. Instead use: '.warning', 'primary', 'submenu', etc.

3. Don't write 'undo' rules (apart from the reset.css).

For example uf you wanted almost all of you headings to have a border-bottom:

// Wrong
h2 {
	font-size 1.5em;
	margin-bottom: 1em;
	// add the border bottom
	padding-bottom: 1em;
	border-bottom: 1px solid red;
}
h2 .no-border { 
	padding-bottom: 0; border-bottom:none; 
}

In this case a new rule is added to undo previous rules: .no-border { padding-bottom: 0; border-bottom:none; }, but this is NOT ideal. It is much better to write sub-modules that add styles.

// Right
/* default style */
h2 {
	font-size:1.5em;
	margin-bottom: 1em;
}
/* Only when border needed */
.headline {
	padding-bottom: 1em;
	border-bottom: 1px solid red;
}

Do's:

1. Content-independent class names.

2. Abstract class names.

To make a text stand out of smaller text you might choose <div class="largeText"></div>. This is unsemantic. It is specifying. <div class="stand_out"></div> might be better here. Maybe in the future you may wish to choose a different style to make that text stand out that has nothing to do with the size of the text.

3. Uncouple HTML and CSS

If a box uses a h2 or h3 as a heading <div class="box"><h2>Box heading</h2></div>, which you could style with .box h2. But what happens if the h2 changes to a h3? It would be better to add a class <h2 class="box-heading">Box heading</h2>. Now the HTML and CSS are more flexible.

4. Class names should communicate useful information to developers.

5. "Multi-class" patterns in combination with using @extends:

If we have this html:

Default Login Delete

> Sass:

> ```
%btn {
    padding:10px 15px;
    font-size:12px;
}
.btn {
    @extend %btn;
}
.btn-primary {
    @extend %btn;
    background-color:green;
}
.btn-danger {
    @extend %btn;
    background-color:red;
}

> ```
*Note the `%`. Which is called the* [placeholder selector](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholders).

> Outputs this CSS:

> ```
.btn, .btn-primary, .btn-danger {
  padding: 10px 15px;
  font-size: 12px;
}
.btn-primary {
  background-color: green;
}
.btn-danger {
  background-color: red;
}

Experiment with this example

6. Define formatting.

6.1 Class naming convention

Naming class convention can include dash-case, camelCase, underscore_case.

Most people (css tricks formatting poll) prefer dash-case for css naming convetion so you don't have to use the Shift key when writing the code. Also this naming convention can also be used in (for future) usage of the BEM syntax.

Usage across languages:

• dash-case in HTML/CSS
• camelCase in Javascript
• underscore_case in PHP

6.2 Formatting decleration

Multiline format is preferred when using SASS. Decleration formatting can be used in a few methods, grouped by type (45%), randomly(39%), by alphabet(14%) or by line(2%).

Organize in the following order:

1. Display & Box model
2. Positioning
3. Color
4. Text
5. Other

Example:

Stylesheet format: Use multiline format with indenting. (⋅⋅) Css naming: dash-case (-) Decleration formatting: by type (/* text */)

.selector-type {
⋅⋅/* Display & Box Model */
⋅⋅display: inline-block;
⋅⋅overflow: hidden;
⋅⋅box-sizing: border-box;
⋅⋅width:100px;
⋅⋅height:100px;
⋅⋅padding:10px;
⋅⋅margin:10px;

⋅⋅/* Positioning */
⋅⋅position:absolute;
⋅⋅left:100px;
⋅⋅bottom:0px;

⋅⋅/* Color */
⋅⋅background: #000;
⋅⋅color:#fff;

⋅⋅/* Text */
⋅⋅etc...
}

See more code standards: OOCSS code standards

---

Sources:

• Object in space - Medium.com post by Andrew Colclough
• Scalable and modular Architecture for CSS by - SMACCS
• Object Oriented CSS by Stubbornella
• Slides from Brisbane Web Designer Meetup 13 March 2013. by Russ Weakley
• What is meant by an "object" in OOCSS. By impressivewebs on Github