{"dataset":{"id":"00000000-0000-0000-0000-000000000036","slug":"css-best-practices","name":"CSS best practices","description":"Source-linked guidance on CSS layout and cascade fundamentals: flexbox, grid, specificity, custom properties, and media queries. Scoped to CSS; not a general web design corpus.","visibility":"public","version":1,"documentCount":5,"publisher":"Koskamo editorial","license":"Original summaries; linked sources retain their own terms.","reviewedAt":"2026-10-04T00:00:00.000Z","readOnly":true,"createdAt":"2026-10-04T00:00:00.000Z","updatedAt":"2026-10-04T00:00:00.000Z"},"total":5,"documents":[{"title":"Responsive design with media queries","sourceUrl":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries","text":"Media queries apply CSS styles depending on a device's media type or features such as viewport width, orientation, aspect ratio, resolution, and user preferences like preferring reduced motion. Use them with the @media at-rule for conditional styling, on HTML elements such as link and style via the media attribute, or from JavaScript with Window.matchMedia(). A query is an optional media type — all, screen, or print — combined with media feature expressions using the logical operators not, and, and only; syntax is case-insensitive and each feature expression requires parentheses. Discrete features such as orientation accept keyword values, while range features such as width support the min- and max- prefixes or the inclusive <= and >= range syntax operators, with < and > excluding the comparison value. A query computes true only when the media type matches and every feature expression is true; unknown media types are always false, and a stylesheet attached to a non-matching query still downloads, at lower priority, applying only if the result changes to true. Scope: CSS media queries. Reviewed October 4, 2026.","id":"css-best-practices:Responsive design with media queries","version":1,"createdAt":"2026-10-04T00:00:00.000Z","updatedAt":"2026-10-04T00:00:00.000Z"},{"title":"Custom properties: reusable, cascading values","sourceUrl":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties","text":"Custom properties are entities defined by CSS authors that represent specific values reused throughout a document. Declare one with a two-dash prefix such as --main-bg-color inside a ruleset, or with the @property at-rule, which additionally associates a type with the property, sets an initial value, and controls inheritance. Custom properties are subject to the cascade and inherit their value from their parent; the ruleset's selector defines the scope where the property can be referenced, so a common practice is declaring them on the :root pseudo-class for global reach, and names are case sensitive. Read a custom property with the var() function in place of a standard property value; var() works only for property values, not property names or selectors, so it cannot be used inside media queries or container queries. They reduce repetition of values such as colors across stylesheets and add semantic naming, and a corresponding API exists for defining them in JavaScript. Scope: CSS custom properties. Reviewed October 4, 2026.","id":"css-best-practices:Custom properties: reusable, cascading values","version":1,"createdAt":"2026-10-04T00:00:00.000Z","updatedAt":"2026-10-04T00:00:00.000Z"},{"title":"Cascade and specificity: which declaration wins","sourceUrl":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Specificity","text":"Specificity is the weight browsers use in the cascade algorithm to determine which declaration applies, and it is compared only between selectors from the cascade origin and layer that has precedence — browsers evaluate specificity after establishing origin and importance. The specificity value is a three-column ID-CLASS-TYPE count: each ID selector adds 1-0-0; each class, attribute selector, or pseudo-class adds 0-1-0; each type selector or pseudo-element adds 0-0-1. The universal selector, the :where() pseudo-class, and combinators add zero weight; :is(), :has(), :not(), and nesting add none themselves, but their parameters or nested components contribute the weight of their most specific matching selector. Columns are compared left to right, so a higher ID-column value wins regardless of the other columns' totals. When competing selectors share equal specificity, scoping proximity and then order of appearance decide the winner. Scope: CSS cascade and specificity. Reviewed October 4, 2026.","id":"css-best-practices:Cascade and specificity: which declaration wins","version":1,"createdAt":"2026-10-04T00:00:00.000Z","updatedAt":"2026-10-04T00:00:00.000Z"},{"title":"Grid: two-dimensional layout with tracks","sourceUrl":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout","text":"CSS grid layout introduces a two-dimensional system for arranging major page areas and small user interface elements alike. Define a grid container by declaring display: grid or display: inline-grid on an element, which makes all its direct children grid items. Create grid tracks with the grid-template-columns and grid-template-rows properties: tracks can use fixed sizes such as pixels, or flexible sizes via percentages or the fr unit, which represents a fraction of the available space in the grid container, so three 1fr columns grow and shrink equally with that space. Items can be placed into precise locations using line numbers, names, or by targeting a grid area, while an auto-placement algorithm positions items given no explicit position, and more than one item can occupy a cell so overlapping content is layered with the z-index property. Grid combines with other CSS such as flexbox to create responsive, flexible, and accessible layouts. Scope: CSS grid layout. Reviewed October 4, 2026.","id":"css-best-practices:Grid: two-dimensional layout with tracks","version":1,"createdAt":"2026-10-04T00:00:00.000Z","updatedAt":"2026-10-04T00:00:00.000Z"},{"title":"Flexbox: one-dimensional layout along two axes","sourceUrl":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox","text":"Create a flex container by setting display to flex (or inline-flex for an inline container); its direct children become flex items. Flexbox is a one-dimensional model handling layout as either a row or a column, defined by the flex-direction property's values: row, row-reverse, column, or column-reverse. That property establishes the main axis, with the cross axis running perpendicular to it, and flexbox reasons in terms of start and end edges rather than left and right so it supports all writing modes. By default, items display in a row along the main axis, starting from the start edge: they do not grow (flex-grow defaults to 0) but can shrink (flex-shrink defaults to 1), with flex-basis defaulting to auto, align-items defaulting to stretch so items fill the cross-axis size, and flex-wrap defaulting to nowrap, so overflowing items spill out of the container instead of wrapping. Scope: CSS flexbox. Reviewed October 4, 2026.","id":"css-best-practices:Flexbox: one-dimensional layout along two axes","version":1,"createdAt":"2026-10-04T00:00:00.000Z","updatedAt":"2026-10-04T00:00:00.000Z"}]}