Freecodecamp: Panduan Membuat Gaya CSS freeCodeCamp

Dibuat pada 8 Jan 2018 · 47Komentar · Sumber: freeCodeCamp/freeCodeCamp

Saya ingin mengusulkan panduan Gaya CSS freeCodeCamp untuk meningkatkan pemeliharaan basis kode secara keseluruhan. Karena FreeCodeCamp memiliki banyak kontributor, dan setiap orang menulis CSS dengan cara yang berbeda. Dan sulit untuk melacak berbagai cara penulisan CSS.

Rekomendasi Awal:

Komentar

Tambahkan komentar, ketika Anda memulai file LESS baru, sehingga para pengembang tahu apa yang mereka kerjakan, juga menambahkan komentar ketika Anda memulai bagian baru yang terkait dengan blok kode, itu membantu dengan keterbacaan, lihat CONTOH di bawah (saya telah menemukan gaya komentar ini di seluruh basis kode, oleh karena itu saya ingin terus menulisnya, alih-alih mengusulkan gaya baru)
Contoh 1 - saat memulai file LESS baru:

//
// Navigation
// --------------------

Contoh 2 - saat menambahkan bagian, terkait dengan navigasi

//
// Navigation - Mobile Styles
// ------------------------------

Jarak

Tambahkan spasi setelah properti, akan lebih mudah untuk membaca basis kode seperti itu, dan memelihara. Lihat CONTOH di bawah ini.
Contoh 1 - Cara yang Benar

p {
  color: #fff;
}

Contoh 2 - Cara yang Salah
Apa yang salah?
Tidak ada spasi setelah titik dua

p {
  color:#fff;
}

Warna

Lebih suka huruf kecil, bukan huruf besar. Sekarang di seluruh CSS, kontributor mencampurkan keduanya. Huruf kecil lebih cepat untuk menulis, lebih mudah dibaca. Sekali lagi meningkatkan pemeliharaan secara keseluruhan, jika CSS memiliki konvensi yang konsisten. Juga jika memungkinkan persingkat nilai hex. Lihat CONTOH di bawah ini.
Contoh 1 - Cara yang Benar

p {
  color: #fff;
}

Contoh 2 - Cara yang Salah
Apa yang salah?
nilai hex huruf besar, tidak dipersingkat

p {
  color: #FFFFFF;
}

Warna RGBA atau RGB

Tambahkan spasi setelah nilai, meningkatkan keterbacaan. Lihat CONTOH di bawah ini:
CONTOH 1 - Cara yang Benar

p {
  color: rgba(123, 123, 0, 0.1);
}

CONTOH 2 - Cara yang Salah
Apa yang salah?
Tidak ada spasi setelah nilai

p {
  color: rgba(123,123,0,0.1);
}

Tidak ada unit saat mendeklarasikan 0

Dalam properti seperti box-shadow, jika Anda menetapkan nilai 0, Anda harus menghindari penambahan unit. Lihat CONTOH di bawah.
CONTOH 1 - Cara yang Benar

p {
  box-shadow: 1px 1px 0 rgb(0, 0, 0);
}

CONTOH 2 - Cara yang Salah
Apa yang salah?
Unit setelah 0

p {
  box-shadow: 1px 1px 0px rgb(0, 0, 0);
}

Hindari bilangan mengambang

Jika memungkinkan, Anda harus menghindari angka mengambang di CSS untuk ukuran yang berbeda, karena ini dapat merender sedikit berbeda. Lihat link terlampir di bawah ini.

Pembulatan Browser

help wanted docs on the roadmap

Sumber

tomasvn

👍1

Komentar yang paling membantu

@raisedadead @tomasvn Menurut saya, proses membuat panduan gaya CSS dan berpegang teguh padanya dalam jangka panjang tidak akan memberikan hasil yang bermanfaat. React, Yarn, Babel dan banyak proyek sumber terbuka lainnya menggunakan Prettier dan ekstensi serupa lainnya untuk pemformatan Gaya CSS mereka.

Alih-alih membuat panduan gaya. Kami harus memberi tahu kontributor kami untuk Menginstal Prettier Di editor IDE / Kode mereka dan kami akan segera melakukannya.
@raisedadead Pikiran tentang ini?

vkWeb pada 8 Jan 2018

👍6

Semua 47 komentar

@raisedadead Bagaimana menurut Anda?

tomasvn pada 8 Jan 2018

Terima kasih, apakah Anda mengetahui cara apa pun dapat menyaring ini? Menggunakan linter?

raisedadead pada 8 Jan 2018

vkWeb pada 8 Jan 2018

👍6

Terima kasih, apakah Anda mengetahui cara apa pun dapat menyaring ini? Menggunakan linter?

Prettier bekerja dengan baik;). Ini memperingatkan Anda ketika Anda melanggar aturan gaya CSS apa pun.

vkWeb pada 8 Jan 2018

Alih-alih membuat panduan gaya. Kami harus memberi tahu kontributor kami untuk Menginstal Lebih Cantik di editor IDE / Kode mereka dan kami akan memulai.

Bersembunyi dari masalah tidak pernah membantu siapa pun ... 😅!

Saya sangat mendukung menghindari pemformatan dan menggunakan linter sebagai gantinya. Mengotomatiskan hal-hal terdengar keren dan mudah, tetapi menghilangkan inti dari penulisan kode standar.

IMHO, kami sebagai komunitas di sekitar pembelajaran tidak boleh menghindar dengan memperbaiki masalah dalam gaya kode yang ditunjukkan oleh linter.

Juga harap dicatat bahwa Prettier adalah Pemformat Kode _Opinionated_

raisedadead pada 8 Jan 2018

👍1

Menurut saya, proses membuat panduan gaya CSS dan mematuhinya dalam jangka panjang tidak akan memberikan hasil yang bermanfaat.

Saya pikir, ini adalah argumen yang salah (jangan ragu untuk membuktikan bahwa saya salah jika Anda memiliki statistik).

Jika Anda memeriksa panduan gaya JS Airbnb, JS Standard, dll. Mereka, meminta bantuan untuk menulis kode standar dan digunakan oleh ribuan perusahaan, dan pengembang setiap hari.

raisedadead pada 8 Jan 2018

@raisedadead Kami tidak bersembunyi dari masalah ...! Kita dapat menggunakan linters tetapi tugas yang sama dapat dilakukan dengan satu key binding dengan Prettier jadi mengapa kita mencoba untuk mengambil waktu lama?

vkWeb pada 8 Jan 2018

Saya pikir, ini adalah argumen yang salah (jangan ragu untuk membuktikan bahwa saya salah jika Anda memiliki statistik).
Jika Anda memeriksa panduan gaya JS Airbnb, JS Standard, dll. Mereka, meminta bantuan untuk menulis kode standar dan digunakan oleh ribuan perusahaan, dan pengembang setiap hari.

Saya sangat setuju dengan Anda tentang ini! Panduan gaya JS mereka sangat membantu.

vkWeb pada 8 Jan 2018

Kami tidak bersembunyi dari masalah ...! Kita dapat menggunakan linters tetapi tugas yang sama dapat dilakukan dengan satu key binding dengan Prettier jadi mengapa kita mencoba untuk mengambil waktu lama?

Karena, kami ingin menulis kode standar? Kontributor bebas menggunakan alat apa pun yang mereka suka, tetapi itu tidak berarti kita tidak membutuhkan panduan.

raisedadead pada 8 Jan 2018

Bagaimanapun, mari simpan utas ini untuk umpan balik konstruktif tentang panduan, sebagai gantinya kita selalu dapat berdiskusi dalam obrolan.

@tomasvn RFC terlihat menarik, dan karena Anda tertarik dengan umpan baliknya, menurut Anda apakah mungkin bagi Anda untuk mencari beberapa panduan gaya dan perkakas mapan yang dapat kami gunakan untuk mengambil inspirasi.

raisedadead pada 8 Jan 2018

Karena, kami ingin menulis kode standar? Kontributor bebas menggunakan alat apa pun yang mereka suka, tetapi itu tidak berarti kita tidak membutuhkan panduan.

Aku juga bersamamu dalam hal ini. Oke, mari kita gunakan panduan gaya dan kita bisa menggunakan stylelint sebagai linter kita.

vkWeb pada 8 Jan 2018

@raisedadead stylelint tampaknya baik-baik saja 👍 Karena ini akan memperingatkan kontributor tentang inkosistensi di dokumennya

tomasvn pada 8 Jan 2018

👍2

@tomasvn Kami baru saja meluncurkan kurikulum dan platform pembelajaran baru kami. Apakah Anda masih tertarik membantu?

Semua CSS kami membutuhkan refactor yang baik, dan ini akan menjadi kesempatan yang baik untuk tidak hanya membuat panduan gaya tetapi untuk berbalik dan segera menerapkannya ke proyek, dan memastikan semua repo kami sesuai dengannya.

QuincyLarson pada 3 Jun 2018

@QuincyLarson Tentu, saya dapat meluangkan waktu saya dan membantu Anda refactoring CSS, karena freecodecamp adalah basis kode yang cukup besar, cukup tunjukkan di mana saya harus mulai

tomasvn pada 3 Jun 2018

@tomasvn Itu akan luar biasa!

freeCodeCamp tidak memiliki banyak CSS. CSS freeCodeCamp terletak di "main.less". Dan kami menggunakan Bootstrap 3.0.

Kami akhirnya dapat pindah ke Bootstrap 4.0 atau hanya menulis ulang CSS kami untuk menggunakan Flexbox. Tetapi untuk saat ini, kami menggunakan React Bootstrap pada beberapa aplikasi kami, dan itu saat ini dikunci ke Bootstrap 3.0. Jadi saya sarankan untuk masuk dan membersihkan CSS khusus yang ada di main.less dan membuatnya kurang mubazir dan lebih diatur secara logis.

QuincyLarson pada 3 Jun 2018

@QuincyLarson mendapatkannya, dan main.less terletak di client / less / main.less, apakah ini file yang benar?

tomasvn pada 3 Jun 2018

@tomasvn Terima kasih atas kesabaran Anda - Saya baru saja melihat ini. Ya - client / less / main.less seharusnya file yang benar.

QuincyLarson pada 16 Jun 2018

@tomasvn Perlu bantuan dengan ini? Saya akan dengan senang hati berkontribusi

borisyordanov pada 4 Agu 2018

@tomasvn, apakah Anda sudah punya kesempatan untuk mulai mengerjakan ini? Jika tidak, @borisyordanov Ya - kami akan menyambut kontribusi Anda dalam hal ini.

QuincyLarson pada 18 Agu 2018

@borisyordanov maaf atas keterlambatan, silakan saja saya punya beberapa masalah menjalankan dev env di windows, jadi Anda dapat memulai, ketika saya memperbaiki barang-barang saya, saya dapat membantu Anda merefaktornya

tomasvn pada 19 Agu 2018

@tomasvn Saya mengirimi Anda email, mari kita bertemu di obrolan dan merencanakan ini. Jika Anda mengalami masalah dalam menjalankan proyek, saya sarankan untuk membaca panduan ini jika Anda belum melakukannya atau meminta bantuan tentang Gitter

borisyordanov pada 27 Agu 2018

Jika masih perlu saya dapat membantu dengan ini

Jgriebel1990 pada 31 Okt 2018

@ Jgriebel1990 saya tidak bisa menghubungi tomasvn jadi tidak ada kemajuan sejauh yang saya tahu. Jangan ragu untuk mengambil alih

borisyordanov pada 31 Okt 2018

@ jgriebel1990 merasa bebas untuk mengambil alih, saya tidak bisa mendapatkan salinan saya bekerja di mesin windows, yang bisa saya lakukan hanyalah meninjau kode setelah Anda selesai

tomasvn pada 31 Okt 2018

@tomasvn sepertinya @ Jgriebel1990 dan @borisyordanov belum sempat menangani ini - apakah Anda masih tertarik untuk membantu?

QuincyLarson pada 2 Jan 2019

@QuincyLarson Saya akan mencoba membuatnya berfungsi di windows, saya masih memiliki masalah dalam menjalankannya, Jika saya tidak dapat mengatur lingkungan saya, tutup saja utasnya.

tomasvn pada 15 Jan 2019

@tomasvn Jangan khawatir - semoga berhasil menjalankannya secara lokal?

QuincyLarson pada 24 Jan 2019

Terkait: https://github.com/freeCodeCamp/freeCodeCamp/issues/35081

raisedadead pada 7 Feb 2019

@QuincyLarson Tidak berhasil, menjalankannya secara lokal

tomasvn pada 9 Feb 2019

@tomasvn masalah apa yang Anda temui saat menyiapkan secara lokal.

Nirajn2311 pada 9 Feb 2019

@tomasvn Silakan baca ini - https://github.com/freeCodeCamp/freeCodeCamp/blob/master/docs/how-to-setup-freecodecamp-locally.md

borisyordanov pada 11 Feb 2019

@raisedadead Dengan pembaruan pada https://github.com/freeCodeCamp/design-style-guide , apakah masalah ini diperlukan?

RandellDawson pada 3 Mei 2019

Ini lebih pada peta jalan. Akhirnya itu akan menjadi sumber daya utama untuk komponen UI kami.

raisedadead pada 3 Mei 2019

Gaya Perbatasan CSS
Properti gaya batas menentukan jenis batas yang akan ditampilkan.

Nilai-nilai berikut diperbolehkan:

dotted - Mendefinisikan perbatasan bertitik
putus-putus - Mendefinisikan batas putus-putus
solid - Mendefinisikan batas padat
double - Mendefinisikan batas ganda
groove - Mendefinisikan batas beralur 3D. Efeknya tergantung pada nilai warna batas
ridge - Mendefinisikan batas bergerigi 3D. Efeknya tergantung pada nilai warna batas
inset - Mendefinisikan batas inset 3D. Efeknya tergantung pada nilai warna batas
awal - Mendefinisikan batas awal 3D. Efeknya tergantung pada nilai warna batas
none - Mendefinisikan tanpa batas
tersembunyi - Mendefinisikan batas tersembunyi
Properti gaya batas dapat memiliki satu sampai empat nilai (untuk batas atas, batas kanan, batas bawah, dan batas kiri).

CONTOH-
p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;}

rohaanmd pada 2 Okt 2019

Hei! Apa kemajuannya? Saya siap membantu!

ManasMahanand pada 4 Okt 2020

@ManasMahanand , terima kasih atas minat Anda.
Akan sangat bagus jika Anda bisa melihat ke linter css yang tersedia, membandingkannya dan melihat apakah ada yang lebih baik dari stylelint.
Kemudian, tambahkan linter ke repo kami dan ubah file CSS untuk memastikan repo bebas dari kesalahan linting.

ahmadabdolsaheb pada 5 Okt 2020

@madabdolsaheb Akan melakukannya!

ManasMahanand pada 6 Okt 2020

👍1

@ahmadabdolsaheb Tunggu maksudnya menambah repo?

Apakah Anda ingin saya memasang linter sebagai dependensi, seperti eslint?

Atau adakah cara untuk menginstal pengujian di github itu sendiri, sehingga tidak memungkinkan penggabungan kecuali panduan gaya diikuti?

ManasMahanand pada 7 Okt 2020

Oke, sepertinya stylelint adalah pilihan yang bagus. Saya sedang menginstal itu.

Untuk bereksperimen, saya akan menetapkan aturan seperti yang disarankan oleh OP. Saya kemudian akan menghapus semua aturan dan membuka pr. Kami kemudian dapat mendiskusikan dan menetapkan aturan

ManasMahanand pada 7 Okt 2020

https://stylelint.io/user-guide/rules/about

Anda dapat melihat tautan ini untuk melihat jenis aturan yang dapat disetel

ManasMahanand pada 7 Okt 2020

Saat ini sudah ada perintah lint: css yang menggunakan lebih cantik. Kita bisa mengubahnya menggunakan stylelint.

Bagaimanapun caranya, saya telah menginstalnya, dan berhasil mendeteksi kesalahan berdasarkan aturan yang ditetapkan. Haruskah saya membuka PR?

ManasMahanand pada 7 Okt 2020

Tidak perlu menghapus yang lebih cantik, lebih cantik memiliki konfigurasi untuk aturan stylelint yang dapat Anda gunakan untuk memperluas file konfigurasi yang lebih cantik

tomasvn pada 7 Okt 2020

Hebat. Akan mengerjakannya besok.

ManasMahanand pada 7 Okt 2020

Saya tidak menemukan konfigurasi yang lebih cantik untuk aturan stylelint (atau cara melakukannya), tetapi saat ini saya telah menginstal paket lain stylelint-config-prettier yang akan memeriksa konflik dan akan mematikan semua aturan yang menimbulkan konflik.

Apa yang saya pikirkan ada di lint: perintah

ManasMahanand pada 8 Okt 2020

(Opini) Saya rasa kita bisa menulis semua aturan stylelint kustom berdasarkan apa yang masuk akal untuk fcc, dan bahkan menghapus lebih cantik. Ini hanya opini, terserah kalian yang memutuskan.

ManasMahanand pada 8 Okt 2020

Terima kasih @ManasMahanand atas kemajuan Anda. Saya menandai @ojeytonwilliams untuk opini kedua.

ahmadabdolsaheb pada 15 Okt 2020

Saya pikir lebih cantik melakukan pekerjaan yang baik dengan pemformatan, jadi saya lebih suka menyimpannya. Jika kami menggunakan https://github.com/prettier/stylelint-prettier maka lebih cantik digunakan sebagai plugin stylelint dan kami mendapatkan yang terbaik dari kedua dunia.

Ini mencerminkan pendekatan yang sudah kita gunakan untuk linting JavaScript.