Several years ago, a question was rasied by someone on Weibo: how to code the module of calculating commodity price, which plays a big role in Taobao commodity detail pages. Usually at the detail page, the commodity has many options, such like size and color. The amount will change real time when users change their options. This question is not noly business-oriented, but also has many solving methods. JS came to my mind first at the time.

The last two weeks, I’m digesting technical posts which collected in Pocket and Weibo over past three years. There are many Best Practice in it, such like CSS Counters which the rest is going to say.

CSS Counters is proposed in CSS2.1, so not only modern browsers, but also IE8+ support it. CSS Counters is a auto-counter, and it should coordinate with pseudo-classes ::before and ::after to use。

Property

CSS Counters have a series of property or method to use:

  • counter-reset, used to initialize a counter. It receives two parameters: the first is a string identifier, and the second is a optional number which used to initialize counter’s default value.
  • counter-increment, used to increse the counter’s value, and it receives a optional number parameter. If the optional parameter exsits, the counter will plus it instead of the default value one.
  • counter(), used to get counter’s result in the content property.

Usage

As metioned above, we could use counter-reset property to defined a counter. Look at the following html structure:

<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<p></p>
</body>

And styles:

ul {
counter-reset: li-counter 10;
li {
counter-increment: li-counter 2;
}
p::before {
content: counter(li-counter);
}
}

Based on above code fragments, counter called “li-counter” was created, and its initial value is 10. At the li tag, counter-increment comes in and increse the counter’s vlaue. Finally, p tag was created with pseudo-class ::before to display the counter’s end result.

Example

As you can see, here is a simple commodity form with multiple options. If you click colors or sizes, the amount will change real time. With this approach, code is cleaner and more robust.

For more infomation about this example, you could look over my Codepen playground via this link.