» All Posts «

Organize with Style

Doug Gerber July 12, 2016 Productivity, Web Design & Development

Share Comment 0

As today’s websites become larger and more complex, organization and meticulous attention to a site’s architecture are increasingly important to long-term sustainability.

Websites are no longer simply places to find general information. They have evolved into destinations to be experienced. As such, it is vital for developers to setup a strong foundation in their code base to optimize maintainability.

There are myriad concepts and methodologies available to developers which have been generously tested, fostered, and groomed over the years. At Jackrabbit, we’ve adopted our own internal techniques of modular CSS to ensure that the front end code maintains a consistent representation of a site’s visual design. Modular CSS is all about thinking of your CSS in terms of objects.

When it comes to front end architecture, HTML and CSS constructs need to be reusable, scalable, and adaptable to fit a wide array of use cases. We combine small, simple chunks of code that are easy to understand and create meaning in order to build complexity. Likewise, a uniform file structure guides our styles in an object-oriented manner while semantic HTML boosts our workflow and efficiency by reducing the amount of code we write.

Objects

Objects are little blocks of functionality. You can think of them as interface elements like headers, footers, buttons, and content areas. These objects can be distilled further into major and minor components: major components are content areas, and minor components are smaller, frequently-repeated objects such as buttons. Minor components are considered modules and typically live inside the major components. Personally, I try to define my elements using class selectors. Class selectors allow us to maintain the development principle DRY (Don’t Repeat Yourself) to keep our stylesheets clean and easier to maintain. IDs are OK for page-specific, major component styles, but should be used sparingly.

It can be difficult to differentiate major and minor components. Components that are used more frequently are likely modules – navigation bars and accordions are good examples of modules.

In the example below, we take a button and treat it as a minor component. We give it general styling for use across the entire site while also being more specific for special buttons:

.btn {
    position: relative;
    font-size: 16px;
    font-family: 'Tahoma’;
    color: #000;
    padding: 10px;
    box-sizing: border-box;
    letter-spacing: 1px;
    &.white {
        color: $blue;
        background-color: #fff;
    }
    &.white:hover {
        color: #fff;
        background: $hoverColor;
    }
}

Organization

File structure is also important to workflow, and can be broken down into modular partials. When starting a new project, my partials directory is filled with files broken out by object:

  • reset
  • main
  • global
  • helpers
  • header
  • footer
  • typography
  • vendor libraries
    • animations
    • sliders
  • forms
Takeaways
  1. Identify common patterns in your code that can be broken down into smaller pieces
  2. Look at the components that make up a page, and organize them into its own partial file
  3. Create base classes from elements and extend only when the design demands it

This might seem excessive, but when you think about addressing issues or making edits to your code, you know exactly where to look without having to mine through one huge stylesheet.

0 Comments

There aren't currently any comments for this entry.

Leave a Comment