Default styles

toddle applies some default styling to elements using a reset stylesheet.

Reset stylesheets are crucial in web development to ensure consistency across different browsers. Browsers have their own default styles, which can lead to discrepancies in how web pages are rendered. We neutralize these default styles by applying a reset stylesheet, creating a clean slate.

Key Reasons:

1. Cross-Browser Consistency: Different browsers have varying default styles for elements like headings, margins, paddings, and lists. A reset stylesheet standardizes these, ensuring a uniform appearance across all browsers.
2. Simplified Development: With a reset in place, developers don't need to worry about browser-specific quirks. This makes styling more predictable and development more efficient.
3. Cleaner Base for Custom Styles: Starting from a neutral baseline allows developers to build their designs from scratch, applying their custom styles without interference from browser defaults.
4. Improved Maintainability: Consistent styling from the beginning reduces the need for browser-specific overrides later, leading to cleaner and more maintainable code.

Common reset stylesheets, like Eric Meyer's reset.css or the Normalize.css library, are widely used to achieve these benefits, making them a best practice in modern web development. We lean against these same styles in toddle, but a few modern twists.

All elements in toddle have " display: flex" by default, as we believe the flex display engine is more powerful, while also being easier to use than combining traditional block , inline, table, etc .

Any style applied to elements will always take precidence over the reset styles in toddle. However, in some cases, specifically when working with external web-components, you may want to eject from the toddle resets. By adding the attribute " data-unset-toddle-styles " your element will eject from the toddle reset stylesheet entirely.