Learning about Nicole Sullivan's concept of Object-Oriented CSS (OOCSS), I discovered the idea of using pre-existing basic building blocks as classes and then customizing them to suit individual needs rather than starting from scratch each time. The OOCSS principle draws inspiration from reusing existing code, much like how you wouldn't rewrite the Java Math class every time you need a specific mathematical function.
While I find this approach appealing in theory, applying it practically poses some challenges for me. If anyone has more resources on OOCSS that could shed light on its benefits and criticisms, please share them!
Take my current stylesheet for example:
.heading {...} /* applies to all headings */
.alpha {...} // specifically for h1
.beta {...} /* specifically defined styles for h2 */
.gamma {...} /* unique styling for h3 */
.delta {...} /* customized changes for h4 */
.epsilon {...} /* tailored look for h5 */
.zeta {...} /* individualized design for h6 */
The initial selector is for universal heading properties like font-family and
letter-spacing</code, while each "subclass" contains distinct attributes such as <code>colorfont-weight. Placing these subclasses after the main .heading indicates that conflicting properties will be overridden by those in the subclass. To style a Heading 1 element, one might write:
<h1 class="heading alpha">Contact Me</h1>
What if, hypothetically,
.heading {...}
.alpha {
extends: .heading;
...
}
==============================
<h1 class="alpha">Contact</h1>
If normally heading alpha elements are aligned left, how would I center this specific instance? Instead of adding another class, perhaps inline styling or simply including .alpha {text-align: center;} at the top of the Contact page could suffice without cluttering the HTML with excessive classes?