I don’t think that I ever responded to this… and though I’m sure Kelly
figured it out, I thought that I’d make some comments for anyone else
interested.
When I hand-code html and css, I try to group my CSS code so that I can
easily find and edit relevant elements - so I try to put basic Structural
Items together, basic Text items together, Menu items, List items, and so
forth. Keeping in mind, of course, that the the order in which my styles
appear affect the CSS Cascade. Structural Items to me represent those
logical HTML sectioning elements that are physically used to build a
document structure - so divs, headers, footers, etc.
I think Kelly was also intrigued by the selectors that I used for my
styles… Freeway employs a basic selector set, but in CSS there is an
abundance of very creative and useful selector types for making powerful
and elegant code. For example, the first selector is an example of a
grouped selector, where a single style definition can be applied to a
group of selectors.
For review, here’s an example of CSS code syntax -
http://cssway.thebigerns.com/Resources/diag-css-syntax.png
Group selectors are separated by commas. Freeway Pro writes what I call
“structural” code redundantly, item by item, and by id attribute. As a
human coder, I think it’s more efficient to write some things just once, as
a general rule, then worry about the exceptions later. So, since I know
that my layout is relative, I take those sectioning items used to make the
general layout and position them relatively in one swoop…
div, header, article, section, footer { position: relative; }
Another way to write this so it is easier to read is to add a
carriage-return after the comma…
div,
header,
article,
section,
footer { position: relative; }
but t’s still the same thing.
My sites are built like layer cakes with these sectioning elements. The
top-parent element (PageDiv) is unaligned with an undefined flexible width,
so the section containers (invisibly) extend the width of the browser
window. Into these I put content containers which are centered and given
max-widths… which then keep the contents quite visibly in a page-like area.
Again, these content-containers have common styles that are easier to
affect globally. So my second example, while again an example of a group
selector, is actually an example of a group of Child selectors…
header > div, article > div, section > div, footer > div { margin: 0 auto;
max-width: 1200px; }
Child selectors target elements that are directly children of a parent
element – and no further. Descendant selectors continue down the family
tree… so that header div will affect every div element within the
header element. Child selectors limit that influence to the first
children of that line. Since that is how my structure is designed, it makes
it perfect for this use.
<section element>
<div container><!-- direct child of the section element -->
<div><!-- child of container element, therefore only indirectly
child of the section -->
Using this kind of logic with code makes it easier to affect elements by
their structural position, instead of by name or class – which are all
valid ways to write styling code. Just this way uses less effort to get the
same results. Editing is more direct when you can affect similar items with
a single edit.
Of course, this way of thinking doesn’t always apply well in Freeway Pro…
firstly, the goddam Tag field in the Style Editor isn’t resizable or big
enough to see squat. I have to use a text editor to write the selector the
copy-paste into the Tag field. 
However - once you numb yourself to that
reality, Freeway accepts and reliably writes these special selector styles.
Then I can use something like the Anonymous action to disconnect the
element from the id selector it writes for that element so my custom style
kicks in.
It’s important to note, though, that Freeway still writes the style code
for such items… though it no longer applies it – which is somewhat bad,
aesthetically. Also, FWP has its own logic for the order in which styles
are written. This makes it harder to group styles logically or to benefit
the Cascade order.
A couple of my favorite learning resources for CSS style selectors-
http://css.maxdesign.com.au/selectutorial/index.htm
–
Ernie Simpson
On Wed, Jan 15, 2014 at 12:49 AM, RavenManiac email@hidden
wrote:
Ernie, I haven’t seen this syntax used before:
thebigerns.com
/* STRUCTURAL STYLES */
div,
header,
article,
section,
footer
header > div,
article > div,
section > div,
Where can I find out more about Structural Styles?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
