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:
Managing Colors – Colors are used throughout the CSS styling process and require duplication that can be a challenge to easily change when required
Redundant CSS Rules – Many styling rules are common and require duplication in the conventional CSS development process
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.
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
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
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:
The ability to create Variables that can be used in the CSS file multiple times holding commonly reused values such as an Element Color
Create CSS Rules that are encapsulated for reuse to remove duplication of commonly used rules
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
Extending CSS functionality through “Directives” that enable powerful additions to the CSS standards
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.
Control Directives add decision-making logic such as conditionals: an “If” statement. Various looping iteration mechanisms are also made available to the Developer.
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
The following two tabs change content below.
I am a Principal Architect at Liquid Hub in the Philadelphia area specializing in Agile Practices as a Certified Scrum Master (CSM). I use Test Driven Development (TDD) and Acceptance Test Driven Development (ATDD) with Behavior Driven Development (BDD) as my bridge to Agile User Stories Acceptance Criteria in a Domain Driven Design (DDD) implementing true RESTful services