csswg-drafts

CSS Working Group Editor Drafts

4,426

653

4,426

3,408

View on GitHub

Top Related Projects

wpt

4,878

Test suites for Web platform specs — including WHATWG, W3C, and others

postcss

28,437

Transforming styles with JS plugins

Quick Overview

The w3c/csswg-drafts repository is the official working space for the CSS Working Group (CSSWG) of the World Wide Web Consortium (W3C). It contains draft specifications, issue tracking, and other resources related to the development and standardization of Cascading Style Sheets (CSS). This repository serves as a collaborative platform for CSS experts and contributors to shape the future of web styling technologies.

Pros

Provides direct access to the latest CSS specifications and proposals
Allows for community involvement in the CSS standardization process
Offers transparency in the development of CSS features
Enables tracking of changes and discussions around CSS specifications

Cons

Can be overwhelming for newcomers due to the technical nature of the content
Draft specifications may change frequently, leading to potential confusion
Requires a deep understanding of CSS and web standards to contribute effectively
Some proposals may take a long time to reach final recommendation status

Getting Started

As this is not a code library but a repository for CSS specifications and drafts, there's no code-specific getting started guide. However, here are some steps to begin engaging with the repository:

Visit the repository at https://github.com/w3c/csswg-drafts
Browse the css-* folders to explore different CSS modules and specifications
Check the issues tab to see ongoing discussions and proposals
Read the CONTRIBUTING.md file to understand how to contribute to the project
Join the CSSWG mailing list to stay updated on discussions and decisions

Note: Contributing to CSS specifications requires a solid understanding of web standards and the CSS ecosystem. It's recommended to familiarize yourself with the W3C process and existing CSS specifications before attempting to contribute.

Competitor Comparisons

wpt

4,878

Test suites for Web platform specs — including WHATWG, W3C, and others

Pros of wpt

Comprehensive test suite covering various web platform technologies
Collaborative effort with contributions from multiple browser vendors
Regularly updated to reflect the latest web standards and specifications

Cons of wpt

Large repository size due to extensive test coverage
Steeper learning curve for newcomers due to its broad scope
May include tests for experimental or non-standardized features

Code comparison

csswg-drafts (CSS specification):

@media (prefers-color-scheme: dark) {
  body {
    background-color: #333;
    color: #fff;
  }
}

wpt (Test for the same feature):

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test: prefers-color-scheme media query</title>
<link rel="help" href="https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
  test(() => {
    assert_true(window.matchMedia('(prefers-color-scheme: dark)').matches ||
                window.matchMedia('(prefers-color-scheme: light)').matches);
  }, "prefers-color-scheme media query is supported");
</script>

The csswg-drafts repository focuses on CSS specifications, while wpt provides comprehensive tests for various web technologies, including CSS features defined in csswg-drafts.

webcomponents

4,357

Web Components specifications

Pros of webcomponents

Focuses on creating reusable, encapsulated custom elements
Provides a more modular approach to web development
Enables better code organization and maintainability

Cons of webcomponents

Limited browser support for some features compared to CSS
Steeper learning curve for developers new to component-based architecture
Potential performance overhead for complex components

Code Comparison

webcomponents:

<template id="my-paragraph">
  <style>p { color: white; background-color: #666; padding: 5px; }</style>
  <p>My paragraph</p>
</template>

csswg-drafts:

p {
  color: white;
  background-color: #666;
  padding: 5px;
}

The webcomponents example demonstrates the encapsulation of styles and markup within a custom element, while the csswg-drafts example shows traditional CSS styling applied globally to paragraph elements.

html

7,987

HTML Standard

Pros of html

Single, living standard: Continuously updated, reducing fragmentation
More community-driven: Encourages broader participation and feedback
Faster decision-making process: Quicker implementation of new features

Cons of html

Less formal review process: May lead to occasional inconsistencies
Potential for rapid changes: Can be challenging for implementers to keep up
Limited scope: Focuses solely on HTML, unlike csswg-drafts' broader CSS coverage

Code Comparison

html:

<main>
  <h1>Example Heading</h1>
  <p>This is a paragraph.</p>
</main>

csswg-drafts:

main {
  display: block;
}
h1 {
  font-size: 2em;
}

The html repository focuses on defining HTML elements and their behavior, while csswg-drafts deals with CSS properties and styling. Both repositories are crucial for web development, with html providing the structure and csswg-drafts handling the presentation aspects of web pages.

postcss

28,437

Transforming styles with JS plugins

Pros of PostCSS

Highly extensible with a large ecosystem of plugins
Faster processing times for CSS transformations
Allows for custom syntax and future CSS features

Cons of PostCSS

Requires setup and configuration, unlike native CSS
May introduce complexity for simple projects
Potential inconsistencies across different plugin combinations

Code Comparison

csswg-drafts (CSS Working Group Drafts):

@media (prefers-color-scheme: dark) {
  body {
    background-color: #333;
    color: #fff;
  }
}

PostCSS (with plugins):

body {
  background-color: #fff;
  color: #000;
  @media (prefers-color-scheme: dark) {
    background-color: #333;
    color: #fff;
  }
}

The csswg-drafts repository contains official CSS specifications, while PostCSS is a tool for transforming CSS with JavaScript plugins. csswg-drafts focuses on standardization and browser implementation, whereas PostCSS enables developers to use future CSS features and custom syntax today. PostCSS offers flexibility and performance benefits but may introduce complexity. csswg-drafts ensures cross-browser compatibility and adherence to web standards.

sass

15,059

Sass makes CSS fun!

Pros of Sass

Offers advanced features like variables, nesting, and mixins for more efficient CSS authoring
Provides a mature ecosystem with extensive documentation and community support
Allows for modular and reusable code through partials and imports

Cons of Sass

Requires compilation, adding an extra step to the development process
May lead to overly complex stylesheets if not used judiciously
Not natively supported by browsers, requiring additional tooling

Code Comparison

Sass:

$primary-color: #3498db;

.button {
  background-color: $primary-color;
  &:hover { background-color: darken($primary-color, 10%); }
}

CSS (csswg-drafts):

:root {
  --primary-color: #3498db;
}

.button {
  background-color: var(--primary-color);
}
.button:hover {
  background-color: color-mix(in srgb, var(--primary-color) 90%, black);
}

The Sass example demonstrates variables and nesting, while the CSS example uses custom properties and newer color functions. csswg-drafts focuses on standardizing native CSS features, while Sass provides a preprocessor with additional functionality for CSS authoring.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

CSS Working Group Specifications

This is the official CSSWG repository for editor's drafts of CSS specifications.

See the contributor guidelines for how to contribute.

Specification issues are discussed as issues in this repository. General CSSWG discussion can be found on the public www-style mailing list.

To read the specifications in this repository, see them at the index of all specifications.

This repository is a two-way mirror of https://hg.csswg.org/drafts, and contributing using Mercurial is also possible.

Also see the related repositories:

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot