I have written a number of components for Durandal--DatePicker Widget, Tabs Widget, Radio Widget, etc. I'm having a little conceptual difficulty in how best to balance a styling API with CSS.
For example, in the Tabs Widget, I set up default css classes for the various stylable features of the widget. Those default classes come with a default styling, of course. But they can be restyled, and through the Styling API, can be renamed as well. I use this pattern in all of the components.
Now, if an end user (myself, for now) want fixed-width tab buttons, he only needs to adjust his CSS accordingly (e.g. min-width: 90px, width: 90px, etc.). But, initially, I felt compelled to include configuration properties called isTabsFixedWidth and fixedWidth. When the user passes in the configuration object, using JavaScript I modify the CSS according to properties set on that configuration object. Also, a function on the Tabs Widget called #setWidthPolicy(policy, [width]) is included.
But this seems redundant to me. What are the best practices here? Is it necessary for all styling support to include support for raw CSS, support for configurable CSS through a configuration object, and support for modifying CSS dynamically through member functions?
Does anyone have any recommendations here?
Thank you.
