Divitis and Style

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 many 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)
div.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), and then apply styling to each div in turn to get an overall look. 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.

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)

Ask yourself:

  1. Is this inline style used more than once in the sheet, even just twice?
  2. Is this style used only once, but I think I might use it again?
  3. 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.

Series Navigation<< Sandbox Sheet Glitches

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.