Naming Forbidden Abbreviations
- To be concise and to the point
classNaming, do not use custom abbreviations.
class nameThe naming of must be behavioral and semantic.
It is forbidden to write under non-special circumstances.
- CSS has its own weight design and can be used arbitrarily.
! importantIt will cause weight confusion and cannot be maintained.
The width and height cannot be easily defined.
- Users can set their own browser, for example
AndroidThe mobile phone can set the display font size, and the dead height will make the fonts overlap each other.
- The height and width of mobile devices are infinite.
- Please don’t write Kuan to death.
imgPlease let it scale automatically.
- Please do not replace
imgSet the width or height of the container to allow it to scale according to the device.
- Please use
If you really want to use:
width: 100%; height: auto;
- If you want to give
img border-radiusTo set the style, use the parent element to control the behavior and keep
imgOnly pictures are loaded, no styles.
- Please don’t spend much time writing
media query, set a pile of
breakpoint, write your own component styles, and control the container width on each device.
- Please use
grid system, these are mature frameworks, and some have already helped you deal with browser compatibility issues.
over writeOr in the original frame
- Write a new one directly
classDo not overwrite the original design.
- Don’t have any more
classPlease write an additional style separately.
For designing RWD website, please follow the principle of mobile device priority.
- The design order of the designer is to give priority to the desktop version before designing the mobile phone version.
- The front-end engineer got the visual map and began to write it.
HTML/CSSWhen the mobile phone version is the first priority.
Opening web pages on mobile phones is very much influenced by mobile phone performance and network conditions. Front-end engineers give priority to the mobile phone version from the beginning, allowing HTML to be loaded at the beginning, and loading web pages quickly with minimal performance. When starting to make desktop version, only a little running version, make appropriate fine-tuning.
On the contrary, if the desktop version is made first, it will take more time to adjust when the mobile phone version is cut or run.
Then there’s the iPhone
retina, will automatically double the size of the picture when it is placed on the mobile phone, and will find out whether the picture load is effective or not at the beginning of production. In order to make the picture have a better experience on iPhone, it is suggested that mobile version is preferred.
html tag selector
- Please define directly
classThe style of does not need to be specified
Levels cannot exceed three levels.
- More than three layers indicate that the coupling degree is too high and it is not elastic or maintainable.
Use the same
elementDon’t write all the things in it, please separate the typesetting related items.
imgAbove, please put
imgKeep it clean. Location, e.g.
Don’t be casual
noneOff the screen
- Please note that if you want to
noneSome styles are missing, please decide according to the degree of use.
- The usage level is all over the website, please use it directly.
- Under medium usage, please define one
a tagDon’t have
listEliminate original styles
- Please go to
reset.cssIs defined above and set to the first load order
classCan be added for naming
Do not use it arbitrarily.
br hr tag
brIs a line break, please use in
p tagInside, when
pIt can be used when there are too many words in it.
hrIt is a quick dash, but it will be eliminated soon. Please use it directly.
brYou have to think about whether the parent block
display: block;If you want to wrap a line, you should think about whether it is the next paragraph.
- Please use all lines