Bug 431526

Description libing wang 2014-03-28 14:17:30 EDT

I've learned some lessons while implementing the readonly file system widget. I am not an expert of css but I would like to use this bug as a trigger for us to rethink about how we should organize our css files.

Some bullets here:
1.The readonly widget consumes several modules like the navigation renderer, section, dropdwon menu, etc. It ends up that the widget has to import almost all of the orion css files. The reason is that our css files are quite for categories, not for modules. Lets say if I am consuming 10% of the Orion modules, I shouldn't have consumed 90% of Orion css. We may want to break our css down to more module-oriented files so that a widget can choose which ones are needed and which ones are not.

2.We should definitely define any document level style in a single solid css file  so that a widget should avoid using that. This will prevent the widget build from affecting the hosting page.

3.If the widget overrides a class but later on someone added additional attributes for the same class, the attributes affects the widget automatically. I always have to check if this attributes should be shared for the widget or not. I am wondering if we have any better way to handle this. 

4.Naming convention of classes. Conflicting class names with the hosting page are rare cases but we should think about it.

5.There are some cases that the hosting page in turn affects the widget style. The only thing I had to do was to override that class in the widget. A better should be found.