Most other posts in this blog are helping you to do things. This post is about things you should not do.
Divitis
If you browse the Roll20 repo on GitHub, you’ll find some sheets that do something like this:
<div class="something">
<input type="text" name="attr_example1">
</div>
<div class="something">
<input type="text" name="attr_example2">
</div>
<div class="something">
<input type="text" name="attr_example3">
</div>
<div class="something">
<input type="text" name="attr_example4">
</div>Code language: HTML, XML (xml)div.something {
color: red;
}Code language: CSS (css)You don’t need to do this. The CSS you apply to a DIV can usually be applied to the element it contains. Most of the time, you can instead do this:
<input type="text" class="something" name="attr_example1">
<input type="text" class="something" name="attr_example2">
<input type="text" class="something" name="attr_example3">
<input type="text" class="something" name="attr_example4">Code language: HTML, XML (xml)input.something {
color: red;
}Code language: CSS (css)There are some cases you’ll want the containing div, but here’s a rule to think about:
- Does the div contain a single element?
- If so, can I apply the style to the single element and dispense with the DIV?
The answer is nearly always yes.
A similar situation can occur when people have a div inside a div inside a div (or even more nesting). Sometimes it is indeed necessary to do this to get the appearance or layout you want, but often you can dispense with one or more of the divs, and apply multiple styles to a single object.
Say you have something like this:
<div class="outer">
<div class="inner">
<!-- some elements -->
</div>
</div>Code language: HTML, XML (xml)That can usually be replaced (not always, but usually) by:
<div class="outer inner">
<!-- some elements -->
</div>Code language: HTML, XML (xml)(Though you might want to change the class names.)
Inline Styles
Don’t use Inline Styles. Simply don’t. The reasons are already covered in another article.
If you see code like this:
<div style="width:30px">
<input type="text" name="attr_example1" style="color:red;">
</div>
<div style="width:30px">
<input type="text" name="attr_example2" style="color:red;">
</div>
<div style="width:30px">
<input type="text" name="attr_example3" style="color:red;">
</div>
<div style="width:30px">
<input type="text" name="attr_example4" style="color:red;">
</div>Code language: HTML, XML (xml)You can almost always change it to:
<input type="text" class="slim red" name="attr_example1">
<input type="text" class="slim red" name="attr_example2">
<input type="text" class="slim red" name="attr_example3">
<input type="text" class="slim red" name="attr_example4">Code language: HTML, XML (xml).slim {
width: 30px;
}
.red {
color: red;
}Code language: CSS (css)Or even:
<input type="text" class="my-text-boxes" name="attr_example1">
<input type="text" class="my-text-boxes" name="attr_example2">
<input type="text" class="my-text-boxes" name="attr_example3">
<input type="text" class="my-text-boxes" name="attr_example4">Code language: HTML, XML (xml).my-text-boxes {
width: 30px;
color: red;
}Code language: CSS (css)This has the advantage that if you later decide you want the width to be 40px, or you want the colour to be blue, you only need to change it in one place and it updates every place automatically.
Ask yourself:
- Is this inline style used more than once in the sheet, even just twice?
- Is this style used only once, but I think I might use it again?
- Can this inline style be replaced with a class?
If the answer to any of these questions is yes (and the answer to the last question is almost always yes), then replace that style with CSS. You’ll be glad you did before you finish that sheet. Because if you use a style just once, and think that you’ll never use it again, chances are you will use it again.
A serious problem with inline styles is they override all CSS that applies to that element, and that forces you to be very specific and particular when writing your styles. You can’t exploit Inheritance and Specificity to reduce the amount of code you write.
There can be situations where you have to use an Inline Style because the CSS won’t work. This is very rare and is the only situation where it’s appropriate to use an inline style.
