-
Notifications
You must be signed in to change notification settings - Fork 0
HTML CSS Coding Guidelines (Draft)
Discussion, guidelines and tips for developing manageable and reusable CSS. Good quality codes have huge impact on development productivity improvement.
CSS is very flexible language that enables you to combine multiple simple definitions to create a unique characteristics into an element (that is called MIXIN). Structuring CSS code is very difficult since CSS is very flexible, and CSS does not restrict you to stay on a track. Almost everyone fails to build CSS properly, and almost all projects fall into deep problem maintaining HTML and CSS.
In order to improve the way we create CSS, we all need to study how we have repeatedly fail, and learn how smart people are designing their CSS libraries.
Smart people's library will always help us. Understand and rely on libraries to take advantages.
Clean code will definitely help when making changes to existing code. Our definitions of clean code are:
- No too-long lines
- No
<TAB> - 2 space indentation for HTML
- 4 space indentation for CSS
Specifically name IDs and classes.
- NO:
class="red"class="xyz123" - DO:
class="important-message-title"class="less-important-message-title"
Camelized names will make readers difficult track minuteness/detailness of definition. Use hyphen-connected name for more human-readable definition.
- NO:
class="funcNameFormEditItem" - DO:
class="funcname-form-edit-item"
Try building HTML and CSS with combination of simple, compatible and reusable definitions.
.content form div dl dt label { }
.content form div dl dt label span { }
.content form div dl dd input { }This style will only work when HTML structure is exactly equal to what's expected.
form.type-of-form label { }
form.type-of-form label span { }
form.type-of-form input { }This style will flexibly work for most of forms with class type-of-form.