Skip to content

Code style standard for breaking long lines #8

@piercemcgeough

Description

@piercemcgeough

Hi Ann,

Hope you are well. I remember your talk at DotYork 2015 and enjoyed it.

I was wondering if you have come across a standard for splitting really long lines on html. We don't want our lines going too long across the screen unless perhaps it is text.

A standard spot to get away with it would be as follows:

<td>
	<a href="#somethingSomethng" class="cssClass secondCssClass" id="pleaseDontJudgeMeImAnExample">
		Take a natural break here and everything is still readable.
	</a>
</td>

But what if that link had data or vue attributes against it and made it very long?
Would you take a new line and tab for attributes, or space to under the first attribute.
Would the first closing right bracket be after the last attribute or on the next line?

<a href="#somethingSomethng" 
	class="cssClass secondCssClass" 
	id="pleaseDontJudgeMeImAnExample"
	v-model="testLink"
	data-id="123"
	data-name="linkForTesting">
	Take a natural break here and everything is still readable.
</a>
<a href="#somethingSomethng" 
   class="cssClass secondCssClass" 
   id="pleaseDontJudgeMeImAnExample"
   v-model="testLink"
   data-id="123"
   data-name="linkForTesting"
>
	Take a natural break here and everything is still readable.
</a>

Where would the link text come and closing tag come?

Here is one example of what has been used at work and I am trying to find a better way to clean it up.

<tr v-for="item in items"
    style="cursor: pointer">
    <td><a href="{{ callFunction(item) }}"
           class="btn-block"
        >{{ item.address }}</a></td>
    <td v-show="0 == landlord_id"><a href="{{ callFunction(item) }}"
                                     class="btn-block"
        >{{ item.name }}</a></td>
    ...
    ...
</tr>

I was wondering if you came across anything as many I have found don't deal with line breaks on the tags.

Best,
Pierce :)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions