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(6mo ago)00MITPHPPHP >=7.3

Since Dec 22Pushed 6mo 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 today

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

27

—

LowBetter than 47% of packages

Maintenance68

Regular maintenance activity

Popularity0

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity30

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

192d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/131385452?v=4)[ahmed-rashad-alnaggar](/maintainers/ahmed-rashad-alnaggar)[@ahmed-rashad-alnaggar](https://github.com/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

[twbs/bootstrap-sass

bootstrap-sass is a Sass-powered version of Bootstrap 3, ready to drop right into your Sass powered applications.

12.5k1.9M17](/packages/twbs-bootstrap-sass)[components/flag-icon-css

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

12.2k1.7M23](/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.0k33.1M462](/packages/matthiasmullie-minify)[scssphp/scssphp

scssphp is a compiler for SCSS written in PHP.

62930.2M317](/packages/scssphp-scssphp)[tubalmartin/cssmin

A PHP port of the YUI CSS compressor

23143.5M66](/packages/tubalmartin-cssmin)[mexitek/phpcolors

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

4993.9M20](/packages/mexitek-phpcolors)

PHPackages © 2026

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