Databases
StackOverflow2013
Postsdbo
POMerge multiple css rules of a class into a single class declaration?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMerge multiple css rules of a class into a single class declaration?
    primarykey
    data
    text
    <p>I like it to separate different concerns of a class in css.</p> <p>Example:</p> <pre><code>// Layout .myElement { width: 100px; height: 100px; margin: 10px; padding: 5px; } // Chrome .myElement { background: red; border: 2px solid green; box-shadow: inset 0 0 10px black; } // Content .myElement { color: white; font-size: 120%; } // Interaction .myElement:hover { background: black; border: 10px dotted red; } </code></pre> <p>Pretty fine so far. Personally I find that approach readable, nice to maintain and nice for development. But is there any mechanism/tool available which would merge all rules of a class into one single class declaration <strong>before</strong> deployment automatically?</p> <p>Desired result:</p> <pre><code>.myElement { width: 100px; height: 100px; margin: 10px; padding: 5px; background: red; border: 2px solid green; box-shadow: inset 0 0 10px black; color: white; font-size: 120%; } .myElement:hover { background: black; border: 10px dotted red; } </code></pre> <p>EDIT: After reading the comments I felt my "artificial" example wasn't comprehensive enough. Below is a real world example written in the Stylus syntax but the results are the same as described above. I left the original example from above in place. The next example exists as a single file which describes the appereance of a certain area and its contents which appears in various places on a site. It's like a microcosm for that area. As a consequence you can imagine there are more of these microcosms.</p> <pre><code>// Layout .events padding 2em .eventItem margin 0 0 4em .eventCal float left padding 2.5em 0 0 .eventArticle margin 0 0 0 6em .eventHead margin 0 0 1em time margin 0 2em 0 0 // Chrome .eventCal background url("../../assets/img/icon-events.png") no-repeat .eventHead border-bottom .5em solid $chimney // Content .eventItem list-style-type none a color $beige text-decoration none h2 font-family $elsie .eventCal color $beige font-family $elsie font-weight bold font-size 150% .eventHead font-size 75% .eventDesc font-size 90% // Interaction .eventItem a:hover color $chimney text-decoration underline </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USSaucier
    1. USSaucier
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POMerge multiple css rules of a class into a single class declaration?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POMerge multiple css rules of a class into a single class declaration?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POMerge multiple css rules of a class into a single class declaration?
      1. USkizu
      1. VTFavorite
    1. COYou can always use those comments INSIDE the class you know.
      singulars
      1. POMerge multiple css rules of a class into a single class declaration?
      1. USDavid Starkey
    2. COis there any reason you can't just write the css code the way it's written in your desired result in the first place? you could just include the comments inside that single class...
      singulars
      1. POMerge multiple css rules of a class into a single class declaration?
      1. USbraican
    3. CO*Readable and nice to maintain*.. As for me, merged version is much more comprehensible.
      singulars
      1. POMerge multiple css rules of a class into a single class declaration?
      1. USdfsq
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload