How can this <ul> be set up to maximize inheritance if additional classes will be passed in from a JSON file?

Question

Objective
Currently I have the flags hardcoded. But want to optimize my code for production. So I am wondering if I have this code done clean enough to leverage CSS inheritance while maintaining support for older browsers.

---

I have this menu on my CodePen

whose size will vary per device (media queries not shown yet). I restructured my code from <div>'s to this <ul>

HTML

<ul class="international">
  <li class="intlFlag usFlag"></li>
  <li>North America</li>
  <li class="intlButton">
    <a href="#"> <!-- link pending -->
      <i class="fa fa-globe"></i>
    </a>
  </li>
</ul>

On the div with the flag, I want to be able to pass its CSS rules without giving it the class of intlFlag and for the intlButton I want to also pass rule without giving it the class. I hesitated to use the :last-of-type selector because it is not supported below IE8, and many users of the site will unfortunately use IE8.

---

Image from w3schools.com

As far as the first <li> I want the class to be passed in based on what country they are detected to be coming from. So the script would for example detect that you are in North America. And then pass in that class which then sets your flag. In production I will be using MustacheJS templates. So I plan to do something like this

<ul class="international">
  <li class="{{{flag}}}"></li> 
  <li>{{region}}</li>
  <li class="intlButton">
    <a href="/international">
      <i class="fa fa-globe"></i>
    </a>
  </li>
</ul>

my JSON values might be something like

"flag":"usFlag",
"region":"North America"

That usFlag class would add this class to display the respective flag

.usFlag { background-position: 0px 0px; }

the other rules passed into that <li> are currently passed in with

.intlFlag {
  background-color: #fff;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/101702/flag-sprite.png'); 
  height: 28px;
  width: 44px;
}

Here are the complete set of my CSS rules for this element

.international {
  background-color: rgba(96, 80, 80, 0.3);
  font-size: 18px;
  line-height: 42px;
  list-style-type: none;
  margin: auto;
  padding-left: 0;
  position: absolute;
  bottom: 0; left: 0; right: 0; 
  width: 100%;
}
/* only on tablet */
.international { max-width: 240px; }

.international > li {
  display: inline-block;
  line-height: 42px;
  margin-left: 6px;
  vertical-align: middle;
}

.intlFlag {
  background-color: #fff;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/101702/flag-sprite.png'); 
  height: 28px;
  width: 44px;
}

.usFlag { background-position: 0px 0px; }

.intlButton { 
  float: right;
  font-size: 24px;
  margin-right: 6px;
}
.intlButton a { color: #444; }
.intlButton i {
  background-color: rgba(225, 225, 225, .7); 
  border-radius: 3px;
  padding: 4px; 
}

Answer 1

Some quick notes:

1. You can use list-style: none; instead of list-style-type: none; – Just a bit shorter

2. You mention in a comment /* only for tablet */, but there are no media queries in sight.

   @media screen and (max-width: 480px) {
       .international {
           max-width: 240px;
       }
   }
   

3. It's common practise to use dash-delimited class names in CSS, not CamelCase. This completely personal and you can do whatever you want.

4. Omit the units on zero values: background-position: 0 0; instead of background-position: 0px 0px;

5. I recommend writing single-line CSS: Every property declaration on a new line. There is no reason to write rule declarations with only one property declaration on one line. Also I don't find it helpful writing top, right, bottom and left on one line.

   If you want to save file size and improve performance, you should minimize your CSS. That's so much more efficient plus you keep the legibility and maintainability in your CSS file.

That's it for the moment. Feel free to add a comment to discuss something or visit our great chat.

Answer 2

User "cimmanon" pointed out that lists would not be appropriate here. So I went with spans on this CodePen

HTML

<div class="international">
  <span class="intlFlag"></span>
  <span>North America</span>
  <span class="intlButton">
    <a href="#"> <!-- link pending -->
      <i class="fa fa-globe"></i>
    </a>
  </span>
</div>

CSS

.international {
  background-color: rgba(96, 80, 80, 0.3);
  color: #fff;
  font-size: 18px;
  line-height: 42px;
  margin: auto;
  position: absolute;
  bottom: 0; left: 0; right: 0; 
  width: 100%;
}
/* only on tablet */
.international { max-width: 240px; }

.international > span {
  display: inline-block;
  line-height: 42px;
  margin-left: 6px;
  vertical-align: middle;
}

.intlFlag {
  background-color: #fff;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/101702/flag-sprite.png');
  height: 28px;
  width: 44px;
}

.usFlag { background-position: 0px 0px; }

.intlButton { 
  float: right;
  font-size: 24px;
  margin-right: 6px;
}
.intlButton a { color: #444; }
.intlButton i {
  background-color: rgba(225, 225, 225, .7); 
  border-radius: 3px;
  padding: 4px; 
}