LearnBoost/stylus — Issue #454: Introduce an option to mangle compilation results
Author: paulmillr
Created: 2011-11-04 20:10:19+00:00
State: open

**tl; dr:** I propose to add an option that would compile this

```sass
.photos
.photo
.description
```

to

```css
.photos {}
.photos-photo {}
.photos-photo-description {}
```

### What
In the most of today's heavy webapps code is very unstructured. It doesn't properly use indentation.

Dynamic CSS-like languages (less, sass, stylus) allow selector nesting, like:

```sass
.users
padding: 2px
.user
padding: 10px
.avatar
padding: 16px
```

### Cost
It is an awesome and very structured way to describe styles.

Although, that approach has one major issue: the descendant selector is the most expensive selector in CSS. Really, it is **dreadfully** expensive. While this expensiveness is totally OK for small sites, it is a pain for big and fat ones.

In my webapps, I usually use five and more indented levels. Comprehensive example: [paulmillr/vk-contest-2011/css/style.css#L450](https://github.com/paulmillr/vk-contest-2011/blob/51b811b77e8de742adcddacb5a1b5d8a16d72802/css/style.css#L450).

### Idea
To deal with performance issues in big webapps, user would be able to use some new compilation option, like `--mangle`, that would mangle all descendant selectors with some symbol, that would be used for namespace resolution. Like `_` or `-`.

So, instead of this

```css
.wall {
border: 1px solid #696; }
.wall-posts {
padding-top: 7px; }
.wall-post {
padding: 12px 0 6px 1px;
border-top: 1px solid #ededed; }
.wall-post-avatar {
position: absolute;
display: block;
width: 50px;
height: 50px; }
.wall-post-content {
margin-left: 50px;
padding-left: 13px; }
.wall-post-initials {
font-weight: bold;
color: #4f6b8d; }
.wall-post-initials:hover {
text-decoration: underline; }
.wall-post-text {
padding: 3px 0; }
.wall-post-attachment {
padding: 5px 0; }
.wall-post-attachment-type-photo {
float: left;
padding-right: 15px; }
.wall-post-attachment-label {
font-weight: bold;
color: #888; }
.wall-post-attachment-photo {
margin: 0; }
.wall-post-article-photo {
position: absolute;
padding-top: 5px; }
.wall-post-article-photo-image {
width: 75px;
max-height: 98px; }
.wall-post-attachment-info {
margin-left: 85px; }
.wall-post-attachment-info.no-attachment-photo {
margin-left: 0; }
.wall-post-attachment-title {
font-weight: bold; }
.wall-post-attachment-title:hover {
text-decoration: underline; }
.wall-post-footer {
padding-bottom: 3px;
line-height: 20px; }
.wall-post-date {
color: #aaa; }
.wall-post-date:hover {
text-decoration: underline; }
```

it would be much more comroftable to write something like this:

```sass

.wall
.posts
padding-top: 7px
.post
padding: 12px 0 6px 1px
border-top: 1px solid #ededed
.avatar
position: absolute
display: block
width: 50px
height: 50px
.content
margin-left: 50px
padding-left: 13px
.initials
font-weight: bold
color: #4f6b8d
&:hover
text-decoration: underline
.text
padding: 3px 0
.attachment
padding: 5px 0
.type-photo
float: left
padding-right: 15px
.label
font-weight: bold
color: #888
.photo
margin: 0
.article-photo
position: absolute
padding-top: 5px
.image
width: 75px
max-height: 98px
.info
margin-left: 85px
.info.no-attachment-photo
margin-left: 0
.title
font-weight: bold
&:hover
text-decoration: underline
.footer
padding-bottom: 3px
line-height: 20px
.date
color: #aaa
&:hover
text-decoration: underline
```