doc/dev/coding_standards_css.rst
author Laurent Peuch <cortex@worlddomination.be>
Thu, 26 Sep 2019 06:27:53 +0200
changeset 12773 3a38f779bed5
parent 12370 b3084ae2e718
permissions -rw-r--r--
[debug-toolbar/display_source_code/security] add security mechanism to only read whitelisted files Closes #17256791
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
6049
f0ae98fa85a1 [doc] started js/css coding standards
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
     1
CSS Coding Standards
f0ae98fa85a1 [doc] started js/css coding standards
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
     2
--------------------
f0ae98fa85a1 [doc] started js/css coding standards
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
     3
f0ae98fa85a1 [doc] started js/css coding standards
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
     4
(Draft, to be continued)
f0ae98fa85a1 [doc] started js/css coding standards
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
     5
f0ae98fa85a1 [doc] started js/css coding standards
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
     6
:Naming: camelCase
f0ae98fa85a1 [doc] started js/css coding standards
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
     7
f0ae98fa85a1 [doc] started js/css coding standards
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
     8
Indentation rules
f0ae98fa85a1 [doc] started js/css coding standards
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
     9
~~~~~~~~~~~~~~~~~
12370
b3084ae2e718 [doc] translate french to english
Laurent Peuch <cortex@worlddomination.be>
parents: 10492
diff changeset
    10
b3084ae2e718 [doc] translate french to english
Laurent Peuch <cortex@worlddomination.be>
parents: 10492
diff changeset
    11
- 2 spaces before properties
6049
f0ae98fa85a1 [doc] started js/css coding standards
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    12
12370
b3084ae2e718 [doc] translate french to english
Laurent Peuch <cortex@worlddomination.be>
parents: 10492
diff changeset
    13
- no space before ":", one space after
6049
f0ae98fa85a1 [doc] started js/css coding standards
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    14
12370
b3084ae2e718 [doc] translate french to english
Laurent Peuch <cortex@worlddomination.be>
parents: 10492
diff changeset
    15
- only one space between values of the same property
6049
f0ae98fa85a1 [doc] started js/css coding standards
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    16
f0ae98fa85a1 [doc] started js/css coding standards
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    17
f0ae98fa85a1 [doc] started js/css coding standards
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    18
Documentation
f0ae98fa85a1 [doc] started js/css coding standards
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    19
~~~~~~~~~~~~~
f0ae98fa85a1 [doc] started js/css coding standards
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    20
Please keep rules semantically linked grouped together, with a comment about
f0ae98fa85a1 [doc] started js/css coding standards
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    21
what they are for.
f0ae98fa85a1 [doc] started js/css coding standards
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    22
f0ae98fa85a1 [doc] started js/css coding standards
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    23
Recommendation
f0ae98fa85a1 [doc] started js/css coding standards
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    24
~~~~~~~~~~~~~~
f0ae98fa85a1 [doc] started js/css coding standards
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    25
- Try to use existing classes rather than introduce new ones
f0ae98fa85a1 [doc] started js/css coding standards
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    26
f0ae98fa85a1 [doc] started js/css coding standards
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    27
- Keep things as simple as possible while in the framework
f0ae98fa85a1 [doc] started js/css coding standards
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    28
f0ae98fa85a1 [doc] started js/css coding standards
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    29
- Think about later customization by application
f0ae98fa85a1 [doc] started js/css coding standards
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    30
f0ae98fa85a1 [doc] started js/css coding standards
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    31
- Avoid introducing a new CSS file for a few lines of CSS, at least while the
f0ae98fa85a1 [doc] started js/css coding standards
Sylvain Thénault <sylvain.thenault@logilab.fr>
parents:
diff changeset
    32
  framework doesn't include packing functionalities