Getting Started - Coding Style | Crossroads Digital Design Kit

Getting Started

Coding Style

In keeping with Bootstrap conventions, Crossroads has adopted the patterns of Object-Oriented CSS (OOCSS) when developing the crds-styles package. Developed in 2008 by Nicole Sullivan, the OOCSS methodology is a modular approach to organizing your CSS by promoting composability and flexibility.


Consider the following example...

.btn-1 {
  padding: 1em;
  border: 1px solid #000;
  color: blue;
}

.btn-2 {
  padding: 1em;
  border: 1px solid #000;
  color: red;
}

This is pretty verbose. We can make these selectors a little cleaner by refactoring them in an object-oriented fashion...

.btn {
  padding: 1em;
  border: 1px solid #000;
}

.btn-blue {
  color: blue;
}

.btn-red {
  color: red;
}

The general gist of OOCSS is that common declarations are encapsulated into base selectors and then augmented by more specific ones. Given the above refactored approach, you might find an element in your HTML that looks like this...

<a href="#" class="btn btn-blue">...</a>

Automation

When building stable, state-of-the-art web applications, testing is key.

Crossroads has invested some considerable effort to development an automated test suite which simulates a number of critical user interactions. By running these tests after every application update, we can ensure minimal regressions and the utmost stability for our critical business processes.

To help facilitate this automation, you are encouraged to proactively implement data-automation-id attributes with some unique value for any critical call-to-action, web or form control within your product features.

This is as simple as making your HTML element look like the following example...

<a href="#" data-automation-id="unique-value">...</a>

With this simple approach, you can empower our automation team to make our products more stable and battle-tested, one automated test at a time.