Skip to content

Instantly share code, notes, and snippets.

@handrihmw

handrihmw/css-style-guide.md

Last active October 7, 2020 09:41
Show Gist options
  • Save handrihmw/13303f69f771179ae94c9b87f5011961 to your computer and use it in GitHub Desktop.
Save handrihmw/13303f69f771179ae94c9b87f5011961 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
css-style-guide.md

Table Konten :

  1. Files
    • a. Attribute Order
    • b. Declaration order
    • c. Shorthand Notaion
    • d. Class Names
    • e. Selectors
  2. Skeleton
  3. Comment
    • a. Section Comments
    • b. Inline Comments
  4. Formatting
    • a. Line Identation
    • b. Blank Lines
    • c. Trailing whitespace
    • d. Declaration Order
    • e. Property name stops
    • f. Quotation
    • g. Property Units
    • h. Background Images
  5. SASS
    • a. Variable Names
    • b. Variable Prefix
    • c. Mixin Names
    • d. Mixin Arguments
    • e. Nesting Levels
    • f. Order Rule's Content
    • g. List Vendor/Global Dependancies First, Then Author Dependancies, Then Patterns, Then Parts
  6. Best Practices
    • a. Selector Specificity
    • b. CSS Shorthand
    • c. CSS Hacks
    • d. CSS3 Properties
    • e. SASS Variables and Mixins
    • f. Mobile

1. Files

  • Penulisan nama file harus huruf kecil semua ( style.css, _main.scss )
  • Kata-kata dipisahkan dengan tanda hubung ( ini-styles.css )
  • Tambahkan minified jika menggunakan file yang di minimalkan ( style.min.css )

a. Attribute Order

Atribut HTML Harus ada dalam urutan khusus ini untuk memudahkan pembacaan kode.

  • class
  • id, name
  • data-*
  • src, for, type, href, value
  • title, alt
  • role, aria-*

b. Declaration order

Deklarasi properti terkait harus dikelompokkan bersama mengikuti urutan:

  • Positioning
  • Box model
  • Typographic
  • Visual
  • Misc
.declaration-order {
	/* Positioning */ 
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;

	/* Box-model */
	display: block;
	float: right;
	width: 100px;
	height: 100px;

	/* Typography */ 
	font: normal 13px "Helvetica Neue", sans-serif;
	line-height: 1.5;
	color: #333;
	text-align: center;

	/* Visual */
	background-color: #f5f5f5;
	border: 1px solid #e5e5e5;
	border-radius: 3px;

	/* Misc */
	opacity: 1;
}

c. Shorthand Notaion

Batasi penggunaan deklarasi singkat ke instance di mana Anda Harus secara eksplisit menyetel semua nilai yang tersedia. Properti singkatan yang sering digunakan secara berlebihan meliputi:

  • padding
  • margin
  • font
  • background
  • border
  • border-radius
🌚 Bad
.element {
  margin: 0 0 10px;
  background: red;
  background: url("image.jpg");
  border-radius: 3px 3px 0 0;
}
🌝 Good
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("image.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

d. Class Names

  • Buat kelas menggunakan huruf kecil dan gunakan tanda hubung (bukan garis bawah atau camelCase).
  • Tanda hubung berfungsi sebagai jeda alami di kelas terkait (misalnya, .btn dan .btn-danger).
  • Hindari notasi steno yang berlebihan dan sembarangan. .btn berguna untuk tombol, tetapi .b tidak berarti apa-apa.
  • Buat nama kelas pendek dan sesingkat mungkin.
  • Gunakan nama yang bermakna; gunakan nama struktural atau tujuan presentasi.
  • Awalan kelas berdasarkan parent class terdekat atau base class.
  • Gunakan kelas .js- * untuk menunjukkan behavior.
🌚 Bad
.b { ... }
.red { ... }
.header { ... }
🌝 Good
.tweet { ... }
.important { ... }
.tweet-header { ... }

e. Selectors

  • Gunakan kelas di atas tag elemen generik untuk kinerja rendering yang optimal.
  • Hindari menggunakan beberapa pemilih atribut (mis., [Class ^ = "..."]) pada komponen yang sering muncul. Kinerja browser diketahui dipengaruhi oleh ini.
  • Pertahankan agar pemilih tetap pendek dan berusahalah untuk membatasi jumlah elemen di setiap pemilih menjadi tiga.
  • Cakupan kelas ke induk terdekat hanya jika diperlukan (misalnya, saat tidak menggunakan kelas yang diawali).
🌚 Bad
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }
🌝 Good
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

2. Skeleton

This section showcases a barebones css file with its minimum requirements.

Stylesheet section blocks breakdown:

  • Section 1: Stylesheet Update Log
  • Section 2: Line break
  • Section 3: Table of Contents
  • Section 4: Line break
  • Section 4: Your css rules
*
 * [Master Stylesheet]
 
****************************************************************************

*
 * Project:	Sample Project Name
 * Version:	1.1
 * Last change:	02/07/14 [fixed Float bug, vf]
 * Assigned to:	Your Name (yn), Secondary Name (sn)
 * Primary use:	Usage 
 
****************************************************************************

*
 * [Table of Contents]
 * 1. Imports
 * 2. Body
 * 3. Header / #header
 * 4. Navigation / #navbar
 * 5. Content / #content
 * 6. Left column / #leftcolumn
 * 7. Right column / #rightcolumn
 * 8. Sidebar / #sidebar
 * 9. RSS / #rss
 * 10. Search / #search
 * 11. Boxes / .box
 * 12. Sideblog / #sideblog
 * 13. Advertisements / .ads
 * 14. Footer / #footer
 
****************************************************************************
*
 * [1. Imports]
 
****************************************************************************
@import 'reset.css';
@import 'layout.css';

*
 * [2. Header]
 
****************************************************************************
body {
	color: #606060;
	font-family: 'Helvetica, Arial, san-serif';
	font-size: 100%;
}

3. Comment

a. Section Comments

  • Bagian Komentar Harus ditempatkan pada baris di atas subjeknya
  • Inline Comment Harus menggunakan / * * / pembatas misalnya #navigation {/ * height: 30px; * /}
🌚 Bad
*
 * [3. Header]
**************************************************************************** #nav li{ display: inline; }
🌝 Good
*
 * [3. Header]
****************************************************************************
#nav li{ display: inline; }

####b. Inline Comments

🌚 Bad
#navigation li {
	color: #404040;
	display: inline-block;
	font-family: 'Proxima-nova, helvetica, sans-serif';
	line-height: inherit; // inherits the line-height from parent element
}
🌝 Good
#navigation li {
	color: #404040;
	display: inline-block;
	font-family: 'Proxima-nova, helvetica, sans-serif';
	line-height: inherit;  inherits the line-height from parent element 
}

4. Formatting

a. Line Identation

🌚 Bad
#footer .awards h3{
    color: #000;
    font-weight: 600;
    text-transform: capitalize;
}
🌝 Good
#footer .awards h3 {
        color: #000;
        font-weight: 600;
        text-transform: capitalize;
}

Salah karena spasi digunakan untuk membuat indentasi, bukan tab.

b. Blank Lines

🌚 Bad
.selector-1 {
	background: #efefef;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webki-tborder-radius: 4px;
	color: #999;
}
.selector-2 {
	display: inline-block;
	text-decoration: none;
}
🌝 Good
.selector-1 {
	background: #efefef;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webki-tborder-radius: 4px;
	color: #999;
}

.selector-2 {
	display: inline-block;
	text-decoration: none;
}
  • Salah karena tidak ada baris kosong antara Kurung tutup kurung tutup .selector-1 dan kurung buka .selector-2.

c. Trailing whitespace

🌚 Bad
.selector-1,  
.selector-2,  
.selector-3 {
   background: #efefef;
   border-radius: 4px;
   -moz-border-radius: 4px;
   -webki-tborder-radius: 4px;
   color: #999;
}
🌝 Good
.selector-1,
.selector-2,
.selector-3 {
	background: #efefef;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webki-tborder-radius: 4px;
	color: #999;
}
  • Salah karena ada spasi setelah coma (,)
  • Salah karena ada spasi setelah setiap deklarasi css

d. Declaration Order

🌚 Bad
.jspscrollable span {
	text-transform: underline;
	font-weight: 700;
	padding: 4px 3px;
	border-radius: 4px;
	height: 100%;
	overflow: hidden;
	-moz-border-radius: 4px;
	-webki-tborder-radius: 4px;
	line-height: 15;
	border: 1px solid rgba(60, 60, 60, .4);
	width: 75%;
	color: #aaa;
}
🌝 Good
.jspscrollable span {
	border: 1px solid rgba(60, 60, 60, .4);
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webki-tborder-radius: 4px;
	color: #aaa;
	font-weight: 700;
	height: 100%;
	line-height: 15;
	overflow: hidden;
	padding: 4px 3px;
	text-transform: underline;
	width: 75%;
}

Salah karena deklarasi ruleset tidak diurutkan menurut abjad.

e. Property name stops

🌚 Bad
body {
	height:100%;
	overflow: hidden;
	position: relative;
}
🌝 Good
body {
	height: 100%;
	overflow: hidden;
	position: relative;
}

Salah karena tidak ada jarak antara tinggi: dan 100%.

f. Quotation

🌚 Bad
body {
	height: 100%;
	overflow: hidden;
	position: relative;
	font-family: "Helvetica, Arial, Sans-serif";
	background: url("images/background.png") no-repeat 0 0;
}
🌝 Good
body {
	height: 100%;
	overflow: hidden;
	position: relative;
	font-family: 'Helvetica, Arial, Sans-serif';
	background: url('images/background.png') no-repeat 0 0;
}

Salah karena latar belakang dan pernyataan font-family menggunakan tanda kutip ganda, bukan tanda kutip tunggal.

g. Property Units

🌚 Bad
#content .left-container {
	float: left;
	font-size: 4%;
	height: 100%;
	margin-right: 28px;
	overflow: hidden;
	width: 672px;
}

#content .sidebar {
	float: left;
	font-size: 12px;
	height: 100%;
	margin: 0;
	overflow: hidden;
	width: 307px;
}

#content .sidebar img {
	height: auto;
	max-width: inherit;
	width: 500px;
}
🌝 Good
#content .left-container {
	float: left;
	font-size: 1.8em;
	height: 100%;
	margin-right: 3%;
	overflow: hidden;
	width: 70%;
}

#content .sidebar {
	float: left;
	font-size: 1.75rem;
	height: 100%;
	margin: 0;
	overflow: hidden;
	width: 27%;
}

#content .sidebar img {
	height: auto;
	max-width: inherit;
	width: 72%;
}
  • Salah karena deklarasi width dan margin-right menggunakan px, bukan %.
  • Salah karena ukuran font tidak ditentukan dengan em atau rem.
  • Salah karena #content .sidebar img {} tidak menggunakan persentase untuk lebarnya.

h. Background Images

🌚 Bad
#footer .awards h3{
    background: url(http://bar.com/foo.png) no-repeat 0 0;
    color: #000;
    font-weight: 600;
    text-transform: capitalize;
}
🌝 Good
#footer .awards h3{
    background: url(//bar.com/foo.png) no-repeat 0 0;
    color: #000;
    font-weight: 600;
    text-transform: capitalize;
}

Salah karena protokol telah ditentukan di latar belakang: url (http://bar.com/foo.png) no-repeat 0 0 ;.

5. SASS

a. Variable Names

🌚 Bad
$color-dark-gray: #a9a9a9;
$color-black: #000;
$colorLightBlue: #add8e6;
$color-Kiwi: #7f9a65;
$color_ruby_red: #c82536;
🌝 Good
$color-dark-gray: #a9a9a9;
$color-black: #000;
$color-light-blue: #add8e6;
$color-kiwi: #7f9a65;
$color-ruby-red: #c82536;
  • Salah karena $colorlightBlue tidak dipisahkan dengan tanda hubung. Variabel tidak boleh camelcase.
  • Salah karena $ color-Kiwi tidak semuanya huruf kecil.
  • Salah karena $ color_ruby_red dipisahkan oleh garis bawah.

b. Variable Prefix

🌓 Acceptable
$dark-gray: #a9a9a9;
$line-height: 16;
$color-blue: #add8e6;
🌔 Preferred
$font-color-dark-gray: #a9a9a9;
$slideshow-caption-line-height: 16;
$logo-color-blue: #add8e6;

c. Mixin Names

🌚 Bad
@mixin myMixinName($opacity: .5) {
	opacity: $opacity;
	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity =' $opacity * 100 ')';
	filter: alpha(opacity = $opacity * 100 );
	zoom: 1;
}
🌝 Good
@mixin my_mixin_name($opacity: .5) {
	opacity: $opacity;
	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity =' $opacity * 100 ')';
	filter: alpha(opacity = $opacity * 100 );
	zoom: 1;
}
  • Salah karena @mixin myMixinName () {} tidak semuanya huruf kecil.
  • Salah karena kata-kata dalam @mixin myMixinName () {} tidak dipisahkan dengan garis bawah.

d. Mixin Arguments

  • Tidak harus diberi spasi sebelum koma
  • Harus diberi spasi setelah koma
  • Dapat menggunakan jeda baris untuk argumen panjang
  • Kemudian Harus menempatkan setiap argumen pada barisnya masing-masing
  • Kemudian Harus membuat indentasi setiap argumen satu kali
  • Harus dipesan dari wajib ke opsional terlebih dahulu
  • Harus diurutkan dari tingkat kepentingan tinggi ke rendah
  • Harus menggunakan default deskriptif
  • Harus diawali dengan komentar yang menjelaskan fungsionalitas mixin
🌚 Bad

Round Borders

  • 'size' mengatur lebar garis tepi dalam px
  • 'type' mengatur jenis perbatasan (solid)
  • radius * adalah radius dalam px untuk batas di setiap sudut elemen - jika hanya ada satu radius, setiap radius mendapatkan jumlah yang pertama
@mixin mixin_border_radius($size: none, $type: none, $color: none, $radius1: 999, $radius2: 999, $radius3: 999, $radius4: 999) {
	@if $radius2 == 999 {$radius2 : $radius1};
	@if $radius3 == 999 {$radius3 : $radius1};
	@if $radius4 == 999 {$radius4 : $radius1};

	@if $size != none {border: $size $type $color};

	-webkit-border-radius : $radius1 $radius2 $radius3 $radius4;
	-moz-border-radius    : $radius1 $radius2 $radius3 $radius4;
	border-radius	      : $radius1 $radius2 $radius3 $radius4;
}
🌝 Good

Round Borders

  • 'size' mengatur lebar garis tepi dalam px
  • 'type' mengatur jenis perbatasan (padat)
  • radius * adalah radius dalam px untuk batas di setiap sudut elemen - jika hanya ada satu jari-jari, setiap radius mendapatkan jumlah yang pertama
@mixin mixin_border_radius(
	$border-size: none,
	$border-type: none,
	$border-color: none,
	$border-top-left-radius: 999,
	$border-top-right-radius: 999,
	$border-bottom-left-radius: 999,
	border-bottom-right-radius: 999
) {

	@if $border-top-left-radius == 999 {$border-top-left-radius : $border-top-right-radius};
	@if $border-bottom-left-radius == 999 {$border-bottom-left-radius : $border-top-right-radius};
	@if $border-bottom-right-radius == 999 {$border-bottom-right-radius : $border-top-right-radius};

	@if $size != none {border: $size $type $color};

	-webkit-border-radius : border-top-left-radiius $border-top-right-radius $border-bottom-right-radius $border-bottom-left-radius;
	-moz-border-radius    : border-top-left-radiius $border-top-right-radius $border-bottom-right-radius $border-bottom-left-radius;
	border-radius	      : border-top-left-radiius $border-top-right-radius $border-bottom-right-radius $border-bottom-left-radius;
}
  • Salah karena daftar argumen yang panjang tidak dipecah satu per baris.
  • Argumen mixin yang salah Harus lebih deskriptif, mis. $ radius1, $ radius2. Meskipun Anda bisa mendapatkan apa yang dilakukan setiap variabel, ini bisa dibuat lebih jelas dengan nama deskriptif.

e. Nesting Levels

🌚 Bad
.blog-post {
	background: transparent;
	color: #606060;
	display: inline-block;
	.blog-post-content {
		color: #000;
		font-weight: normal;
		.blog-post-meta {
			display: block;
			float: right;
			.blog-post-meta-author {
				color: blue;
				.blog-post-author-link {
					text-decoration: underline;
				}
			}
		}
	}
}
🌝 Good
.blog-post {
	background: transparent;
	color: #606060;
	display: inline-block;
	.blog-post-content {
		color: #000;
		font-weight: normal;
		.blog-post-meta {
			display: block;
			float: right;
			.blog-post-meta-author {
				color: blue;
			}
		}
	}
}

.blog-post-author-link {
	text-decoration: underline;
}

Salah karena sarang di atas memiliki kedalaman lebih dari empat tingkat.

f. Order Rule's Content

List @extend(s) First:

.weather {
  @extends %module; 
  ...
}

List @include(s) Next

.weather {
  @extends %module; 
  @include vendor(transition, all 0.3s ease-out);
  ...
}

List "Regular" Styles Next

.weather {
  @extends %module; 
  @include vendor(transition, all 0.3s ease-out);
  color: red;
}

Nested Selectors Last

.weather {
  @extends %module; 
  @include vendor(transition, all 0.3s ease-out);
  
  color: red;

  > p {
    /* not that you would use a nested selector here (you'd be using BEM to try and negate a need for nested rule) */
  }
}

g. List Vendor/Global Dependancies First, Then Author Dependancies, Then Patterns, Then Parts

/* Vendor Dependencies */
@import "compass";

/* Authored Dependencies */ 
@import "global/colors";
@import "global/mixins";

/* Patterns */
@import "global/tabs";
@import "global/modals";

/* Sections */ 
@import "global/header";
@import "global/footer";

6. Best Practices

a. Selector Specificity

  • Harus efisien dan bijaksana.
  • Elemen yang muncul sekali di halaman Harus menggunakan ID, jika tidak, gunakan kelas.
  • Harus tidak menggunakan lebih dari satu pemilih id dalam deklarasi aturan.
  • Harus menggunakan nama kelas yang spesifik dan deskriptif serta mencerminkan tujuan elemen yang dimaksud
🌚 Bad
.color {
	background: #000;
}

Salah karena pemilih .color tidak secara jelas menunjukkan kegunaannya.

.this-is-going-to-be-used .to-set-the-color-to-black {
	background: #000;
}
#navigation #subnav li a {
	display: inline-block;
}
  • Salah sebagai penyeleksi sementara jelas, bisa ditulis ulang agar lebih konsisten.
  • Dua id tidak boleh digunakan dalam selektor Kecuali benar-benar diperlukan karena hal ini dapat menjadi masalah yang hampir sama bermasalahnya dengan memiliki !important;.
🌝 Good
#footer .contact-form-submit {
	float: left;
}

b. CSS Shorthand

🌚 Bad
.#footer .contact-form-submit {
	margin-left: 3px;
	margin-right: 3px;
	margin-top: 4px;
	margin-bottom: 5px;
}

Salah karena deklarasi ini dapat disederhanakan menjadi deklarasi tunggal.

🌝 Good
#footer .contact-form-submit {
	margin: 4px 3px 5px 3px;
}

c. CSS Hacks

  • Penggunaan peretasan versi IE sebaris Harus dihindari. Stylesheet khusus versi Harus dimuat secara bersyarat sebagai gantinya.
  • Penggunaan !important Harus dihindari. Kekhususan pemilih meningkat untuk aturan yang terpengaruh.
  • Peretasan yang digunakan untuk menargetkan browser firefox, Chrome, Safari, dan Opera dapat digunakan dengan hemat, karena ada kasus di mana rendering di browser ini mungkin perlu sedikit berbeda. Lebih disukai menggunakan pustaka js yang menambahkan kelas khusus browser ke tag body dari tata letak html. Kelas baru itu kemudian dapat digunakan untuk tujuan penataan Anda.
::first_quarter_moon: Acceptable
#header .logo {
	position: relative;  Position relative for modern browsers 
	position: absolute\9;  Position absolute for IE8 and IE7 
}

Dapat diterima tetapi bukan metode yang disukai.

🌝 Good
#header .logo {
	position: relative; 
}

.ie7 #header .logo,
.ie8 #header .logo {
	position: absolute;
}

Metode yang disukai adalah membuat lembar gaya yang dimuat secara bersyarat untuk IE7 & IE8 atau menggunakan deteksi js yang akan menambahkan kelas seperti ie7, yang kemudian dapat digunakan untuk tujuan penataan gaya.

d. CSS3 Properties

🌚 Bad
.#footer .column {
	box-sizing: border-box;
	padding: 0 2.2%;
}

Salah, tidak ada prefiks vendor yang ditentukan untuk ukuran box: border-box;.

::first_quarter_moon: Acceptable
.#footer .contact-form-submit {
	border-radius: 3px;
	box-shadow: 0 -3px 12px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 -3px 12px rgba(0, 0, 0, .4);
	-webkit-box-shadow: 0 -3px 12px rgba(0, 0, 0, .4);
}

Dapat diterima. Versi terkini dari semua browser populer tidak memerlukan prefiks untuk box-shadow atau border-radius. Ada kemungkinan bahwa beberapa pengguna mungkin masih menjalankan versi browser ini yang beberapa versi di belakang versi saat ini. Versi lama ini tidak akan mengenali deklarasi border-radius dan box-shadow tanpa prefiks vendor

🌝 Good
.#footer .contact-form-submit {
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	box-shadow: 0 -3px 12px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 -3px 12px rgba(0, 0, 0, .4);
	-webkit-box-shadow: 0 -3px 12px rgba(0, 0, 0, .4);
}

e. SASS Variables and Mixins

  • Variabel SASS Harus digunakan untuk menyimpan nilai tunggal yang akan sering digunakan kembali dalam stylesheet.
  • Warna, font, ukuran font, lebar, margin dan paddings semuanya dapat disimpan sebagai variabel.
  • Mixin SASS Harus digunakan sebagai pengganti blok deklarasi yang berulang.
  • Deklarasi css3 apa pun yang membutuhkan prefiks vendor dapat digabungkan menjadi mixin, pengelompokan deklarasi untuk suatu elemen juga dapat digabungkan menjadi mixin
::first_quarter_moon: Acceptable
body {
	color: #000;
	font-family: 'Proxima-nova, Helvetica, Sans-serif';
	font-size:14px;
}   

#widget .container {
	box-shadow: inset 3px 1px 6px rgba(60, 60, 60, .75);
	-moz-box-shadow: inset 3px 1px 6px rgba(60, 60, 60, .75);
	-webkit-box-shadow: inset 3px 1px 6px rgba(60, 60, 60, .75);
}

Ini adalah sintaks yang valid sebagai variabel, tetapi ada juga peluang untuk menyimpan nilai-nilai ini sebagai variabel karena ada kemungkinan nilai tersebut perlu digunakan kembali dalam stylesheet di suatu titik. Mengubah nilai ini di satu lokasi biasanya lebih disukai daripada Harus memodifikasinya di beberapa tempat.

🌝 Good

Variables and mixin below were defined within a separate stylesheet

body {
	color: $color-black;
	font-family: $proxima-nova-regular;
	font-size: $default-font-size;
}   

#widget .container {
	@include box-shadow(3px, 1px, 6px, rgba(60, 60, 60, .75), true);
}

f. Mobile

  • Harus Gunakan grid fluid dimana persentase digunakan untuk lebar, tinggi, margin dan padding.
  • Kerangka kerja css yang memprioritaskan seluler akan secara otomatis menjalankan prinsip-prinsip ini.
  • Harus Gunakan em atau rem untuk ukuran font.
  • Harus Gunakan persentase untuk ukuran gambar.
🌚 Bad
.blog-post .content {
	font-family: $proxima-nova-regular;
	font-size: 12px;
}
.author-box img{
	vertical-align: middle;
	max-width: 320px;
}
  • Salah sebagai ukuran font: 12px;
  • Harus menggunakan em atau rem sebagai gantinya.
  • Lebar maks: 320px;
  • Harus ditentukan dengan persentase.
🌝 Good
.blog-post .content {
   font-family: $proxima-nova-regular;
   font-size: .750em;
}
.author-box img{
   vertical-align: middle;
   max-width: 33.3%;
}

Referensi:
  - https://gist.github.com/fleishmanhillard/9983654#file-format 
  - https://codeguide.co/?utm_source=dailydevlinks.com&utm_medium=link_post_dailydevlinks.com&utm_campaign=link_post_dailydevlinks.com&ref=dailydevlinks.com
  - https://github.com/Integralist/Style-Guides/blob/master/CSS%20Style%20Guide.md?utm_source=dailydevlinks.com&utm_medium=link_post_dailydevlinks.com&utm_campaign=link_post_dailydevlinks.com&ref=dailydevlinks.com
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment