Sorts CSS declarations.
pip install sort_css_declarationsConsult sort-css-declarations --help for the full set of options.
sort-css-declarations takes filenames as positional arguments.
Common options:
-h, --helpshow this help message and exit--by_html BY_HTMLOrder CSS declarations by HTML's order.-i, --in_placeEdits file in-place.
Result directly goes to stdout.
sort-css-declarations test_dir/test_css.cssFile will be edited in-place with the result.
sort-css-declarations -i test_dir/test_css.cssRedirect the stdout to a new file.
sort-css-declarations test_dir/test_css.css > test_dir/cleaned_css.cssResult reordered by html directly goes to stdout.
sort-css-declarations test_dir/test_css.cssReorder by html and redirect the stdout to a new file.
sort-css-declarations test_dir/test_css.css --by_html test_dir/test_html.html > test_dir/cleaned_css.css- General tags, like
<body>, <div>, <h1>, etc...goes to the top of the file ordered alphabetically. - Followed by the general tags, come the id or class specified declarations.
CSS before-after diff
1c1,6
- /*FORM GENERAL*/
---
+
+ body {
+ margin: 0;
+ padding: 0;
+ }
+
3,9c8,9
- .form-container,
- .form-wrapper,
- .form-wrapper form,
- .form-wrapper form div {
- display: grid;
- align-items: center;
- justify-content: center;
---
+ h1 {
+ color: red;
12,17c12,16
- .form-wrapper {
- width: fit-content;
- padding: 1rem;
- border: 1px solid lightgrey;
- border-radius: 5px;
- background: linear-gradient(109.6deg, rgb(248,248,248) 30.1%, rgb(144,144,144) 100.2%);
---
+ /* ====================== */
+ .form-container {
+ align-items: center;
+ display: grid;
+ justify-content: center;
20,21c19,28
- .form-wrapper form {
- gap: 1rem;
---
+ /* ====================== */
+ .form-wrapper {
+ align-items: center;
+ background: linear-gradient(109.6deg, rgb(248, 248, 248) 30.1%, rgb(144, 144, 144) 100.2%);
+ border-radius: 5px;
+ border: 1px solid lightgrey;
+ display: grid;
+ justify-content: center;
+ padding: 1rem;
+ width: fit-content;
24,26c31,36
- body {
- margin: 0;
- padding: 0;
---
+ /* ====================== */
+ .form-wrapper form {
+ align-items: center;
+ display: grid;
+ gap: 1rem;
+ justify-content: center;
28a39
+ /* ====================== */
30c41,44
- gap: 0.5rem;
---
+ align-items: center;
+ display: grid;
+ gap: 0.5rem;
+ justify-content: center;
34,35c48,49
- text-align: center;
- font-weight: 450;
---
+ font-weight: 450;
+ text-align: center;
38,39c52,53
- .form-wrapper form label+input {
- font-size: 16px;
---
+ .form-wrapper form label + input {
+ font-size: 16px;
41,42d54
- /* ====================== */
-
44,46d55
- h1 {
- color: red;
- }Separates block of grouped declarations and reorders them in the same order as in the html, increasing by the specification.
HTML sample
<div class="form-container">
<div class="form-wrapper">
<form action="login.php" method="post">
<div class="username-input">
<label for="username"><u>Username</u></label>
<input id="username" name="username" type="text"
placeholder="Username.." value="username"/>
</div>
<div class="password-input">
<label for="password"><u>Password</u></label>
<input id="password" name="password" type="password" placeholder="Password.."/>
</div>
<div class="submit-btn-wrapper">
<button class="button" id="submit-btn" name="submit" type="submit">Log in</button>
</div>
</form>
</div>
</div> CSS before-after diff
1c1
- /*FORM GENERAL*/
---
+
3,9c3,6
- .form-container,
- .form-wrapper,
- .form-wrapper form,
- .form-wrapper form div {
- display: grid;
- align-items: center;
- justify-content: center;
---
+ .form-container {
+ align-items: center;
+ display: grid;
+ justify-content: center;
11a9
+ /* ====================== */
13,17c11,18
- width: fit-content;
- padding: 1rem;
- border: 1px solid lightgrey;
- border-radius: 5px;
- background: linear-gradient(109.6deg, rgb(248,248,248) 30.1%, rgb(144,144,144) 100.2%);
---
+ align-items: center;
+ background: linear-gradient(109.6deg, rgb(248, 248, 248) 30.1%, rgb(144, 144, 144) 100.2%);
+ border-radius: 5px;
+ border: 1px solid lightgrey;
+ display: grid;
+ justify-content: center;
+ padding: 1rem;
+ width: fit-content;
19a21
+ /* ====================== */
21,26c23,26
- gap: 1rem;
- }
-
- body {
- margin: 0;
- padding: 0;
---
+ align-items: center;
+ display: grid;
+ gap: 1rem;
+ justify-content: center;
28a29
+ /* ====================== */
30c31,34
- gap: 0.5rem;
---
+ align-items: center;
+ display: grid;
+ gap: 0.5rem;
+ justify-content: center;
34,35c38,39
- text-align: center;
- font-weight: 450;
---
+ font-weight: 450;
+ text-align: center;
38,39c42,43
- .form-wrapper form label+input {
- font-size: 16px;
---
+ .form-wrapper form label + input {
+ font-size: 16px;
41d44
- /* ====================== */
43,46d45
-
- h1 {
- color: red;
- }