PHPackages                             alnaggar/php-css-builder - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. alnaggar/php-css-builder

ActiveLibrary[Utility & Helpers](/categories/utility)

alnaggar/php-css-builder
========================

A simple, fluent, structured CSS builder for PHP.

1.0(4mo ago)00MITPHPPHP >=7.3

Since Dec 22Pushed 4mo agoCompare

[ Source](https://github.com/ahmed-rashad-alnaggar/php-css-builder)[ Packagist](https://packagist.org/packages/alnaggar/php-css-builder)[ RSS](/packages/alnaggar-php-css-builder/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (1)DependenciesVersions (2)Used By (0)

PhpCssBuilder
=============

[](#phpcssbuilder)

[![I Stand With Palestine Badge](./arts/PalestineBadge.svg)](./arts/PalestineBadge.svg)

[![I Stand With Palestine Banner](./arts/PalestineBanner.svg)](./arts/PalestineBanner.svg)

[![Latest Stable Version](https://camo.githubusercontent.com/c3d827db639bf63972098e0f6328f969f1e069d698d176be92e19e12b6d84f28/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f616c6e61676761722f7068702d6373732d6275696c646572)](https://packagist.org/packages/alnaggar/php-css-builder)[![Total Downloads](https://camo.githubusercontent.com/7c91c884d333471d3abf32a01be8ea341db8c7ff3766168e56d637d2dae259db/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f616c6e61676761722f7068702d6373732d6275696c646572)](https://packagist.org/packages/alnaggar/php-css-builder)[![License](https://camo.githubusercontent.com/d67168b2451b7033f8c51498c6580e78ee8ceacee54d3a6a2f56d6c592a4881a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f616c6e61676761722f7068702d6373732d6275696c646572)](https://packagist.org/packages/alnaggar/php-css-builder)

**PHP CSS Builder** allows you to programmatically generate CSS using a fluent, chainable API.

It supports:

- Standard CSS rulesets (selectors + declarations)
- Statement at-rules (e.g. `@import`, `@charset`)
- Block at-rules (e.g. `@media`, `@supports`, `@layer`)
- Nested CSS statements
- CSS comments
- Embedded CSS (`` blocks)

Warning

This package does not perform any form of sanitization, validation, escaping, or filtering of input values.

It is designed purely as a CSS construction and formatting tool and will output exactly what the developer provides.

All responsibility for security, correctness, and safety of the generated output lies with the developer using this package, especially when handling user-provided or untrusted data.

Table of Contents
-----------------

[](#table-of-contents)

- [Requirements](#requirements)
- [Installation](#installation)
- [Usage & Architecture](#usage--architecture)
- [Contributing](#contributing)
- [Credits](#credits)
- [License](#license)

Requirements
------------

[](#requirements)

- PHP 7.3+
- `ext-pcre` PHP extension

Installation
------------

[](#installation)

Install the package using Composer:

```
composer require alnaggar/php-css-builder
```

Usage & Architecture
------------------------

[](#usage--architecture)

This package is a **programmatic CSS builder**, not a parser, validator, or sanitizer. It allows you to **compose CSS using PHP objects**, mirroring the actual CSS grammar.

The design is intentionally **split into small, focused classes**, each representing a real CSS concept.

### Core Concepts

[](#core-concepts)

1. Every statement is a `Cssable`

    Every [statement class](#statement-types) implements the `Cssable` interface, meaning it can **independently** render CSS via `toCss()`.

    ```
    namespace Alnaggar\PhpCssBuilder\Interfaces;

    interface Cssable
    {
        public function toCss(): string;
    }
    ```
2. CSS Is Built From Statements

    The package models CSS as a tree of statements.

    All CSS statements implement:

    ```
    namespace Alnaggar\PhpCssBuilder\Interfaces;

    interface CssStatement extends Cssable
    {

    }
    ```

### Statement Types

[](#statement-types)

1. `CssRuleset` (Selector Blocks)

    Represents a standard CSS selector block (e.g. `:root`, `*::before`, `h1`).

    Example:

    ```
    use Alnaggar\PhpCssBuilder\Statements\CssRuleset;

    CssRuleset::make('.card')
        ->comment('Card base styles')
        ->declaration('padding', '1rem')
        ->declaration('border-radius', '6px')
        ->toCss();
    ```

    Outputs:

    ```
    /* Card base styles */
    .card {
        padding: 1rem;
        border-radius: 6px;
    }
    ```

    **Nesting support:**

    A ruleset can nest:

    - Other rulesets
    - Block at-rules

    This allows output suitable for CSS preprocessors:

    ```
    use Alnaggar\PhpCssBuilder\Statements\CssRuleset;

    CssRuleset::make('.card')
        ->declaration('padding', '1rem')
        ->nestedStatement(
            CssRuleset::make('&:hover')
                ->declaration('background', '#eee')
        )
        ->toCss();
    ```

    Outputs:

    ```
    .card {
        padding: 1rem;
        &:hover {
            background: #eee;
        }
    }
    ```
2. `CssBlockAtRule`

    Represents at-rules that contain blocks (e.g. `@media`, `@supports`, `@layer`, `@page`, `@top-right`).

    Example:

    ```
    use Alnaggar\PhpCssBuilder\Statements\CssBlockAtRule;
    use Alnaggar\PhpCssBuilder\Statements\CssRuleset;

    CssBlockAtRule::make('media', '(max-width: 768px)')
        ->nestedStatement(
            CssRuleset::make('.card')
                ->declaration('font-size', '14px')
        )
        ->toCss();
    ```

    Outputs:

    ```
    @media (max-width: 768px) {
        .card {
            font-size: 14px;
        }
    }
    ```

    **Nesting support:**

    A block at-rule can nest:

    - Rulesets
    - Other block at-rules

    Example:

    ```
    use Alnaggar\PhpCssBuilder\Statements\CssBlockAtRule;
    use Alnaggar\PhpCssBuilder\Statements\CssRuleset;

    CssBlockAtRule::make('layout', 'components')
    ->nestedStatement(
        CssBlockAtRule::make('supports', '(backdrop-filter: blur(10px))')
            ->nestedStatement(
                CssRuleset::make('.card-glass')
                    ->declaration('backdrop-filter', 'blur(10px)')
                    ->declaration('background', 'rgba(2, 6, 23, 0.7)')
            )
    )->toCss()
    ```

    Outputs:

    ```
    @layer components {
        @supports (backdrop-filter: blur(10px)) {
            .card-glass {
                backdrop-filter: blur(10px);
                background: rgba(2, 6, 23, 0.7);
            }
        }
    }
    ```
3. `CssStatementAtRule` (Single-Line At-Rules)

    Represents **non-block** at-rules (e.g. `@import` `@charset` `@namespace`).

    Example:

    ```
    use Alnaggar\PhpCssBuilder\Statements\CssStatementAtRule;

    CssStatementAtRule::make('import', 'url("theme.css")')->toCss();
    ```

    Outputs:

    ```
    @import url("theme.css");
    ```

#### Nestable Statements

[](#nestable-statements)

Only statements that implement `NestableCssStatement` can be nested.

```
namespace Alnaggar\PhpCssBuilder\Interfaces;

interface NestableCssStatement extends CssStatement
{

}
```

These are:

`CssRuleset`

`CssBlockAtRule`

This ensures:

- Invalid CSS structures are not accidentally created
- Nesting mirrors real CSS grammar
- Output can safely target preprocessors

### `EmbeddedCss` (HTML `` Container)

[](#embeddedcss-html-style-container)

`EmbeddedCss` is the final output container.

It:

- Collects multiple CSS statements
- Outputs a valid `` HTML block
- Supports optional `` tag attributes

**Complete Example:**

```
use Alnaggar\PhpCssBuilder\Html\EmbeddedCss;

/*
|--------------------------------------------------------------------------
| Create embedded stylesheet
|--------------------------------------------------------------------------
*/

$embeddedCss = EmbeddedCss::make();

/*
|--------------------------------------------------------------------------
| Style tag attributes
|--------------------------------------------------------------------------
*/

$embeddedCss->attribute('nonce', 'nonce-123')
    ->attribute('id', 'embedded-css');

/*
|--------------------------------------------------------------------------
| Comment
|--------------------------------------------------------------------------
*/

$embeddedCss->comment(
    'Base document styles'
);

/*
|--------------------------------------------------------------------------
| Statement at-rules
|--------------------------------------------------------------------------
*/

$embeddedCss->statements([
    CssStatementAtRule::make('charset', '"UTF-8"'),
    CssStatementAtRule::make('import', 'url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap")')
]);

/*
|--------------------------------------------------------------------------
| Font face
|--------------------------------------------------------------------------
*/

$embeddedCss->newline();

$embeddedCss->statement(
    CssBlockAtRule::make('font-face', null)
        ->declaration('font-family', '"Panel Font"')
        ->declaration('src', 'url(\'assets/fonts/panel.woff2\') format(\'woff2\')')
        ->declaration('font-weight', 'normal')
        ->declaration('font-style', 'normal')
);

/*
|--------------------------------------------------------------------------
| Base styles
|--------------------------------------------------------------------------
*/

$embeddedCss->newline();

$embeddedCss->statements([
    CssRuleset::make(':root')
        ->declaration('--text-primary-color', '#DBEAFE')
        ->declaration('--bg-primary-color', '#2563EB')
        ->declaration('--text-secondary-color', '#111827')
        ->declaration('--bg-secondary-color', '#F3F4F6')
        ->declaration('--radius', '0.5rem'),

    CssRuleset::make('*, *::before, *::after')
        ->declaration('box-sizing', 'border-box'),

    CssRuleset::make('body')
        ->comment('Reset & typography')
        ->declaration('margin', '0')
        ->declaration('font-family', '"Panel Font", "Inter", system-ui, sans-serif')
        ->declaration('background', '#0f172a')
        ->declaration('color', '#e5e7eb')
        ->declaration('line-height', '1.6')
]);

/*
|--------------------------------------------------------------------------
| Utilities
|--------------------------------------------------------------------------
*/

$embeddedCss->newline();

$embeddedCss->statements([
    CssRuleset::make('.text-primary')
        ->declaration('color', 'var(--text-primary-color)'),
    CssRuleset::make('.bg-primary')
        ->declaration('background', 'var(--bg-primary-color)'),
    CssRuleset::make('.text-secondary')
        ->declaration('color', 'var(--text-secondary-color)'),
    CssRuleset::make('.bg-secondary')
        ->declaration('background', 'var(--bg-secondary-color)'),
]);

/*
|--------------------------------------------------------------------------
| Components
|--------------------------------------------------------------------------
*/

$embeddedCss->newline();

$embeddedCss->statements([
    CssRuleset::make('.panel')
        ->declaration('padding', '1.5rem')
        ->declaration('border-radius', 'var(--radius)')
        ->declaration('background', '#020617'),

    CssRuleset::make('.panel-title')
        ->declaration('font-size', '1.25rem')
        ->declaration('font-weight', '600')
        ->declaration('margin-bottom', '0.75rem'),

    CssRuleset::make('.btn')
        ->declaration('display', 'inline-flex')
        ->declaration('align-items', 'center')
        ->declaration('gap', '0.5rem')
        ->declaration('padding', '0.5rem 0.75rem')
        ->declaration('border-radius', 'var(--radius)')
        ->declaration('border', 'none')
        ->declaration('cursor', 'pointer')
]);

/*
|--------------------------------------------------------------------------
| Animations
|--------------------------------------------------------------------------
*/

$embeddedCss->newline();

$embeddedCss->statement(
    CssBlockAtRule::make('keyframes', 'fade-in')
        ->nestedStatement(
            CssRuleset::make('from')
                ->declaration('opacity', '0')
        )
        ->newline()
        ->nestedStatement(
            CssRuleset::make('to')
                ->declaration('opacity', '1')
        )
);

$embeddedCss->newline();

$embeddedCss->statement(
    CssRuleset::make('.fade-in')
        ->declaration('animation', 'fade-in 200ms ease-in-out')
);

/*
|--------------------------------------------------------------------------
| Media queries
|--------------------------------------------------------------------------
*/

$embeddedCss->newline();

$embeddedCss->statement(
    CssBlockAtRule::make('media', '(max-width: 768px)')
        ->nestedStatements([
            CssRuleset::make('.panel')
                ->declaration('padding', '1rem'),

            CssRuleset::make('.panel-title')
                ->declaration('font-size', '1.1rem')
        ])
);

/*
|--------------------------------------------------------------------------
| Feature queries
|--------------------------------------------------------------------------
*/

$embeddedCss->newline();

$embeddedCss->statement(
    CssBlockAtRule::make('supports', '(backdrop-filter: blur(10px))')
        ->nestedStatement(
            CssRuleset::make('.panel-glass')
                ->declaration('backdrop-filter', 'blur(10px)')
                ->declaration('background', 'rgba(2, 6, 23, 0.7)')
        )
);

return $embeddedCss->toHtml();
```

Outputs:

```

    /* Base document styles */
    @charset "UTF-8";
    @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap");

    @font-face {
        font-family: "Panel Font";
        src: url('assets/fonts/panel.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
    }

    :root {
        --text-primary-color: #DBEAFE;
        --bg-primary-color: #2563EB;
        --text-secondary-color: #111827;
        --bg-secondary-color: #F3F4F6;
        --radius: 0.5rem;
    }
    *, *::before, *::after {
        box-sizing: border-box;
    }
    body {
        /* Reset & typography */
        margin: 0;
        font-family: "Panel Font", "Inter", system-ui, sans-serif;
        background: #0f172a;
        color: #e5e7eb;
        line-height: 1.6;
    }

    .text-primary {
        color: var(--text-primary-color);
    }
    .bg-primary {
        background: var(--bg-primary-color);
    }
    .text-secondary {
        color: var(--text-secondary-color);
    }
    .bg-secondary {
        background: var(--bg-secondary-color);
    }

    .panel {
        padding: 1.5rem;
        border-radius: var(--radius);
        background: #020617;
    }
    .panel-title {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 0.75rem;
    }
    .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        border-radius: var(--radius);
        border: none;
        cursor: pointer;
    }

    @keyframes fade-in {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .fade-in {
        animation: fade-in 200ms ease-in-out;
    }

    @media (max-width: 768px) {
        .panel {
            padding: 1rem;
        }
        .panel-title {
            font-size: 1.1rem;
        }
    }

    @supports (backdrop-filter: blur(10px)) {
        .panel-glass {
            backdrop-filter: blur(10px);
            background: rgba(2, 6, 23, 0.7);
        }
    }

```

Contributing
------------

[](#contributing)

If you find any issues or have suggestions for improvements, feel free to open an issue or submit a pull request on the GitHub repository.

Credits
-------

[](#credits)

- Palestine banner and badge by [Safouene1](https://github.com/Safouene1/support-palestine-banner).

License
-------

[](#license)

**PhpCssBuilder** is open-sourced software licensed under the [MIT license](LICENSE).

###  Health Score

28

—

LowBetter than 54% of packages

Maintenance75

Regular maintenance activity

Popularity0

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity29

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

147d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/deb82fef56c6147e5256320e88516da1909e25764a692938928eb1929de809db?d=identicon)[ahmed-rashad-alnaggar](/maintainers/ahmed-rashad-alnaggar)

---

Top Contributors

[![ahmed-rashad-alnaggar](https://avatars.githubusercontent.com/u/131385452?v=4)](https://github.com/ahmed-rashad-alnaggar "ahmed-rashad-alnaggar (3 commits)")

---

Tags

csscss builder

### Embed Badge

![Health badge](/badges/alnaggar-php-css-builder/health.svg)

```
[![Health](https://phpackages.com/badges/alnaggar-php-css-builder/health.svg)](https://phpackages.com/packages/alnaggar-php-css-builder)
```

###  Alternatives

[components/flag-icon-css

A curated collection of all country flags in SVG — plus the CSS for easier integration.

12.0k1.6M23](/packages/components-flag-icon-css)[matthiasmullie/minify

CSS & JavaScript minifier, in PHP. Removes whitespace, strips comments, combines files (incl. @import statements and small assets in CSS files), and optimizes/shortens a few common programming patterns.

2.0k30.5M336](/packages/matthiasmullie-minify)[scssphp/scssphp

scssphp is a compiler for SCSS written in PHP.

62827.7M220](/packages/scssphp-scssphp)[mexitek/phpcolors

A series of methods that let you manipulate colors. Just incase you ever need different shades of one color on the fly.

5003.6M18](/packages/mexitek-phpcolors)[wikimedia/less.php

PHP port of the LESS processor

12327.4M77](/packages/wikimedia-lessphp)[cerdic/css-tidy

CSSTidy is a CSS minifier

2092.0M6](/packages/cerdic-css-tidy)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)