Different Property Names In Css For Same Effect Options

[shibumi]

I was noticing that Flex seems to have different Property names in CSS that will perform the same function - or have the same effect on an item. I noticed this while watching the tutorials and using the auto complete feature (ctrl+space).

For example, you were using "fontSize" and "fontWeight" - these also show up in the Flex Properties Category View when in Design View... BUT - when I was manually editing the CSS file and using the auto complete, it would give me "font-size" and "font-weight" and many other "dash" (-) versions like padding-top etc.

Either way seems to have the same effect, so, is there any problem using one format (camel case vs dash) over the other? I'm a *big* fan of using auto complete if I can... it's just odd that it gives me that different format or property name.

[shibumi]

Interesting... I found this:

Style names

Start them with a lowercase letter and use intercaps for subsequent words: color, fontSize.

In the Flex SDK coding conventions and best practices

I wonder why it is then that the auto complete in Flex Builder uses a hyphen / dash i.e. font-size.

[CyberSorcerer]

Well you using properties in Flex you can't use a hyphen in the property. For example

CODE

<mx:Label text="CartoonSmart" fontFamily="Courier New" fontSize="24" textDecoration="underline"/>

In the above code you couldn't use font-family, font-size or text-decoration because you can't use hyphens.

Now Flex has all the styles you need under the category view of the properties tab. But to show you, I list an example below.

Now you could use regular CSS such as:

CODE

<mx:Style>
        Label {
              font-family:"Courier New";
              font-size:24;
              text-decoration: underline;
        }
</mx:Style>

Now in Flex you would use fontFamily, fontSize, textDecoration but this is an example.

The capital convention you mentioned is commonly used in programming today. It is called camelCaps. The standard convention is to small case the first letter of the word if it is a property (or Member, if associated with a Class), and the Capitalize both the first letter, and the first letter of each word there after if it is a Class, example:

firstName = (a name of a variable, or member of a class)
SemiTruck = (a class that describes and subclass of Truck)

This will probably be covered later on in Flex courses, or intermediate AS3 courses. But a member is a variable used inside a Class and a Method is a function used inside a Class. So variable and Member as the same and function and Method are the same, just used in different places.

I hope this helps some.

Welcome to Object Oriented Programming.... LOL

[shibumi]

Yep, the camelCase makes sense, I'm familiar with that... but, I was just wondering why Flex Builder auto completes using hyphens (font-weight) instead. Maybe they just stole that piece of the IDE from Dreamweaver!