Some guideline on writing CSS for widget

Here we are giving some guidelines on how to write CSS for Widget Framework widgets. These are not any hard and fast rule. If you don't feel comfortable on those you can follow your own rule. In widget framework we associate widget widget_name widget_view_name CSS classes in the main wrapper div of the widget. As for example for default view of stories widget is like as follows -

          <div class="widget stories default">
           ....
           ....
          </div>
        

Significance is that by seeing the classes a template developer can understand this is a stories widget with default view. Following CSS snippet will help you to understand how we encourage to write CSS -

          div.widget.widget_name {
            //styles the main wrapper of the widget
          }

          div.widget.widget_name .header {
            //common header for all view
          }

          div.widget.widget_name.view1 .header {
            //style for header of view1
          }

          div.widget.widget_name.view2 .header {
            //style for header of view2
          }

          div.widget.widget_name.view1{
            //styles for view1
          }

          div.widget.widget_name.view2{
            //styles for view2
          }

          div.widget.widget_name.view1 .title{
            //styles for element in view1 having title class
          }

          div.widget.widget_name.view2 .lead-text{
            //styles for element in view2 having lead-text class
          }
        

From the above example you found that we attach widget name in the CSS selectors. This helps to understand for which widget these styles are for. We also associate widget view name in the CSS selector for writing styles for that particular view. It also helps to understand for which view these styles are for. On the contrast, we do not associate view name for those styles which are shared between various views.