index.html

<!--
https://jsbin.com/kiliyineca/2/edit?html,css,output
-->



<!--  /// 1 /// -->	

<!-- .btn -->
<div class="btn" style="--status: success">Success</div>
<div class="btn" style="--status: danger">Danger</div>
<div class="btn" style="--status: warning">Warning</div>	
<div class="btn">Else</div>	
	
<!-- .cover -->	
<div class="cover" style="--priority: medium;">Iam Cover</div>
	
	
<!-- .container -->	
<div class="container">Container</div>
	
	
	
<!--  /// 2 /// -->	


<div class="card" data-status="pending">Pending Task</div>
<div class="card" data-status="complete">Completed Task</div>
<div class="card" data-status="inactive">Inactive Task</div>

style.css

.btn {
  background: if(
    style(--status: success): green;
    style(--status: danger): red;
    style(--status: warning): orange;
    else: gray
  );
}


.cover {

	border: 1px solid;
	margin: 1rem;
	padding: 1rem;
	
  border-color: if(
    style(--priority: high): red;
    style(--priority: medium): orange;
    else: #ccc
  );
}

.container {
  background: if(
    media(width < 500px): red;
    else: green
  );
}



.card {
  --status: attr(data-status type(<custom-ident>));
	
	border: 1px solid;
	padding:1rem;
  
  border-color: if(
    style(--status: pending): royalblue;
    style(--status: complete): seagreen;
    else: gray
  );
  
  background-color: if(
    style(--status: pending): #eff7fa;
    style(--status: complete): #f6fff6;
    else: #f7f7f7
  );
}