My personal opinion on the inline CSS vs CSS stylesheet is that I like to write everything in a seperate stylesheet. The reasoning behind this is that your code becomes cluttered with styling code, but when seperating concerns I think it would be better to write your CSS in a seperate file.
Of course, inline CSS is always the most specific one (the most important one), so if you really want to enforce something, you could add an !important
to your CSS rule altought I would recommend use them not that much.
You should write your CSS as specific as possible, because you don't want to interfere with other widgets/HTML but you don't want the opposite as well (external CSS interfering with your widget). But of course, you can write things as:
.editable-list .row-editor {
position: absolute;
top: 0;
z-index: 20;
}
It mostly depends on what .row-editor
actually means. If it's something "global", you could keep .row-editor
, simply because it will allow you to define a global .row-editor
which contains the CSS that is in common, while your .editable-list .row-editor
will contain specific CSS rules for that widget.
For example, let's consider that you have another widget with a similar CSS:
.other-widget .row-editor {
position: absolute;
top: 0;
z-index: 25;
}
Then you could also write the following CSS:
.row-editor {
position: absolute;
top: 0;
}
.editable-list .row-editor {
z-index: 20;
}
.other-widget .row-editor {
z-index: 25;
}
But it actually depends on how you see the .row-editor
class, if you think it's only specific to your editable list, then you might also consider prefixing it. It's similar to what Dojo already does, Dojo has global CSS classes like .dijitInline
but also specific CSS classes like .dijitCalendarDateLabel
.
If someone wants to change the style of the widget, he could add a parent class and so he will be able to make a more specific CSS selector. An example, let's say that the following is your CSS:
.editable-list .row-editor {
position: absolute;
top: 0;
z-index: 20;
}
Then someone who wants to change the CSS just adds a tag to a parent (for example the <body>
tag):
<body class="myTheme">
<!-- Your HTML -->
</body>
And then specifies the following CSS:
.myTheme .editable-list .row-editor {
z-index: 30;
}
This will actually override your z-index
. Dojo already uses this principle with their themes. When you want to use a specific theme, you add the theme CSS and add the name of the theme as a classname in your body, for example:
<body class="claro">
<!-- Your HTML -->
</body>
Of course you don't need to define it at body-level, as long as it's a parent node of your widget it will work.
About the issue about buildRendering
vs postCreate
, well, I suppose that you use the dijit/_TemplatedMixin
mixin. If that's so, then if you look at the code and look for buildRendering
you will see it's doing stuff. This means that if you write your own buildRendering
you will actually replace their code with yours. If you want to make sure that Dojo executes its own logic first, you have to write something like:
buildRendering: function() {
this.inherited(arguments);
/** Your code */
}
That extra line of code will in fact call the same method of the inherited modules/mixins. You can do with that line what you want, if you don't want that the inherited modules are called, you leave it out (probably breaking it as well), if you want to execute it as the last step you just switch the this.inherited(arguments);
to your last step in the buildRendering
function (but then it might override your changes).
But in the end, this is all just an opinion and I'm sure that there are other opinions there that are also correct (for other or even similar use cases). But I can tell you that Dojo does things in a similar way for their own widgets, so maybe it's not a bad approach to follow it as well.
Sorry for the long answer, but I wrote it so that it might be useful for similar questions as well.