Skip to content

Latest commit

 

History

History
92 lines (74 loc) · 4.77 KB

checklist.md

File metadata and controls

92 lines (74 loc) · 4.77 KB

  1. [STYLES] - Get used to style all elements using classes. And don't increase selectors specificity unless completely necessary

    HTML example css-classes-html-example-1
    BAD CSS examples css-classes-bad-example-1 css-classes-bad-example-2 css-classes-bad-example-3
    GOOD CSS example css-classes-good-example-1

  2. [STYLES] - if you have two or more similar elements with portions of similar styles with different values - use one of the elements as the basic case, and override necessary styles for other cases.

    BAD example css-variations-bad-example-html-1 css-variations-bad-example-css-1
    GOOD example css-variations-good-example-html-1 css-variations-good-example-css-1

  3. [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.

  4. [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.

    BAD examples html-indentations-bad-example-1
    GOOD example html-indentations-good-example-1

  5. [CODE STYLE] - If the HTML-element has long attribute values or number of attributes is more than 3 - 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.

    BAD examples html-attributes-bad-example-1 html-attributes-bad-example-2 html-attributes-bad-example-3 html-attributes-bad-example-4
    GOOD example html-attributes-good-example-1

  6. [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.

    BAD example html-name-attribute-bad-example-1
    GOOD example html-name-attribute-good-example-1

  7. [FUNCTIONALITY] - You need to use a label tag for each input, so that every input could be activated by clicking on the corresponding label.

  8. [TESTS] - Remember to style input placeholders correctly

  9. [TESTS] - Remember that the search-bar should have width: 100% on any screen.

  10. [TESTS] - Remember, each search bar should be located in separate form element.