PHPackages                             popphp/pop-css - 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. popphp/pop-css

ActiveLibrary

popphp/pop-css
==============

Pop CSS Component for Pop PHP Framework

2.0.3(6mo ago)46.9k—0%2BSD-3-ClausePHPPHP >=8.3.0CI passing

Since Nov 2Pushed 6mo ago1 watchersCompare

[ Source](https://github.com/popphp/pop-css)[ Packagist](https://packagist.org/packages/popphp/pop-css)[ Docs](https://github.com/popphp/pop-css)[ RSS](/packages/popphp-pop-css/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)Dependencies (2)Versions (21)Used By (2)

pop-css
=======

[](#pop-css)

[![Build Status](https://github.com/popphp/pop-css/workflows/phpunit/badge.svg)](https://github.com/popphp/pop-css/actions)[![Coverage Status](https://camo.githubusercontent.com/cc162346b0ba814b08b210e05e9582467fdf1a8b0072ac14bc01496c466d6077/687474703a2f2f63632e706f707068702e6f72672f636f7665726167652e7068703f636f6d703d706f702d637373)](http://cc.popphp.org/pop-css/)

[![Join the chat at https://discord.gg/TZjgT74U7E](https://camo.githubusercontent.com/acad7b0eeb78b78d08ffd2b85681ab243436388b5f86f8bcb956a69246e53739/68747470733a2f2f6d656469612e706f707068702e6f72672f696d672f646973636f72642e737667)](https://discord.gg/TZjgT74U7E)

- [Overview](#overview)
- [Install](#install)
- [Quickstart](#quickstart)
- [Selectors](#selectors)
- [Media Queries](#media-queries)
- [Comments](#comments)
- [Parse CSS](#parse-css)
- [Minify](#minify)

Overview
--------

[](#overview)

`pop-css` provides the ability to create new CSS files as well as parse existing ones. There is support for a number of CSS-based features such as media queries, comments and even minification.

`pop-css` is a component of the [Pop PHP Framework](https://www.popphp.org/).

[Top](#pop-css)

Install
-------

[](#install)

Install `pop-css` using Composer.

```
composer require popphp/pop-css

```

Or, require it in your composer.json file

```
"require": {
    "popphp/pop-css" : "^2.0.3"
}

```

[Top](#pop-css)

Quickstart
----------

[](#quickstart)

In creating CSS, you will use the main CSS object and create and add selector, media and comment objects to it to build your CSS.

```
use Pop\Css\Css;
use Pop\Css\Selector;

$css = new Css();

$html = new Selector('html');
$html->setProperties([
    'margin'           => 0,
    'padding'          => 0,
    'background-color' => '#fff',
    'font-family'      => 'Arial, sans-serif'
]);

$login = new Selector('#login');
$login->setProperty('margin', 0)
    ->setProperty('padding', 0);

$css->addSelectors([$html, $login]);

echo $css;
```

The above code will produce:

```
html {
    margin: 0;
    padding: 0;
    background-color: #fff;
    font-family: Arial, sans-serif;
}

#login {
    margin: 0;
    padding: 0;
}
```

Rendering the CSS can happen a number of ways:

**Call the render method**

```
$cssString = $css->render();
```

**Call a string function**

```
echo $css;
```

**Write to file**

```
$css->writeToFile(__DIR__ . '/styles.css');
```

The main CSS object's constructor is also flexible and other CSS-related objects can be injected into it:

```
use Pop\Css\Css;
use Pop\Css\Selector;

$html = new Selector('html');
$html->setProperties([
    'margin'           => 0,
    'padding'          => 0,
    'background-color' => '#fff',
    'font-family'      => 'Arial, sans-serif'
]);

$login = new Selector('#login');
$login->setProperty('margin', 0)
    ->setProperty('padding', 0);

$css = new Css($html, $login);
```

[Top](#pop-css)

Selectors
---------

[](#selectors)

The selector object is the main object in which to define the various selectors and add them to the main CSS object. The selector constructor accepts any valid CSS selector.

```
use Pop\Css\Css;
use Pop\Css\Selector;

$css = new Css();

// Element selector
$html = new Selector('p');
$html->setProperties([
    'margin'      => 0,
    'padding'     => '3px',
    'color'       => '#555',
    'font-family' => 'Arial, sans-serif'
]);

// ID selector
$login = new Selector('#login');
$login->setProperty('margin', 0)
    ->setProperty('padding', 0);

// Class selector
$bold = new Selector('.bold');
$bold->setProperty('font-weight', 'bold');

$css->addSelectors([$html, $login, $bold]);

echo $css;
```

The above code will produce:

```
p {
    margin: 0;
    padding: 3px;
    color: #555;
    font-family: Arial, sans-serif;
}

#login {
    margin: 0;
    padding: 0;
}

.bold {
    font-weight: bold;
}
```

[Top](#pop-css)

Media Queries
-------------

[](#media-queries)

Media queries can be created as separate objects that contain their own selector objects. They are then added to the main CSS object.

```
use Pop\Css\Css;
use Pop\Css\Selector;
use Pop\Css\Media;

$css = new Css();

$html = new Selector('html');
$html->setProperties([
    'margin'  => 0,
    'padding' => 0,
    'background-color' => '#fff',
    'font-family' => 'Arial, sans-serif'
]);

$login = new Selector('#login');
$login->setProperty('margin', 0);
$login->setProperty('padding', 0);
$login->setProperty('width', '50%');

$p = new Selector('p');
$p->setProperty('margin', 0);
$p->setProperty('padding', 0);
$p->setProperty('width', '50%');

$media = new Media('screen');
$media->setFeature('max-width', '480px');
$media['#login'] = new Selector();
$media['#login']->setProperty('width', '75%');
$media['p'] = new Selector();
$media['p']->setProperty('width', '75%');

$css->addSelectors([$html, $login, $p])
    ->addMedia($media);

echo $css;
```

The above code will produce:

```
html {
    margin: 0;
    padding: 0;
    background-color: #fff;
    font-family: Arial, sans-serif;
}

p {
    margin: 0;
    padding: 0;
    width: 50%;
}

#login {
    margin: 0;
    padding: 0;
    width: 50%;
}

@media screen and (max-width: 480px) {
    p {
        width: 75%;
    }

    #login {
        width: 75%;
    }
}
```

[Top](#pop-css)

Comments
--------

[](#comments)

Comments can be added in a number of places. They can be added to the top of the main CSS content, to the top of a selector or to the top of a media query.

```
use Pop\Css\Css;
use Pop\Css\Selector;
use Pop\Css\Media;

$css = new Css();
$css->addComment('This is a global comment');

$html = new Selector('html');
$html->setProperties([
    'margin'  => 0,
    'padding' => 0,
    'background-color' => '#fff',
    'font-family' => 'Arial, sans-serif'
]);

$p = new Selector('p');
$p->setProperty('margin', 0);
$p->setProperty('padding', 0);
$p->setProperty('width', '50%');
$p->addComment('This is a comment for the P selector');

$media = new Media('screen');
$media->setFeature('max-width', '480px');
$media['html'] = new Selector();
$media['html']->setProperty('padding', '1%');
$media['html']->addComment('This is a comment for the HTML selector in the media query');
$media->addComment('This is a comment for the media query');

$css->addSelectors([$html, $p])
    ->addMedia($media);

echo $css;
```

The above code will produce:

```
/*
 * This is a global comment
 */
html {
    margin: 0;
    padding: 0;
    background-color: #fff;
    font-family: Arial, sans-serif;
}

/*
 * This is a comment for the P selector
 */
p {
    margin: 0;
    padding: 0;
    width: 50%;
}

/*
 * This is a comment for the media query
 */
@media screen and (max-width: 480px) {
    /*
     * This is a comment for the HTML selector in the media query
     */
    html {
        padding: 1%;
    }
}
```

Comments can be tailored with the `$wrap` and `$trailingNewLine` properties that can be passed into the comment constructor. If the `$wrap` is set to `0`, it will force a single-line comment.

```
use Pop\Css\Css;
use Pop\Css\Selector;

$p = new Selector('p');
$p->setProperty('margin', 0);
$p->setProperty('padding', 0);
$p->setProperty('width', '50%');
$p->addComment('This is a comment for the P selector', 0, false);

$css = new Css($p);
echo $css;
```

The above code will produce:

```
/* This is a comment for the P selector */
p {
    margin: 0;
    padding: 0;
    width: 50%;
}
```

[Top](#pop-css)

Parse CSS
---------

[](#parse-css)

You can parse CSS with the following methods:

```
use Pop\Css\Css;

$css = Css::parseFile('path/to/styles.css');

$css = Css::parseString($cssString);

$css = Css::parseUri('http://www.domain.com/css/styles.css');
```

In each case, it will return a CSS object populated with the related CSS objects from the content of the source.

[Top](#pop-css)

Minify
------

[](#minify)

Setting the minify property on the main CSS object will perform a basic minification of the CSS content.

```
use Pop\Css\Css;
use Pop\Css\Selector;
use Pop\Css\Media;

$css = new Css();
$css->addComment('This is a global comment');

$html = new Selector('html');
$html->setProperties([
    'margin'  => 0,
    'padding' => 0,
    'background-color' => '#fff',
    'font-family' => 'Arial, sans-serif'
]);

$p = new Selector('p');
$p->setProperty('margin', 0);
$p->setProperty('padding', 0);
$p->setProperty('width', '50%');

$media = new Media('screen');
$media->setFeature('max-width', '480px');
$media['html'] = new Selector();
$media['html']->setProperty('padding', '1%');

$css->addSelectors([$html, $p])
    ->addMedia($media);

$css->minify(true);

echo $css;
```

The above code will produce:

```
html{margin:0;padding:0;background-color:#fff;font-family:Arial, sans-serif;}p{margin:0;padding:0;width:50%;} @media screen and (max-width: 480px) {html{padding:1%;}}
```

[Top](#pop-css)

###  Health Score

52

—

FairBetter than 96% of packages

Maintenance66

Regular maintenance activity

Popularity27

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity87

Battle-tested with a long release history

 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

Every ~194 days

Total

16

Last Release

200d ago

Major Versions

1.1.2 → 2.0.02023-11-09

PHP version history (7 changes)1.0.0PHP >=5.6.0

1.0.7PHP >=7.1.0

1.1.0PHP >=7.3.0

1.1.1PHP >=7.4.0

2.0.0PHP >=8.1.0

2.0.1PHP >=8.2.0

2.0.3PHP >=8.3.0

### Community

Maintainers

![](https://www.gravatar.com/avatar/c19dee900e9e20039c723cc403f76b5c22ac2dddb3f86773ae64fb082d4949e2?d=identicon)[nicksagona](/maintainers/nicksagona)

---

Top Contributors

[![nicksagona](https://avatars.githubusercontent.com/u/898670?v=4)](https://github.com/nicksagona "nicksagona (38 commits)")

---

Tags

phppoppop phpCSS parsingcss generation

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/popphp-pop-css/health.svg)

```
[![Health](https://phpackages.com/badges/popphp-pop-css/health.svg)](https://phpackages.com/packages/popphp-pop-css)
```

###  Alternatives

[popphp/pop-pdf

PHP PDF library for generating and importing PDF documents. A component of the Pop PHP Framework

207.8k1](/packages/popphp-pop-pdf)[popphp/pop-db

Pop Db Component for Pop PHP Framework

1814.6k11](/packages/popphp-pop-db)[popphp/pop-http

Pop Http Component for Pop PHP Framework

1018.5k13](/packages/popphp-pop-http)

PHPackages © 2026

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