[Pro] Kelly's Questions about CSS?

Off Topic
1

I’m continuing my education on CSS and today I learned more about classes and ids. Quite frankly, I always considered these elements to be used primarily for styling (font, size, color, etc.)

However, the online instructor is suggesting that web designers consider using classes to improve website semantics, that is in addition to formatting.

I know classes can have the same name and be reused and I know ids need to have a unique name, but how unique? In other words is the uniqueness of an id’s name page or site specific?

Thanks,
K

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

It must be unique to the page but it can be reused elsewhere in the site, but again, only once per page.

Todd

In other words is the uniqueness of an id’s name page or site specific?

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

I’ve not heard people argue in favor of classes over ids for semantics -
except as a reminder to the designer of their own outline structure, I
don’t think id’s OR classes contribute to actual semantic structure.
Meaningful (to the designer) ids and classes are a good idea, for
designers.

As FWP is id-manic, I’ve tended to use ids to label my structure…
id=header, id=header-content, that sort of thing. However, HTML5 gives you
actual semantic structures so I’ve relaxed my id naming regimen a bit.
Although, for FWP the id names are reflected in the Site Panel item
structure so they are arguably still of value to help visualize your page
structure. Applying the same logic to the styles palette can also be
helpful for tracking your own work… but not in any way I think for
improving semantics.

–

–
Ernie Simpson

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

On a slight tangent http://css-tricks.com/semantic-class-names/.

Todd
http://xiiro.com

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

This is how many of the HTML5 element names were chosen in the first place. The WHATWG and W3C working group each did a statistical analysis of the most common class and ID attributes applied to the first and second-level elements, and used that to drive the design of names of the new “extra-semantic” elements. Ditto for form elements, where the name attribute was used.

Walter

On Jan 9, 2014, at 9:46 PM, Ernie Simpson wrote:

I’ve not heard people argue in favor of classes over ids for semantics -
except as a reminder to the designer of their own outline structure,

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

On Jan 9, 2014, Walter wrote:

This is how many of the HTML5 element names were chosen in the first
place. The WHATWG and W3C working group each did a statistical analysis of
the most common class and ID attributes applied to the first and
second-level elements, and used that to drive the design of names of the
new “extra-semantic” elements. Ditto for form elements, where the name
attribute was used.

Now I’d heard that one, which makes sense to use rational, descriptive
terms to create the semantic elements, yet rationally and descriptive named
ids and classes do not affect semantics.

The same with Todd’s article - there are compelling workflow reasons to
use descriptive id and class names, but improving semantics isn’t one.

I am leaning toward things like microdata for extending the semantic
structure already provided by HTML5… though I fear I am too lazy to follow
this very focused approach.

http://diveintohtml5.info/extensibility.html

–

–
Ernie Simpson

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Good grief, all I can say is thank God id/class names do not affect semantics, and if they did, I certainly don’t want to know about it. As if I don’t already have enough semantic crap to contend with as it is.

Todd
http://xiiro.com

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

I do think it’s interesting that at the beginning of the post Chris mentions the sometimes dogmatic pursuit of semantics. You gotta wonder at what point the Law of Diminishing Returns kicks-in. Objectively, how important is it, really? Can the benefits be measured or quantified? [All rhetorical, btw]

I don’t know about you guys but I spend a fair bit of time considering semantic structure and I would be lying if I said I don’t often question the amount of time I spend on it vs the perceived payoff.

Todd
http://xiiro.com

http://css-tricks.com/semantic-class-names/.

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

This is all very interesting. So if you wanted to use an article tag instead of a div tag how do you do that in FWP?

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

From the Book of Zeldman:

–

–
Ernie Simpson

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

11

New question.

The online CSS instructor stated that whenever possible you should avoid using the !important declaration and try to resolve the CSS conflict through normal means. I’ve noticed that a lot of more advanced FWP forum members tend to use the !important command. Why is that?

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

12

Ernie, I finally understand why you prefer to use ems over pixels to specify font sizes. It’s amazing what a little CSS training will do. :slight_smile:

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

13

!important will get you out of a jam, particularly when you want to override something that is set in an Action or is styled inline:

<div id="foo" style="width: 100px">...</div>

Ordinarily, if you wanted this to be anything other than 100px wide, you would have to reach into the code (which Freeway won’t let you do) and change it there. That’s because the inline style is the “court of last resort” when it comes to CSS. But if you have a stylesheet or a style block in the head of the page, and you add !important to the width property, that will override even this ultra-specific definition.

The trouble with !important is that it becomes a nuclear arms race. Once you set one thing up with it, you won’t be able to change that value again. There’s no such thing as !important !important, or !extra-important.

The reason that this article is suggesting you don’t want to go down that road is that having to use it at all is a “code smell” – it means that you did something too forceful earlier, and now there’s no place left for you to turn. Sometimes in Freeway, it’s all you can do, but if you are building up your styles by hand, and relying on the CSS cascade to build up complex behavior out of many, simple rules, then you should look at all the rules that apply to that object, and see if one of them is way too specific. It’s good advice.

Walter

On Jan 10, 2014, at 8:04 AM, RavenManiac wrote:

New question.

The online CSS instructor stated that whenever possible you should avoid using the !important declaration and try to resolve the CSS conflict through normal means. I’ve noticed that a lot of more advanced FWP forum members tend to use the !important command. Why is that?

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

14

Great explanation. Thanks Walter.

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

15

The online CSS instructor stated that whenever possible you should avoid using the !important declaration and try to resolve the CSS conflict through normal means. I’ve noticed that a lot of more advanced FWP forum members tend to use the !important command. Why is that?

The problem with using !important is that it has the same specificity as an inline style and is very challenging to override.

It’s very difficult to override Freeway’s styling if you want to use classes. Freeway uses ID’s exclusively, which have a higher amount of specificity than a class, regardless of anything else. Here’s a interesting infographic showing just how all this works: http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg

There is a workaround though. A descendant selector beginning with an ID followed with a class will override a plain id. Freeway wraps all of its pages with <div id="PageDiv">. Hence, the selector #PageDiv .classname will have a higher level of specificity than anything that Freeway creates naturally.

This workaround is going to be in the next version of Backdraft, as it has allowed me to remove all those !important flags that were required, and will make Backdraft’s CSS much easier to override for the advanced users.

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

16

This workaround is going to be in the next version of Backdraft, as it has
allowed me to remove all those !important flags that were required, and
will make Backdraft’s CSS much easier to override for the advanced users.

I’m curious Caleb, how you will handle styling for Master Items - which
alreadyfollow the div-id.classname convention (#divname.f-ms) or can
change. Do you plan to code for both states, altered and unaltered?
(#divname, #divname.f-ms)?

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

17

Since I’m a relatively new purchaser of Backdraft, may I ask how users will perform an update if you they a website designed with an older Backdraft template?

I would assume you’re using the same element naming conventions as Backdraft 1.0, albeit with perhaps some new features and updated CSS code could probably be cut and pasted into the old site HTML head area.

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

18

I think I either need a new keyboard or need to slow down and proof my posts before clicking send. Sorry about the grammar in that last post. :slight_smile:

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

19

Now that I’m starting to dabble in CSS, is Coda still the preferred editor amongst seasoned FWP users?

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

20

I don’t know if “preferred” is accurate, but yes, some of us do use Coda. But we also use CSSEdit, TextMate, Espresso or Sublime Text to name a few. Take your pick.

Todd

Now that I’m starting to dabble in CSS, is Coda still the preferred editor amongst seasoned FWP users?

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options