CSS and Styling

/**
 * Get the computed CSS property value from the first element
 * @param prop - CSS property name to get
 * @returns Computed CSS property value or undefined
 */
css(prop: string): string | undefined;

/**
 * Set a CSS property on all elements
 * @param prop - CSS property name to set
 * @param value - CSS property value (string or number)
 * @returns The Cash collection for chaining
 */
css(prop: string, value: number | string): this;

/**
 * Set multiple CSS properties on all elements
 * @param props - Object mapping CSS property names to values
 * @returns The Cash collection for chaining
 */
css(props: Record<string, number | string>): this;

// Get computed style values
const width = $('.element').css('width');        // "200px"
const color = $('.text').css('color');          // "rgb(255, 0, 0)"
const display = $('.hidden').css('display');     // "none"

// Set single CSS property
$('.element').css('width', '300px');
$('.text').css('font-size', 16);                 // Numbers get 'px' for appropriate properties
$('.box').css('background-color', '#ff0000');

// Set multiple CSS properties
$('.modal').css({
  width: '500px',
  height: '400px',
  position: 'fixed',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  'z-index': 1000
});

// Numeric values (auto-px for appropriate properties)
$('.element').css({
  width: 200,           // Becomes "200px"
  height: 150,          // Becomes "150px"
  'line-height': 1.5,   // Stays as "1.5" (unitless)
  'z-index': 10         // Stays as "10" (no unit)
});

// Dynamic styling
$('.progress-bar').css('width', progress + '%');

// Conditional styling
if ($('.element').css('position') === 'static') {
  $('.element').css('position', 'relative');
}

// Animation-like effects (consider using CSS transitions)
$('.fade-in').css({
  opacity: 0,
  transition: 'opacity 0.3s ease'
}).css('opacity', 1);

// Responsive styling
const isSmallScreen = window.innerWidth < 768;
$('.sidebar').css('display', isSmallScreen ? 'none' : 'block');

// Vendor prefixed properties (auto-handled)
$('.element').css({
  transform: 'rotate(45deg)',      // Auto-prefixed if needed
  'user-select': 'none',           // Auto-prefixed if needed
  'border-radius': '10px'
});

// Color manipulation
$('.theme-element').css({
  'background-color': 'hsl(220, 90%, 50%)',
  color: 'rgba(255, 255, 255, 0.9)',
  'border-color': '#4a90e2'
});

// Layout properties
$('.flex-container').css({
  display: 'flex',
  'justify-content': 'center',
  'align-items': 'center',
  'flex-direction': 'column'
});

// Get and modify existing values
const currentWidth = parseInt($('.element').css('width'));
$('.element').css('width', (currentWidth + 50) + 'px');

// These automatically get 'px' units:
$('.element').css('width', 200);        // "200px"
$('.element').css('margin-top', 15);    // "15px"
$('.element').css('border-width', 2);   // "2px"

// These stay unitless:
$('.element').css('z-index', 10);       // "10"
$('.element').css('opacity', 0.5);      // "0.5"
$('.element').css('line-height', 1.5);  // "1.5"

// Automatically prefixed as needed:
$('.element').css('transform', 'scale(1.5)');
$('.element').css('user-select', 'none');
$('.element').css('appearance', 'none');

// Get computed style (includes CSS rules, inheritance, etc.)
const computedColor = $('.element').css('color');

// Set inline style (highest specificity)
$('.element').css('color', 'red');

// Less efficient:
$('.element').css('width', '200px');
$('.element').css('height', '150px');
$('.element').css('background', 'red');

// More efficient:
$('.element').css({
  width: '200px',
  height: '150px',
  background: 'red'
});

// Most efficient for complex changes:
$('.element').addClass('styled-state');