What is the best Approach for CSS framework of an Enterprise Cloud application?

Question

There are several ways to style the elements in each page, in Enterprise applications usually the CSS Framework size increased about 1 MB, and when your users a

Answer 1

I think the correct answer is: "Find a happy and maintainable In-Betweener".

The modular approach

Namespacing your CSS classes by modules can be very valuable. You can just drop that parent CSS to an element, have all children DOM elements respecting your CSS structure and you can end having a very modular and powerful CSS framework. But, As you sad, it can start bloating you CSS files as namespaces CSS classes would be applied to all child elements.

The "use-css-properties-as-css-classes" approach

You might get tempted to use this approach as it gives you great flexibility for your elements in the page. The problem is re-usability. If you define that a specific component should always have its title set to "bold". Do you expect to apply the class "text-bold" every time you need to use this component? This can become a maintainability nightmare and I'd use it for exceptions only.0

The modular-with-variations approach

My favorite one: Break down your app in common reusable UI components. Also think about how these components might vary: sizing, colors or optional child elements. Then apply CSS properties as classes for the exceptions.

Your CSS code would then live under the following structure:

1. Majority of CSS work encapsulated by modules/ UI components (CSS namespacing)
2. Some or several CSS variations for your UI components
3. Property-like CSS classes for exceptions and page-specific variations

Tips

• Download source codes from existing CSS frameworks such as Twitter Bootstrap and study how they reuse CSS across different UI components.
• Consider using pre-compiled CSS such as LESS or SASS as you can make use of functions and variables.
• Use short css names for component names (so they don't bloat your final CSS file
• group, minify and gzip your css files.

Examples

CSS classes

/* Panel Component */
.panel {
    width: 100%;
}
.panel-content {
    padding: 10px 20px;
}

/* Panel variations*/
.panel-success {
    background-color: #3F3;
}
.panel-with-icon .panel-content {
    padding-left: 50px;
}

/* Exceptions (Helpers) */
.pull-right {
    float: right;
}
.margin-top-20 {
    margin-top: 20px;
}

HTML usage

    

        Simple panel
    



    

        my great icon
    
    

        Panel with icon
    



    

        My successful panel with page specific tweaks
    

I hope it helps you.