Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Code style standard for breaking long lines #8

Open
piercemcgeough opened this issue Jun 19, 2017 · 0 comments
Open

Code style standard for breaking long lines #8

piercemcgeough opened this issue Jun 19, 2017 · 0 comments

Comments

@piercemcgeough
Copy link

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 :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant