Skip to content

Instantly share code, notes, and snippets.

@rjrobinson

rjrobinson/README.MD

Last active January 9, 2025 14:58
Show Gist options
  • Save rjrobinson/1047db451e3e9a487c5f7a08f93da851 to your computer and use it in GitHub Desktop.
Save rjrobinson/1047db451e3e9a487c5f7a08f93da851 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Recess Property Descriptions & Grouping
Raw
README.MD

RECESS Property Groups

Below is a grouped list of CSS properties in the RECESS order, along with very short descriptions.
Note: RECESS enforces a strict top-to-bottom property order, so keep this actual list order in your code, even if you visually group them.

1. Positioning and Layout

  • position: Defines how an element is positioned (static, relative, absolute, fixed, or sticky).
  • top: Offsets an element from the top edge (if positioned).
  • right: Offsets an element from the right edge (if positioned).
  • bottom: Offsets an element from the bottom edge (if positioned).
  • left: Offsets an element from the left edge (if positioned).
  • z-index: Controls stacking order of positioned elements.
  • display: Specifies the display behavior (e.g., block, inline).
  • float: Positions an element to the left/right and wraps content.
  • clear: Moves an element below any floated elements on the specified side.

2. Dimensions

  • width: Defines the horizontal size of an element.
  • height: Defines the vertical size of an element.
  • max-width: Restricts the maximum horizontal size.
  • max-height: Restricts the maximum vertical size.
  • min-width: Defines the minimum horizontal size.
  • min-height: Defines the minimum vertical size.

3. Spacing (Margin & Padding)

  • margin: Sets all four margin sides in one shorthand.

  • margin-top: Sets the top margin.

  • margin-right: Sets the right margin.

  • margin-bottom: Sets the bottom margin.

  • margin-left: Sets the left margin.

  • margin-collapse: (Non-standard) Describes margin-collapsing behavior.

  • margin-top-collapse: (Non-standard) Top margin collapsing.

  • margin-right-collapse: (Non-standard) Right margin collapsing.

  • margin-bottom-collapse: (Non-standard) Bottom margin collapsing.

  • margin-left-collapse: (Non-standard) Left margin collapsing.

  • padding: Sets all four padding sides in one shorthand.

  • padding-top: Sets the top padding.

  • padding-right: Sets the right padding.

  • padding-bottom: Sets the bottom padding.

  • padding-left: Sets the left padding.

4. Overflow & Clipping

  • overflow: Controls content overflowing its box (visible, hidden, etc.).
  • overflow-x: Controls horizontal overflow.
  • overflow-y: Controls vertical overflow.
  • clip: Defines a visible region (older CSS spec).

5. Typography & Font

  • font: Shorthand for font-style, weight, size/line-height, and family.
  • font-family: Specifies the typeface (e.g., Arial, Times).
  • font-size: Sets the size of the font.
  • font-smoothing: Vendor-specific anti-aliasing adjustments (non-standard).
  • osx-font-smoothing: Apple-specific font smoothing control.
  • font-style: Sets normal, italic, or oblique style.
  • font-weight: Sets the thickness of the font (e.g., normal, bold).
  • hyphens: Controls word hyphenation in text.
  • src: Used in @font-face to specify font location.
  • line-height: Sets spacing between text lines.
  • letter-spacing: Adjusts spacing between letters.
  • word-spacing: Adjusts spacing between words.

6. Text

  • color: Sets the text color.
  • text-align: Aligns text (left, right, center, justify).
  • text-decoration: Adds lines (underline, overline, line-through).
  • text-indent: Indents the first line of text.
  • text-overflow: Handles overflowed text with ellipsis or clip.
  • text-rendering: Provides hints for type rendering (e.g., optimizeLegibility).
  • text-size-adjust: Controls text resizing in mobile devices.
  • text-shadow: Adds shadow to text.
  • text-transform: Alters text case (uppercase, lowercase, capitalize).
  • word-break: Specifies wrapping or breaking rules for words.
  • word-wrap: Allows long words to wrap onto the next line.
  • white-space: Controls how whitespace is handled in elements.
  • vertical-align: Aligns inline or table-cell elements vertically.

7. Lists

  • list-style: Shorthand for list-style-type, position, image.
  • list-style-type: Defines bullet style (disc, decimal, etc.).
  • list-style-position: Position of bullets (inside/outside).
  • list-style-image: Uses an image as the list bullet.

8. Interactivity & Cursors

  • pointer-events: Specifies when (or if) an element reacts to pointer events.
  • cursor: Sets the type of mouse cursor displayed.

9. Background

  • background: Shorthand for all background properties.
  • background-attachment: Fixes/scrolls background image.
  • background-color: Sets background color.
  • background-image: Sets background image.
  • background-position: Sets initial position of a background image.
  • background-repeat: Defines if/how background repeats.
  • background-size: Specifies the background image size.

10. Borders & Border Radius

  • border: Shorthand for border-width, style, and color.
  • border-collapse: Sets border-collapse mode in tables.
  • border-top: Shorthand for top border properties.
  • border-right: Shorthand for right border properties.
  • border-bottom: Shorthand for bottom border properties.
  • border-left: Shorthand for left border properties.
  • border-color: Shorthand for all border-color sides.
  • border-image: Slices or scales an image to use as a border.
  • border-top-color: Top border color.
  • border-right-color: Right border color.
  • border-bottom-color: Bottom border color.
  • border-left-color: Left border color.
  • border-spacing: Sets spacing between table cells.
  • border-style: Shorthand for all border styles.
  • border-top-style: Top border style.
  • border-right-style: Right border style.
  • border-bottom-style: Bottom border style.
  • border-left-style: Left border style.
  • border-width: Shorthand for border thickness of all sides.
  • border-top-width: Top border thickness.
  • border-right-width: Right border thickness.
  • border-bottom-width: Bottom border thickness.
  • border-left-width: Left border thickness.
  • border-radius: Rounds the corners of an element.
  • border-top-right-radius: Rounds the top-right corner.
  • border-bottom-right-radius: Rounds the bottom-right corner.
  • border-bottom-left-radius: Rounds the bottom-left corner.
  • border-top-left-radius: Rounds the top-left corner.
  • border-radius-topright: (Non-standard) Alternate naming for top-right corner.
  • border-radius-bottomright: (Non-standard) Alternate naming for bottom-right corner.
  • border-radius-bottomleft: (Non-standard) Alternate naming for bottom-left corner.
  • border-radius-topleft: (Non-standard) Alternate naming for top-left corner.

11. Content & Quotes

  • content: Inserts generated content (used in ::before, ::after).
  • quotes: Defines quotation marks for quotes in content.

12. Outlines & Visibility

  • outline: Shorthand for outline-width, style, color.
  • outline-offset: Offset space between outline and element edge.
  • visibility: Toggles element visibility (visible/hidden) without affecting layout.

13. Effects & Misc. Visual

  • opacity: Sets the transparency level.
  • filter: Applies graphical effects (blur, grayscale, etc.).
  • size: (Non-standard or print-specific) Defines page size for printing.
  • zoom: Non-standard scaling of content.
  • transform: Transforms an element (rotate, scale, etc.).
  • box-align: Non-standard box layout alignment (older flex-like).
  • box-flex: Non-standard box layout flex (older).
  • box-orient: Non-standard orientation of box layout.
  • box-pack: Non-standard box layout alignment.
  • box-shadow: Adds shadow to boxes.
  • box-sizing: Controls how width/height are calculated (border-box/content-box).
  • table-layout: Specifies table sizing algorithm.

14. Animation & Transition

  • animation: Shorthand for animation-name, duration, etc.

  • animation-delay: Start time offset for animation.

  • animation-duration: Total time an animation runs per cycle.

  • animation-iteration-count: Number of times animation repeats.

  • animation-name: Keyframe identifier(s) to apply.

  • animation-play-state: Running or paused state of animation.

  • animation-timing-function: Defines the easing (e.g., linear, ease-in).

  • animation-fill-mode: Defines final state (none, forwards, backwards, both).

  • transition: Shorthand for transition-property, duration, etc.

  • transition-delay: Start time offset for transition.

  • transition-duration: Time it takes for the transition to complete.

  • transition-property: Specific CSS property to transition.

  • transition-timing-function: Defines the transition’s easing.

15. Vendor-Specific & Advanced

  • background-clip: Defines the painting area of the background.
  • backface-visibility: Defines whether the back of transformed element is visible.
  • resize: Allows or disallows element resizing by the user.
  • appearance: Resets or defines default OS styles of UI elements.
  • user-select: Controls text selection (none, text, all).
  • interpolation-mode: Non-standard property for image scaling in IE.

16. Page-Related & Other

  • direction: Sets the text direction (ltr or rtl).
  • marks: (Paged media) Marks outside page edges.
  • page: (Paged media) Assigns style to specific pages.
  • set-link-source: (Non-standard) Used in certain older user agents for linking.
  • unicode-bidi: Controls bidi text (used with direction).
  • speak: Aural CSS property for speech synthesizers.
Raw
style.css
body {
/* Positioning and Layout */
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
display: block;
float: none;
/* Dimensions */
width: auto;
height: auto;
max-width: none;
max-height: none;
min-width: 0;
min-height: 0;
/* Spacing (Margin & Padding) */
padding: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
margin: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
margin-collapse: separate;
margin-top-collapse: separate;
margin-right-collapse: separate;
margin-bottom-collapse: separate;
margin-left-collapse: separate;
/* Overflow & Clipping */
overflow: visible;
overflow-x: visible;
overflow-y: visible;
clip: auto;
/* Typography & Font */
font: normal 16px/1.5 sans-serif;
font-family: sans-serif;
font-size: 16px;
font-smoothing: antialiased;
osx-font-smoothing: grayscale;
font-style: normal;
font-weight: normal;
hyphens: none;
src: url("example.woff");
line-height: 1.5;
letter-spacing: normal;
word-spacing: normal;
/* Text */
color: #000;
text-align: left;
text-decoration: none;
text-indent: 0;
text-overflow: clip;
text-rendering: auto;
text-size-adjust: auto;
text-shadow: none;
text-transform: none;
word-break: normal;
word-wrap: normal;
white-space: normal;
vertical-align: baseline;
/* Lists */
list-style: disc outside none;
list-style-type: disc;
list-style-position: outside;
list-style-image: none;
/* Interactivity & Cursors */
pointer-events: auto;
cursor: auto;
/* Background */
background: none;
background-attachment: scroll;
background-color: transparent;
background-image: none;
background-position: 0 0;
background-repeat: repeat;
background-size: auto;
/* Borders & Border Radius */
border: none;
border-collapse: separate;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
border-color: transparent;
border-image: none;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
border-spacing: 0;
border-style: none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 0;
border-top-width: 0;
border-right-width: 0;
border-bottom-width: 0;
border-left-width: 0;
border-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-radius-topright: 0;
border-radius-bottomright: 0;
border-radius-bottomleft: 0;
border-radius-topleft: 0;
/* Content & Quotes */
content: "";
quotes: "“" "”" "‘" "’";
/* Outlines & Visibility */
outline: none;
outline-offset: 0;
visibility: visible;
/* Effects & Misc. Visual */
opacity: 1;
filter: none;
size: auto;
zoom: 1;
transform: none;
box-align: start;
box-flex: 0;
box-orient: horizontal;
box-pack: start;
box-shadow: none;
box-sizing: content-box;
table-layout: auto;
/* Animation & Transition */
animation: none;
animation-delay: 0s;
animation-duration: 0s;
animation-iteration-count: 1;
animation-name: none;
animation-play-state: running;
animation-timing-function: ease;
animation-fill-mode: none;
transition: none;
transition-delay: 0s;
transition-duration: 0s;
transition-property: none;
transition-timing-function: ease;
/* Vendor-Specific & Advanced */
background-clip: border-box;
backface-visibility: visible;
resize: none;
appearance: none;
user-select: auto;
interpolation-mode: bicubic;
/* Page-Related & Other */
direction: ltr;
marks: none;
page: auto;
set-link-source: none;
unicode-bidi: normal;
speak: normal;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment