Suggestion: splitting the decorative part of css from the layout related part

The title is quiet misleading, but i'll try to explain in depth. When reading a css/scss/less file, it really hard for me to see a structure like this:

.some-class{
  position : relative;
  background-color : green;
  width : 50%;
  font-size : 1em;
  margin :10px;
  font-weight: bold;
  cursor : pointer;
  padding : 20px;
  border : 1px solid blue;
  outline: 2px dashed blue;
  color : white;
  z-index : -1; 
  }

There are many nice tutorials (see below) and style guides that explain how to structure a project, but i never saw an explicit definition of the separation between the decorative part of the css from the layout part in each file.

The example above should be written something like this:

    .some-class{

      //Properties that might affect the flow of the element 
      position : relative;
      z-index : -1; 

      //Box model - going outside to inside
      margin :10px;
      border : 1px solid blue;
      padding : 20px;
      width : 50%;

      //Decorative part - can be arranged internally in many ways
      cursor : pointer;
      outline: 2px dashed blue;
      background-color : green;
      color : white;
      font-size : 1em;
      font-weight: bold;
      }

What do you think? is there a chance that in the future it will be splitted into different specs?

Some nice links related to css style guides:

https://www.smashingmagazine.com/2008/05/improving-code-readability-with-css-styleguides/

https://cssguidelin.es/

https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/

https://medium.com/peergrade-io/structuring-css-in-large-projects-37f1695f5ec8