CSS and Styling

/**
 * Get or set CSS properties on elements
 * @param property - CSS property name, array of names, or object of name/value pairs
 * @param value - Property value (if setting single property)
 * @returns Property value, object of values, or collection
 */
$.fn.css(property, value);

// Get single property
const color = $('.element').css('color');
const fontSize = $('.element').css('font-size');

// Get multiple properties
const styles = $('.element').css(['width', 'height', 'margin']);
// Returns: {width: '200px', height: '100px', margin: '10px'}

// Set single property
$('.element').css('background-color', 'red');
$('.element').css('width', 200); // Automatically adds 'px'

// Set multiple properties
$('.element').css({
  'background-color': 'blue',
  'font-size': '16px',
  'margin': '10px 20px'
});

// Remove property
$('.element').css('background-color', '');

/**
 * Add CSS classes to elements
 * @param name - Class name(s) to add (space-separated or function)
 * @returns Original collection
 */
$.fn.addClass(name);

/**
 * Remove CSS classes from elements
 * @param name - Class name(s) to remove (space-separated or function)
 * @returns Original collection
 */
$.fn.removeClass(name);

/**
 * Toggle CSS classes on elements
 * @param name - Class name(s) to toggle (space-separated or function)
 * @param when - Optional boolean to force add (true) or remove (false)
 * @returns Original collection
 */
$.fn.toggleClass(name, when);

/**
 * Check if elements have specific CSS class
 * @param name - Class name to check
 * @returns True if any element has the class
 */
$.fn.hasClass(name);

// Add classes
$('.element').addClass('active');
$('.element').addClass('active selected important');

// Remove classes
$('.element').removeClass('inactive');
$('.element').removeClass('old deprecated');
$('.element').removeClass(); // Remove all classes

// Toggle classes
$('.button').toggleClass('pressed');
$('.menu').toggleClass('open closed');

// Conditional toggle
$('.item').toggleClass('highlighted', isSelected);

// Check for class
if ($('.element').hasClass('active')) {
  console.log('Element is active');
}

// Dynamic class names
$('.item').addClass(function(index, currentClass) {
  return 'item-' + index + (currentClass ? ' modified' : '');
});

/**
 * Get or set element width
 * @param value - Width value to set (number, string, or function)
 * @returns Width in pixels (if getting) or collection (if setting)
 */
$.fn.width(value);

/**
 * Get or set element height
 * @param value - Height value to set (number, string, or function)
 * @returns Height in pixels (if getting) or collection (if setting)
 */
$.fn.height(value);

// Get dimensions
const width = $('.element').width();
const height = $('.element').height();

// Set dimensions
$('.element').width(200);
$('.element').height('100px');

// Set with function
$('.item').width(function(index, currentWidth) {
  return currentWidth * 1.5; // Increase by 50%
});

// Handle different element types
$('.image').width(); // Content width
$(window).width(); // Viewport width
$(document).width(); // Document width

/**
 * Get or set element offset position relative to document
 * @param coordinates - Object with top/left properties (if setting)
 * @returns Position object or collection
 */
$.fn.offset(coordinates);

/**
 * Get element position relative to offset parent
 * @returns Position object with top/left properties
 */
$.fn.position();

/**
 * Get offset parent element
 * @returns Collection containing offset parent
 */
$.fn.offsetParent();

/**
 * Get or set scroll top position
 * @param value - Scroll position to set
 * @returns Scroll position or collection
 */
$.fn.scrollTop(value);

/**
 * Get or set scroll left position
 * @param value - Scroll position to set
 * @returns Scroll position or collection
 */
$.fn.scrollLeft(value);

// Get offset position
const offset = $('.element').offset();
console.log('Position:', offset.top, offset.left);

// Set offset position
$('.draggable').offset({top: 100, left: 200});

// Get relative position
const position = $('.child').position();
console.log('Relative to parent:', position.top, position.left);

// Scroll operations
const scrollTop = $(window).scrollTop();
$(window).scrollTop(0); // Scroll to top

$('#container').scrollLeft(100);

// Smooth scrolling effect
$('html, body').animate({scrollTop: 0}, 500);

/**
 * Show hidden elements
 * @returns Original collection
 */
$.fn.show();

/**
 * Hide visible elements
 * @returns Original collection
 */
$.fn.hide();

/**
 * Toggle element visibility
 * @param setting - Optional boolean to force show (true) or hide (false)
 * @returns Original collection
 */
$.fn.toggle(setting);

// Basic visibility
$('.element').show();
$('.element').hide();
$('.element').toggle();

// Conditional toggle
$('.optional').toggle(shouldShow);

// Show/hide based on condition
if (isLoggedIn) {
  $('.user-menu').show();
  $('.login-form').hide();
} else {
  $('.user-menu').hide();
  $('.login-form').show();
}

// Internal utility functions (accessible via $.fn methods)

/**
 * Convert CSS property names to camelCase
 * @param str - CSS property name
 * @returns CamelCase property name
 */
$.camelCase(str);

/**
 * Get computed style for element
 * Uses getComputedStyle with cross-browser compatibility
 */
// Used internally by css() method

// Camel case conversion
$.camelCase('background-color'); // 'backgroundColor'
$.camelCase('font-size'); // 'fontSize'

// Working with computed styles
const computedColor = $('.element').css('color');
const computedMargin = $('.element').css('margin-top');

// Check if element has specific computed value
if ($('.element').css('display') === 'none') {
  console.log('Element is hidden');
}

// Zepto automatically handles units for numeric CSS properties
$('.element').css('width', 200); // Becomes '200px'
$('.element').css('opacity', 0.5); // Stays as 0.5 (unitless)
$('.element').css('z-index', 100); // Stays as 100 (unitless)

// Properties that don't get 'px' added automatically:
// - opacity, z-index, font-weight, line-height, zoom
// - column-count, columns

// Custom unit handling
$('.element').css('width', '50%');
$('.element').css('font-size', '1.2em');
$('.element').css('margin', '10px 20px');

// Retrieving values
const width = $('.element').css('width'); // Always returns computed value
const opacity = $('.element').css('opacity'); // Returns number as string

// Vendor prefixes are handled automatically
$('.element').css('transform', 'rotate(45deg)');
// Zepto applies appropriate prefixes: -webkit-, -moz-, -ms-, -o-

// SVG className support
$('svg .element').addClass('active'); // Works with SVG elements

// getComputedStyle fallbacks
// Zepto provides IE compatibility for computed styles

// CSS property mapping
// HTML attributes to DOM properties handled automatically:
// 'class' -> 'className', 'for' -> 'htmlFor', etc.

// Batch CSS changes
$('.element').css({
  'width': '200px',
  'height': '100px',
  'background': 'red'
}); // Better than multiple css() calls

// Cache frequently accessed elements
const $elements = $('.dynamic-items');
$elements.addClass('processed');
$elements.css('opacity', 0.8);

// Use classes over inline styles when possible
$('.item').addClass('highlighted'); // Better than css('background', 'yellow')

// Minimize reflow/repaint
$('.container').hide(); // Hide during modifications
$('.container .item').addClass('modified');
$('.container').show(); // Show after modifications