前端记念册程序员让前端飞

可扩展、模块化CSS--基础样式规则(翻译文)

2018-02-04  本文已影响17人  拿着号码牌徘徊
SMACSS is becoming one of the most useful contributions to front-end discussions in years

基础样式规则是被应用到元素选择器、派生选择器、子选择器或者伪类,并不包括classID选择器。这些样式一般是默认的样式并且被引用到整个项目。

基础样式
body, form {
    margin: 0;
    padding: 0;
}

a {
    color: #039;
}

a:hover {
    color: #03F;    
}

所以,基础样式一般的内容就是默认定义链接的样式,项目的基础字体,body的背景颜色等等,基础样式不需要加上!important
我在这里特别强调body的背景颜色,是因为很多开发者会把背景颜色设置成其他而不是白色,这样做的结果往往会导致整个设计看上去垮掉。可能字体的颜色也会变得不协调,让网站不是很好用。

CSS 重置

css重置是为了剥离或者说是重置默认margin,padding,和其他属性。目的是让各个浏览器能够在样式上一致,以此在这个基础上再设计与开发。
很多重置框架太过激进,往往呢,引入它们之后,问题比应该要的效果更多。删除marginpadding将会导致重复再设置它们的工作。
当然有有好的重置工具,只要根据具体的需求和开发要求去选择就行。
总而言之,在开发前设置默认的重置样式是有利的。
原文地址:https://smacss.com/

上一篇下一篇

猜你喜欢

热点阅读