-
[CODE STYLE] - Keep your code line length below 80. It’s not only historical tradition, but also allows your code to fit into one standard screen without horizontal scroll. But do not break the line if it cannot be broken (ex., long links).
-
[CODE STYLE] - Remember about correct indentation between parent and child elements. Each level of nesting, including text, contained inside the element, requires 2-space offset.
-
[CODE STYLE] - If the HTML-element has long attribute values or number of attributes is more than 2 - start each one, including the first, on the new line with 2-space indentation related to tag. Tag’s closing bracket should be on the same level as opening one.
-
[CODE STYLE] - Use camelCase for values of name attribute - they should be valid as JavaScript object keys. It should not contain spaces, “-” or other special characters.
-
[CODE STYLE] - No need to provide empty value="" attribute for inputs. Add it only if a certain value is specified from the start, or use placeholders.
-
[CODE STYLE] - Don't style tags, use class selector instead
-
[FUNCTIONAL] - You need to use a label tag for each input, so that every input could be activated by clicking on the corresponding label.
-
[FUNCTIONAL] - Check the textarea behaviour - when you click on the textarea, the cursor should appear in the beginning of the input.
ATTENTION!!! the closing tag should start on the level as opening tag (this is required to pass the html linter)
Example:
<textarea
class="textarea"
></textarea>
-
[TESTS] - Remember, you need to add a certain distance BETWEEN inputs and BETWEEN blocks with inputs. It means that, for example, the last input in the group of inputs should not have a set bottom margin.
-
[TESTS] - Remember, any other styles besides margins, should be browser default.