I don't seem to understand Classes and ID

Hello all Webflow users !

It seems I don’t understand Classes and ID inside webflow.
Have a glance on the screen copy.

I’m trying to make a form.

Then I have several input_field.
First question : is it a good way of giving them their own name ? I wan’t them to have the same looking but sometimes the horizontal size can be different. So I gave them (as you can see) the following name :
label_field type_porteur
label_fied nom_porteur

Are type_porteur and nom_porteur IDs ?

I’m lost because I have given names to the alerting icons like
pancarte_err type_porteur
and
ico_aide type_port because when I write ico_aide type_porteur then properties of type_porteur win.

Isn’t the second name the ID ?

Webflow doesnt use ID’s. Everything is a class. The second ‘class’ you have entered is the nested class. Webflow handles classes a little differently and it can be confusing at times. Think of the nested class as a variation of the parent style. For inputs I would define a master style applicable to the entire site then apply nested classes where appropriate to style up differently in certain situations. e.g. if I needed an input at 50% width of its parent DOM container. I sometimes use nested classes as fake pseudo classes (first, last etc) perhaps to clear floats etc.

As far as I know, nested classes in Webflow behave in the same way if it were manually written like this:

.firstclass.secondclass { yourstyle: yourproperty; }

rather than:

.firstclass .secondclass { yourstyle: yourproperty; }

Note the second example would only affect child DOM elements whereas the first affects the same DOM element with the nested class applied.

As much as Webflow proclaims to be a designers tool, it does help to have some HTML/CSS knowledge up front, as their design environment is basically a GUI for CSS (albeit limited)

Hope that makes sense

Hi @Stefan_fr and @nativerez. First, thanks for your question. Webflow uses both classes and ID’s. ID’s can be set for any element and is found in the settings tab: http://help.webflow.com/general/designer-user-interface#settings-tab.

Styles can be assigned to any element, and each element can have nested styles. Classes are created on the Styles tab: http://help.webflow.com/general/designer-user-interface#style-tab.

Styles can be managed on the Style Manager tab: http://help.webflow.com/general/designer-user-interface#style-manager-tab

Regarding classes, I would recommend to:

a. use as short of class name as possible
b. use as few class names as possible. For example, in most cases, there is no reason to assign classes to containers, rows or columns and other elements that already have responsive styling.

It is ok to use classes on everything, but the more classes you have assigned, the more confusing the site design can potentially get if you have to go back and make changes later.

Finally, I would recommend to clean your unused styles from time to time in the Style Manager.

​I hope this helps. If not, please let me know – I’m happy to assist further! :slight_smile:

Cheers,
Dave

1 Like

Thank you very much nativerez and Dave for you quick replies.

I’m so sorry but I must be not connected today.
I don’t understand why.
I have to define ID for my different form if I wan’t, for example, to show help icons by using js… don’t have ?
If a help is defined then I can show the icon and if not then I hide it. But if I name all my help icons with the same name then they’ll all disappear no ?

What would you advise me to name in this case ?
I really do blockage today !

Hi @Stefan_fr, thanks for your update. I am not quite sure I understand the question, but you can give your elements an ID or a Class. Both are optional. You can refer to elements in javascript by either ID or Class name.

If you are using js to modify some element by class name, the js will affect all elements having the same class name. If you have an element with multiple nested classes assigned, then I would use the ID to refer to your elements instead of by the class names.

Each form has it’s own settings. In form settings (on the settings tab), you can give each form a different name.

Does this answer your question? Cheers, Dave

Sorry Dave I’m out of order it’s not possible.

Inside my form I have several fields. These fields have the same visual style but sometimes I wan’t to have à fied shorter in horizontal size (50% or 35% instead of 100% of width) close to each field. I have mocked-up an help icon and an alerting icon. Alerting icon is for required field and help icon is for this field help. This icon is displayed only if an help is defined. If it doesn’t exist then the icon is not displayed. That’s why I thought I had to give to each icon an ID in order to manage the displays individually.
As you can see on the screen I sent my field style are same but size etc… can differ.

I don’t know if I have to class like this :
field_name porteur
entry_field porteur
help_icon porteur
alerting_icon porteur

If I do this, porteur’s class attribute wins and I don’t understand why
That’s why I wondered if I had to ID all the field

I don’t know if it’s very clear !

I must be tired and nothing works today in my design approach.

my Code Postal field must have a smaller width than the other for example

Hi @Stefan_fr, thanks for the update. So may I ask, are you trying to hide or show the icons based on the value of the field input?

Could you please share the read-only link to the site? Share a read-only link | Webflow University

Also, can you share the javascript code you are using to hide or show the icons based on field value?

When you are referring to a element by class in js code, you refer to the base class, like

.field_name
.entry_field
.help_icon
.alerting_icon

You would not refer to the porteur nested class. I would give each field it’s own class name, or ID and refer to those unique classes or ID when setting the visibility for the icons. I can tell more, if I know how you are trying to change this in the code.

Cheers,
Dave

@Stefan_fr

You seem to have a couple issues going on… I’m trying to figure what they are
and if I can help.

Are you talking about the traditional html “name” and “size” parameters ?

ie: <input type="text" name="lastName" value="Bill Gates" size=20 maxlenth=30>

or are you talking about a (CSS) “class name”… and element width - as they are used / incorporated in html.

If class name… using your “Postal Code” as an example:

Select (click on) the text entry element for Postal Code,

Then in the “Style Tab”
create (style it) a class name for it.

Then adjust the width the element to whatever value you need.

Say for example: 200px. In this case… only that particular field will have a pre-defined width of 200px.

Everything else will have a default width.

If you had another text entry field that had the same width… for example “Apartment Number”…
you might create a “generic class” (class name = “short-field” and assign the same class to each text entry field.

See video:
http://quick.as/wkA6T3e3q

1 Like

Good Morning from France,

Thank you very much Dave and Revolution for your help.
I went to have a watch on your video.

I did understand what you showed.

As you could see, I had several field that look like.
Look at the screen extract :
you can see to input fields type de porteur and Nom. As you can see the structure of a field is :

  • its label
  • the input field
  • an err message under the input field which will be shown when the form is submited and if it was missed.
  • an err icon which will be shown at the same time of the err message
  • an help icon which will be shown if it’s configured else where

what would be your advices to name all these objects for these fields ? Do I have to name individually the err icons and err message for each field and help icons ?

Thank you very much for your help

Stéfan

PS : here the share link : https://preview.webflow.com/preview/e-synergie?preview=3fb3acec0c50a8d8c230485481ae064a

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.