Developing Extensible CSS3 with OOP

A well styled Website is the first impression your Web visitors have of your work. The underlying functionality will be tainted if the “Look and Feel” of the site seems weak to the viewing visitor.

The Look and Feel is an Important Part

… Of the ‘User EXperience’

…… The Website ‘UX‘

Browsers use files called Cascading Style Sheets or CSS to “Style” the delivered Web page. These files are loaded during the download process the Browser uses to display the first completed Web page.

In a robust application there can be dozens of these relatively small files. The file download requests are generally created from a “Master Page” that is used to deliver Global Site Dependencies and Resources.

The Name “Cascading” Defines the Process

… That Determines the Priority of the Rules

…… That is Applied to your Web page

There are challenges with working in conventional CSS. Some of the “Pain Points” are:

1. Managing Colors – Colors are used throughout the CSS styling process and require duplication that can be a challenge to easily change when required

2. Redundant CSS Rules – Many styling rules are common and require duplication in the conventional CSS development process

3. The “Cascading Avalanche” Problem – As a project matures there is a natural tendency to add new CSS files to support the new features and conflicts can occur due to naming and link loading sequences.

4. No Native Code Reuse, Conditionals or Encapsulation – CSS specifications does not contain native methodologies to implement traditional language Object Oriented Programming (OOP) Principles. This leads to redundant code and becomes difficult to manage the functionality of the Website styling over time

5. Management of Styles over the Lifetime of the CSS – For all the reasons detailed above, CSS becomes costly to manage over the lifetime of the project as it is easy to break legacy styling with the CSS avalanche problem

6. CSS Explosion in Large Team Development – An extension of CSS Cascading Avalanche issues, the addition of pages that are not actually required to add the new functionality are created due to the lack of encapsulated functionality that can be easily identify

LESS and Sass are CSS programming languages that perform CSS Transforms.

A CSS transformation processes a CSS language that enables the Developer to implement Object Oriented Best Practices during the CSS development process to solve the CSS Pain Points detailed above.

CSS transformations deliver well-formed CSS code for Browser consumption without any knowledge of the transformation process.

The Transformations can be Server Processed

… Or Client Processed

LESS can deliver Server or Client processed CSS
Sass delivers Server processed CSS only

Why we need CSS Transformations

The pain points listed above identify challenges we face when styling Websites using traditional CSS files.

CSS files can become very large. The ability to quickly identify a section for modification becomes difficult. As the name implies, Cascading, the functionality of the style Cascades.

The Priority is based on Cascading of Styles

… In the Loading Process of all CSS files

…… When Rendered by the Browser

Both LESS and Sass delivers the Developer the ability to implement the most powerful “Pillar of OOP”: Encapsulation.

Encapsulation allows the Developer to “Data Hide”. Data hiding abstracts the details of how a process utilizes and delivers data: The CSS code.

LESS and Sass adds encapsulation functionality by extending the CSS development environment with the following development features:

1. The ability to create Variables that can be used in the CSS file multiple times holding commonly reused values such as an Element Color

2. Create CSS Rules that are encapsulated for reuse to remove duplication of commonly used rules

3. CSS file size management through encapsulating related functionality in external files that can be “Imported” into the CSS file and be implemented in multiply places within the CSS file

4. Extending CSS functionality through “Directives” that enable powerful additions to the CSS standards

5. The ability to create “Mixins”. These are function-like code that can produce results that add powerful results within the CSS with single lines of code with or without parameters.

6. Control Directives add decision-making logic such as conditionals: an “If” statement. Various looping iteration mechanisms are also made available to the Developer.

7. Operations allow for calculations to be performed on CSS values based on fixed or variable values

LESS and Sass are very similar in their feature offering but there are some differences. We will cover the differences in the posts for each of the two offerings.

Both LESS and Sass are open source
and require not costly license
and are free to use in commercial products

Wisdom Pearl # 137 – The Technical Imperative

The Primary Technical Imperative in Software Development

… Is to Manage Software Complexity

…… Always be able to Justify Your Designs Complexity