styles not shown alphabetically?

[stumped]

when styles such as pcalibre get introduced by a conversion
why are they not shown in the expected alphabetic place i.e. next to other styles beginning with .p....

I was struggling to find one, which I could see in the book code, but not in the styles list...eventually i find it with a search - and it's not with the .p... CSS entries, but below the .X... entries

is there some subtle reason for that?
e.g. ( copied from sigil CSS list) note that the .pcalibre... styles come after all of the .x styles
.x13-bm-index2 {
display: block;
font-size: 0.7em;
margin-bottom: 0;
margin-left: 3.06em;
margin-right: 0;
margin-top: 0;
orphans: 2;
text-indent: -0.94em;
widows: 2
}
.pcalibre4:visited {
-webkit-text-fill-color: rgb(255, 102, 0);
color: rgb(255, 102, 0);
text-decoration: underline
}
.pcalibre6:link {
-webkit-text-fill-color: rgb(255, 102, 0);
color: rgb(255, 102, 0);
text-decoration: underline
}
.pcalibre1:first-letter {
color: #818180;
float: left;
font-size: 2.6em;
margin-bottom: 0;
margin-left: 0;
margin-right: 0.05em;
margin-top: 0
}
.pcalibre:first-letter {
color: #818180;
float: left;
font-size: 4em;
margin-bottom: 0;
margin-left: 0;
margin-right: 0.05em;
margin-top: 0
}

[DiapDealer]

To my knowledge, the content of a css file have never been alphabetized by Sigil. Was this perhaps intended for a calibre forum? Or am I just somehow missing the gist of the question?

[stumped]

strange. i have been using sigil for years, and stuff looks alphabetized ( except for the above). you are suggesting that happens in calibre, before I get to opening and editing in sigil?
my usual workflow ( initial epub-> epub convert ( to do various automated add/remove things) then a final tweak/edit in sigil.
one think i do regularly in sigi is remove unused CSS classes. I assumed that CSS stuff got tidied and sorted then?

i could ask again in calibre forum except that it against the rules to ask the same Q in 2 places.
i guess that the .pcalibre things are some subset of styles in that they apply tweaks to the main styles? because when calibre creates or renames styles they usually go .calibre1, .calibre2... and are filed under c.
e.g. there is often a "pcalibre" style that is only used for a dropcap. Its not obvious from the book code but a detailed inspect of .pcalibre class, once I find it , shows a :firstletter bit inside

so what happens is that I look in book view ( shock, horror, but old dogs can't learn new tricks), I see some hideous misplaced (post conversion) dropcap and go looking for the style that's putting it there..
in most books the offending style will still be called "dropcap",
but some books will have a structure like <p someclass pcalibre> first para of text </p>
where pcalibre is acting only on a single letter

the query got posted after staring at the styles page in sigil for ages and not finding pcalibre listed with the p... styles

I'd be happy for some empowered person to move the whole thread

[Turtle91]

No, Sigil has never rearranged the order of CSS, nor should it.

CSS rules have a hierarchy and the most recently applied style (the one at the bottom of the list) has priority over any others unless those others have a higher specificity. If Sigil rearranged that order it would be massively incorrect...

If you have been working with an alphabetized CSS sheet, it is because it was originally designed that way. IMO, you lose a lot of readability/editability/understandability (and maybe a few other abilities) when you have a straight up alphabetization rather than actual descriptive names.

style1 {}
style2 {}
style3 {}
style4 {}

VS.

.title {}
.underline {}
.firstpara {}
.newsection {}

Personally, I group my CSS into sections for better organization:

Spoiler:

@page {margin:0; orphans:0; widows:0}

html, body {height:100%; font-family:Verdana, Arial, sans-serif}
body {font-size:100%; margin:0; padding:0; font-weight:normal}
p {text-indent:1.2em; margin:0; line-height:1}

/* Headers */
h1, h2, h3, h4, h5, h6 {display:block; text-align:center; text-indent:0; margin:1em 0; page-break-after:avoid; font-style:normal; font-weight:bold; font-family:serif}
h1 {font-size:1.7em; margin-top:0; text-transform:uppercase}
h2 {font-size:1.4em; text-transform:uppercase}
h2.title {font-size:1.7em; margin-top:0; text-transform:uppercase}
h3 {font-size:1.4em; text-transform:uppercase}
h4 {font-size:1.1em; font-weight:normal; font-style:italic}
h5 {font-size:1.1em; font-style:italic}
h6 {font-size:1.1em}
h1 span, h2 span, h3 span {display:block; font-size:.8em; text-transform:none; font-variant:small-caps}
h3 img      {display:block; margin:.25em auto 1em; text-align:center; text-indent:0; width:25%; max-width:1280px}

/* Title Page */
.auth, .stit1, .stit2, .subtit {text-align:center; text-indent:0; margin:0; font-weight:bold; font-size:1.1em; font-family:serif}
.subtit {margin:1em 2em; font-size:.8em}
.stit1  {margin-bottom:1em}
.stit2  {margin-top:2em; font-weight:normal; font-style:italic}
.auth   {margin-top:1em; font-size:1.4em}


/* publishers */
.pub     {margin-top:5em; text-indent:0; text-align:center; font-size:.7em; font-family:serif}
.pub img {display:block; text-indent:0; text-align:center; margin:0 auto}

/* logos */
#fb::before {display:inline-block; content:''; background-image:url('../Images/facebook.svg'); background-size:35px 35px; height:35px; width:35px}
#twit::before {display:inline-block; content:''; background-image:url('../Images/Twitter.svg'); background-size:35px 35px; height:35px; width:35px}


/* Chapter Header */
.ChNo, .ChTit, .ChDiv, .PtTit {text-indent:0; text-align:center; font-weight:bold}

/* .ChImg {line-height:4em; background-size:4em; background:url("../Images/z.jpg") no-repeat center} */
.PtTit {margin:1em auto 3em; font-size:1.25em}
.ChNo  {margin:2em auto 1em; font-size:2em}
.ChTit {margin:2em auto; font-size:1.5em}
.ChDiv {margin:1.5em auto; font-size:.9em; word-spacing:.8em}
.ChDiv img {margin:0 auto; text-indent:0; text-align:center; width:20%; max-width:40px; min-width:25px}

/* Images */
img    {max-height:100%; max-width:100%}
.image {margin:0; text-align:center; text-indent:0}
.fullimg {margin:0; padding:0; height:100%; width:100%}
.black {background-color:black}
.white {background-color:white}

/* Tables */
table    {margin:0; border-collapse:collapse}
td       {vertical-align:top; padding:5px}
thead    {text-align:center; font-weight:bold}
tfoot    {font-size:.8em}
tbody td {border:1px solid}

/* Definition Lists */
dt {font-weight:bold}
dd {margin:0 0 .5em 3em}

ol {margin:.5em; list-style-type:upper-roman} 
ul {margin:.5em; list-style-type:none}
li {margin:0 0 .5em; text-align:left; text-indent:-1.5em; page-break-inside:avoid; padding-left:2em}
li span {display:block; margin:.5em 3em}

/* Styles for Defined tags */
hr         {margin:2em 0; height:2px; width:75%; background-color:black; border-color:black}
hr.short   {width:7%; max-width:45px}
sup, sub   {vertical-align:0; position:relative; font-size:0.75em}
sup        {bottom: 1ex}
sub        {top: 0.8ex}
a          {color:inherit; text-decoration:none}
strong, .B {font-weight:bold}
em, .I     {font-style:italic}
em em      {font-style:normal}

/* Font styles */
.strike      {text-decoration:line-through} /* add color:red if you want red strike */
.strike span {color:black} /* span text if you want a different color */
.up          {text-transform:uppercase}
.u           {text-decoration:underline}
.sc          {font-variant:small-caps}

/* Vertically centered on page */
div.v-ctr     {height:100%; width:100%; display:table; position:fixed; padding:0; margin:0; text-indent:0}
div.v-ctr div {display:table-cell; vertical-align:middle; padding:0; margin:0}

/* Centered & Left-aligned text */
div.quote       {margin:2em 0; float:left; position:relative; left:50%; clear:both}
div.quote p     {display:block; text-indent:0; margin:0; font-size:.85em; text-align:left; position:relative; left:-50%; padding:0 2em; margin:0}
div.quote p.sig {margin:1em 0 0; text-align:right}

/* No Indent Paragraphs */
.ChDiv + p, blockquote + p, h3 + p, h2 + p, hr.short + p, .noind, .SecBrk, .SecBrk2 {text-indent:0}
.SecBrk               {margin-top:2em}


/* First Para in lieu of Drop Caps */
p.first  {text-indent:0; font-size:1em; line-height:1em; clear:both}
p.first::first-letter {font-family:serif; font-size:2em; font-weight:bold; float:left; margin:-.1em .2em -.1em .1em; line-height:1}
p.first::first-line {font-variant:small-caps; font-size:1.15em}


/* Misc style*/
.box   {border:5px inset #000000; padding:12.5%; margin:12.5%; text-align:justify}
.rt    {text-indent:0; text-align:right}
.lt    {text-indent:0; text-align:left}
.ctr   {text-indent:0; text-align:center}
.norm  {font-style:normal; font-weight:normal}
.banner{margin-top:2em; margin-bottom:2em}
.ded   {text-indent:0; margin:1em 15% 0; text-align:center; font-style:italic; font-size:.8em}
.epi   {text-indent:0; margin:0 35% 0.5em; font-size:1.25em}
.time  {text-indent:0;margin:1em; font-size:.8em}
.spc   {margin-top:1em}
.sig   {text-align:right; margin-top:1em}

/* Division section styles */
/* Default */
div {text-indent:0; margin:2em}
div.copy, div.ata {margin-top:0}

/* Custom */
div.ack  p      {margin:0 0 .5em; font-size:1.15em; text-align:left; text-indent:0}
div.ack p.sig   {margin:1em 0 0; text-align:right}
div.copy p      {margin:0 0 .75em; font-size:0.85em; text-align:center; text-indent:0}
div.copy div    {margin:.5em auto;text-indent:0; text-align:center; width:20%; max-width:117px}
div.copy img    {width:10%; max-width:50px}

/* Blockquote section styles */
/* Default */
blockquote {margin:2em; text-align:left; text-indent:0}
blockquote p {text-indent:0; margin:0 0 .75em; font-size:0.95em}

/* Custom */
blockquote.book p   {text-align:justify}
blockquote.verse p  {margin-bottom:.25em; font-style:italic}

In Sigil (and I think Calibre has a similar feature) you can be taken directly to the correct style by ctrl-click on the class in the code view. This assumes, of course, that the CSS file is correctly linked to the html file, and that there, in fact, IS a defined style...

[DiapDealer]

Originally Posted by stumped

strange. i have been using sigil for years, and stuff looks alphabetized ( except for the above). you are suggesting that happens in calibre, before I get to opening and editing in sigil?

I'm only suggesting that Sigil's css reformat routine doesn't do any alphabetizing of the selector list. What else might do so, is not my area of expertise.

If anyone has any first-hand knowledge of Sigil alphabetizing the list in the past when reformatting, I'd be happy to investigate, but I certainly don't recall it.

Originally Posted by stumped

the query got posted after staring at the styles page in sigil for ages and not finding pcalibre listed with the p... styles

I'd be happy for some empowered person to move the whole thread

Do you have a preference where?

[stumped]

Duh, CSS heirarchy rules. I knew that once, then completely overlooked it, thanks to Turtle91 for reminding me.

As to where to move the thread to, I think the bin would now be best. Sorry to all.

[DiapDealer]

No problem. It may prove educational to others, so I'll just let it fall off the screen of its own accord.

[theducks]

IIRC there were CSS SORT plugins you could install and use at your whim
(by my choice )
BTW this can also break a styling that made use ( worms for the unsuspecting ) of the Cascade by later redefining an attribute

[stumped]

Originally Posted by DiapDealer

No problem. It may prove educational to others, so I'll just let it fall off the screen of its own accord.

it may even prove educational to me, when I have the next senior moment

[Notjohn]

I've been using Sigil since January 2012, and my (unalphabetized) style sheet has never changed. All paragraph styles are together, but they precede the heading styles. If there's any order, it's probably by frequency of my using them.

[hobnail]

On the other hand, in your example it also looks like within each selector the declarations / properties are sorted, e.g. widows comes after font-size. That I like to do.

[snarkophilus]

Originally Posted by hobnail

On the other hand, in your example it also looks like within each selector the declarations / properties are sorted, e.g. widows comes after font-size. That I like to do.

I prefer to see margin options in top,bottom,left,right order. That makes more sense to me. Otherwise order of items in each selector seems to vary on what I think is most important at the time, and this definitely has changed over time.

[Turtle91]

Originally Posted by hobnail

On the other hand, in your example it also looks like within each selector the declarations / properties are sorted, e.g. widows comes after font-size. That I like to do.

If there is any alphabetical order it is purely coincidental. The only thing I intentionally do is create a 'base/default' definition, then I will modify that for specific situations.
eg:

Spoiler:

/* Blockquote section styles */
/* Default */
blockquote   {margin:2em; text-align:left; text-indent:0}
blockquote p {text-indent:0; margin:0 0 .75em; font-size:0.95em}

/* Custom */
blockquote.grave p  {font-weight:bold; text-align:center}
blockquote.book p   {text-align:justify}
blockquote.verse p  {margin-bottom:.25em; font-style:italic}

I typically will just copy/paste a previous style definition then make mods as needed. That may be why the order of style definitions is similar between selectors. When I am done editing a book I use the cssRemoveUnusedSelectors plugin to get rid of anything I don't need in that book. It also reformats the stylesheet to make it look pretty, but it doesn't rearrange anything.

[theducks]

I think many of us have saved clips of OUR way of doing things.

The only WRONG ones, are the one that do not work (or cause devices to crash)

[BetterRed]

Originally Posted by theducks

. . .
The only WRONG ones, are the one that do not work (or cause devices to crash)

Or those that are no longer comprehensible

BR