In wordpress development, the selected theme employs large number of classes to style its elements. To distinguish the classes used by the theme and our own custom classes, it is necessary to set a guideline for assigning names to our own classes so as to ease development and future maintenance work.
The guidelines:
- All custom css classes are prefixed with “cu-“
- Outer row : cu-aaa-nn (e.g. cu-home-01), where
- aaa => page name abbreviation, 3 to 4 characters.
- nn => The nn-th outer row. ‘nn’ is double digit as outer rows can have ten or more.
- Inner row: cu-aaa-nn_m (e.g. cu-home-01_1), where
- nn_m => The m-th inner row of the nn-th outer row. ‘m’ is single digit as inner row seldom has more than 10.
- e.g. 10_2 => The second inner row of the 10th Outer row.
- c1 or c2 => column 1 or 2