- Professional CSS3
- Piotr Sikora
- 266字
- 2021-07-02 16:39:37
Good assumptions in code
While you are creating CSS code, you have to remember initial assumptions that will help you to keep clear and very readable code. These assumptions are as follows:
- Naming convention—You need to remember that your code needs to be the exact names of classes.
- Use comments, but not everywhere, only in places where they are needed. Yeah, but when they are needed? They are especially needed when you have some exception or when you have some quick fixes for browsers. With comments, you can describe blocks of code, which describes the views, for example, of footer/header, or any other element.
- Try to keep code which is readable and logical. But how does unlogical code look like? Look at the following two examples:
Example 1 is as follows:
.classname { font-size: 12px; color: red; font-weight: bold; text-align: center; margin: 10px; padding-left: 2px; text-transform: uppercase; }
Example 2 is as follows:
.classname { margin: 10px; padding-left: 2px; font-size: 12px; font-weight: bold; text-align: center; text-transform: uppercase; color: red; }
Which code looks better? Yeah, of course, the second example because it has grouped declarations. First the description of the box model, then the font and text behaviors, and finally color. You can try to keep it in another hierarchy which will be more readable for you.
Using sample 2 in SASS:
.classname margin: 10px padding: left: 2px font: size: 12px weight: bold text: align: center transform: uppercase color: red
Isn't it shorter and more logical?
- Create proper selectors (this will be described later in this chapter).
- Create an elastic structure for your files.
推薦閱讀
- Arduino by Example
- C#程序設計教程
- Scratch 3.0少兒編程與邏輯思維訓練
- 用Flutter極速構建原生應用
- 從零開始學Python網絡爬蟲
- 后臺開發:核心技術與應用實踐
- Node.js區塊鏈開發
- OpenCV Android Programming By Example
- WordPress Search Engine Optimization(Second Edition)
- SAS編程演義
- 計算機系統解密:從理解計算機到編寫高效代碼
- Bitcoin Essentials
- Spring Boot 2+Thymeleaf企業應用實戰
- Django 2.0 入門與實踐
- 編程真好玩:從零開始學網頁設計及3D編程