readings 2 Object-Oriented CSS, DOM
Louis Lazaris’s “An Introduction To Object Oriented CSS (OOCSS)”
The Principles of OOCSS
- the purpose of OOCSS (object-oriented CSS) is to encourage code reuse and, ultimately, faster and more efficient stylesheets that are easier to add to and maintain.
Separation of Structure from Skin
- using ID selectors when you could use class selectors is inefficient.
Separation of Containers and Content
- when we use structural selectors, it limits where the values can apply. Consider identifying classes for each grouping of areas that need common formatting.
- a .globalwidth class can be set up for many elements of a web page. Now instead of writing new CSS rules, you just need to add class descriptors to your HTML.
- Benefits include: faster websites (smaller file size and faster download), maintainable stylesheets (cascading easier to recognize)
You Can Still Use IDs
Some Guidelines For Implementation
- Avoid the descendent selectors
- Avoid IDS as styling hooks
- Avoid attaching classes to elements in your stylesheet
- Except in rare cases, avoid using !important
- Use CSS Lint (http://csslint.net/)
- And it’s explanation (https://github.com/stubbornella/csslint/wiki/Rules)
Ch13: The Document Object Model
- You can imagine an HTML document as a nested set of boxes. For each box, there is an object, which we can interact with to find out things such as what HTML tag it represents and which boxes and text it contains. This representation is called the Document Object Model, or DOM for short.
- The global variable document gives us access to these objects. Its documentElement property refers to the object representing the <html> tag. It also provides the properties head and body, which hold the objects for those elements.
- We call a data structure a tree when it has a branching structure, has no cycles, and has a single, well-defined “root”.
- document.documentElement serves as the root
- Trees are often used to maintain sorted sets of data because elements can usually be found or inserted more efficiently in a sorted tree than in a sorted flat array.
- Each DOM node object has a nodeType property, which contains a numeric code that identifies the type of node. Regular elements have the value 1, which is also defined as the constant property document.ELEMENT_NODE. Text nodes, representing a section of text in the document, have the value 3 (document.TEXT_NODE). Comments have the value 8 (document.COMMENT_NODE).
- Code that interacts with the DOM is usually long, repetitive, and of poor design.
MOVING THROUGH THE TREE
- DOM nodes contain a wealth of links to other nearby nodes. The following diagram illustrates these:
- each of these nodes have a parentNode property. Each of these element nodes has a childNodes property that points out it’s place in an array-like object holding all of it’s siblings.
- you could use these elements to which functions/if/for() loops to make a search parameter for the document
- The nodeValue property of a text node refers to the string of text that it represents.
- getElementsByTagName(“ /*insert element here, like a or p*/); console.log(link.href);
- All element nodes have a getElementsByTagName method, which collects all elements with the given tag name that are descendants of a given node and returns an array-like object.
- to return a specific node, give it an ID attribute and use document.getElementById instead.
<p>My ostrich Gertrude:</p>
<p><img id=”gertrude” src=”img/ostrich.png”></p>
var ostrich = document.getElementById(“gertrude”);
- similarly, getElementsByClassName, searches contents of element node and retrieves elements that have a given string in their class attribute.
CHANGING THE DOCUMENT
- the DOM tree can be changed by a number of methods
- removeChild and appendChild, remove and add children (to end of parent’s list of children).
- insertBefore inserts a node give as the first argument before the node given as the second argument. document.body.insertBefore(paragraphs, paragraphs); array[0), array , array becomes array, array, array — new argument first, old argument second…
- replaceChild does just that: two arguments , the first replaces the second.
… more to come