The useful technique for CSS styling... This technique eliminates the need to spend your time for searching properties in alphabethical order
Why?
-
CSS-properties are composed by the role each of them provides, not in alphabethical order (famous wrong practices);
-
You haven't to waste your time finding CSS property in an alphabethical garbage;
-
So, your eyes don't work a needless job.
For example:
selector {
content: |
list-style: |
quotes: |
caption-side: |
table-layout: | Specific properties
border-collapse: |
border-spacing: |
image-rendering: |
object-fit: |
appearence: |
display: |
opacity: | Display
visibility: |
align-items: |
align-content: | Flex
order: |
position: |
z-index: |
top: |
right: | Position
bottom: |
left: |
vertical-align: |
float: | Floating
clear: |
outline: |
margin: |
border: (width) (style) |
border-radius: | Box
padding: |
width: |
height: |
box-sizing: |
text-align: |
font: |
letter-spacing: |
text-indent: |
text-transform: |
text-decoration: | Content text
text-rendering: |
text-shadow: |
word-spacing: |
overflow: |
white-space: |
break-words: |
hyphens: | Content breaks
word-break: |
word-wrap: |
direction: |
unicode-bidi: | Content direction
writing-mode: |
box-shadow: |
border-color: | Colors
background: |
color: |
transform: |
transorm-origin: |
backface-visibility: | Transformations 2D and 3D
perspective: |
perspective-origin |
animation-name: | Animations
transition: |
cursor: |
use-select: |
tab-size: | User behavior
resize: |
pointer-events: |
page-break-before: |
page-break-inside: |
page-break-after: | Print properties
widows: |
orphans: |
}