Skip to content

Latest commit

 

History

History
105 lines (87 loc) · 5.97 KB

checklist.md

File metadata and controls

105 lines (87 loc) · 5.97 KB
Raw

  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. Explanation: The point is not in the names of the classes, the point is: when there are several similar elements, ex., 2 inputs, for one we can give a class input, for example, and for the second - input input--small. We write all the styles for .input, but for .input-small we write only those styles that differ in design, and we need this second input to look a little different. Element with class .input without extra classes should also look like a full-fledged styled element.

    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. But do not break the line if it cannot be broken (ex., long links).

  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. [CODE STYLE] - You can use same font-family for both @font-faces but different font-weight. Then changing only the font-weight on your elements will do the job.

    BAD example image
    GOOD example image

  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.

  11. [DESIGN] - After you added custom focus styles (border and shadow), and there is still default outline - you should remove it.

  12. [DESIGN] - Placeholder shoudn't change style on focus