???????data-???

<div class="weather crowdy">lorem</div>

CSS

<div class="pad-m" style="border:1px solid #ccc">
<h3>????????CSS???????</h3>
?????????????????????????????????????????????????????????????

????<a href="http://tenman.info/labo/css/">CSS Note</a>??Raindrops??????????????????????????????????????????????????????

?????????????????????????????????????????????????????????????????????????????????

?????????????????????CSS??????????????????????????????????????????
</div>

p {
  color: red;
}

#sidebar p {
  color: unset;
}

<div  data-title="Info" data-mod="aside" data-skin="info">
<h3>????</h3>
??...
</div>

CSS

/**
 * Reset
 */
.entry-content div[data-mod] dl, .entry-content div[data-mod] td, .entry-content div[data-mod] table, .entry-content div[data-mod] p, .entry-content div[data-mod] .h3, .entry-content div[data-skin]{
    min-width:0;
    max-width:100%;
}
/**
 * Module
 * ??????????????????html??????????????????????
 */
.entry-content div[data-mod="aside"]{
    border:1px solid #aaa;
    border-top: 3px solid #777;
    padding:1em;
    margin:2em 1em;
    position:relative;
}
.entry-content div[data-mod="aside"]:before{
    content: attr(data-title);
    display: block;
    position:absolute;
    right:0;
    top:0;
    padding:.2em 1em;
    font-weight:700;
}
.entry-content div[data-skin] .h3:first-of-type{
    margin-top:0;
}
.entry-content div[data-skin] .h3{
    margin:1.5em 0;
    border-bottom:1px solid #aaa;
}
.entry-content div[data-mod] p{
    margin-bottom:.4em;
}
.entry-content div[data-mod] table{
    margin:0 0 1em;
}
.entry-content div[data-mod] td{
    min-width:5em;
}
.entry-content div[data-mod] dl{
    margin:0 0 1em 0;
}
/**
 * ??????????
 */
.entry-content div[data-mod] a:after{
    content: " \00a0 \1f517 \00a0";
    display:inline-block;
    color:#3498db;
    font-size:1.2em;
    transform: rotate(-45deg);
}
/**
 * Skin
 *???????????????
 */
.entry-content div[data-mod="aside"]{
    font-size:100%;
    border:1px solid #aaa;
    border-top: 3px solid #777;
}
.entry-content div[data-skin]:before{
    background:#777;
    color:#fff;
}
.entry-content div[data-skin="info"]:before {
    background: #56b274;
}
.entry-content div[data-skin="alert"]:before{
    background: #e14d43;
}
.entry-content div[data-skin="notice"]:before{
    background:#a38c08;
}
.entry-content div[data-skin="info"]{
    border-top: 3px solid #56b274;
}
.entry-content div[data-skin="alert"]{
    border-top: 3px solid #e14d43;
}
.entry-content div[data-skin="notice"]{
    border-top: 3px solid #a38c08;
}