csslint / csslint Goto Github PK
View Code? Open in Web Editor NEWAutomated linting of Cascading Stylesheets
Home Page: http://csslint.net
License: Other
Automated linting of Cascading Stylesheets
Home Page: http://csslint.net
License: Other
!important can quickly become an abused tool if not properly designing your CSS, and while certainly useful for leaf nodes or user-stylesheets, it should be noted that overuse can quickly create unneeded complexity with regards to specificity.
It’d be nice to have the option to check CSS via a URL, like validators. It’d also be cool to point to a webpage and have CSSLint pull in all styles (linked, imported, in <style>, inline) on that page, although this’d be a bit more work.
With HTML5, we can have headings embeded in sectioning elements (section, article, aside, nav). It helps reuse HTML blocks created by CMS for example.
When a heading gets deeper embeded, I think it should be rendered accordingly. That's what I tried in HTML5 Titles Inception
It needs qualified headings.
I believe it's choking when given the following CSS: https://gist.github.com/1028267
This is the content that is displayed:
CSS lint found 0 errors and 0 warnings. How can you fix it? See the details below.
And in the detail area:
16 lines 3 errors 5 warnings
But everything in the area is blank, appearing broken. This is in FF4 and Chrome newest stable (not dev/canary).
I think that "Too many floats" rule should not count "float: none".
.foo.bar { color: red; }
causes
Adjoining Classes Don't use adjoining classes.
IE6, IE7
but its only ie6 that has an issue with those. 7 is peachy with 'em
This is awesome, thanks!
The command for installing CSS Lint as shown at http://csslint.net/about.html#node does not work:
$ sudo npm install -g CSS Lint
npm ERR! couldn't read package.json in CSS
npm ERR! Error: ENOENT, No such file or directory 'CSS/package.json'
npm ERR! Report this *entire* log at:
npm ERR! <http://github.com/isaacs/npm/issues>
npm ERR! or email it to:
npm ERR! <[email protected]>
npm ERR!
npm ERR! System Darwin 10.7.0
npm ERR! command "node" "/usr/local/bin/npm" "install" "-g" "CSS" "Lint"
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /Users/taco/tmp/npm-debug.log
npm not ok
The command that does work for me to install CSS Lint with NPM:
sudo npm install -g csslint
Warning is: float can't be used with display: table-cell. (And that's true)
But the flagged value is: float:none;
It would be awesome if the parser could notice when a value is being reset to a legal value. :)
For this kind of project I think it would be very helpful if the documentation included links to the blog posts, articles and such that have motivated each rule. This will help educate users.
HTML5Boilerplate does something similar.
Should this warning be displayed when width:auto
and/or padding:0
?
0 Errors reported when style sheet begins with @font-face declaration.
It choked on this:
@font-face {/* Generated by Font Squirrel (http://www.fontsquirrel.com) */
font-family: 'bcitfont';
src: url('/images/chrome/bebas___-webfont.eot');
src: local('?'), url('/images/chrome/bebas___-webfont.woff') format('woff'), url('/images/chrome/bebas___-webfont.ttf') format('truetype'), url('/images/chrome/bebas___-webfont.svg#webfontnqJLEELI') format('svg');
font-weight: normal;
font-style: normal;
}
When I remove it it works fine.
While margin is ignored by good browsers, padding on inline elements is perfectly okay. I’m sure it’s a slight oversight though. :)
@font-face rules cause CSS Lint to fail:
@font-face {
font-family: 'BebasNeueRegular';
src: url('BebasNeue-webfont.eot?') format('eot'),
url('BebasNeue-webfont.woff') format('woff'),
url('BebasNeue-webfont.ttf') format('truetype'),
url('BebasNeue-webfont.svg#webfontj1CI1MAi') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font: 100%/1.5 BebasNeueRegular;
}
Should I get this warning with float:none
?
"Vendor prefixed properties should also have the standard."
(Ported from CSSLint/parser-lib#8)
This should only be required for vendor fixed properties that developed into a stable spec. Otherwise, it defeats the entire point of vendor prefixes.
For example, it does not make sense to include user-focus when using -moz-user-focus, even though a W3C Working Draft exists. On the other hand, it does make sense to include transform as well as its vendor prefixed variants, despite the spec still in the Working Draft stage.
Links:
http://www.w3.org/TR/2000/WD-css3-userint-20000216
https://developer.mozilla.org/en/CSS/-moz-user-focus
http://www.w3.org/TR/css3-2d-transforms/
https://developer.mozilla.org/en/css/-moz-transform
Incorrect error message relating to adjoining classes (also on 'about' page). They are supported in IE7, although not in IE6.
On the output page, that table below the results which contains the syntax-highlighted code...
The line number column only looks fine if there are 1-2 digits. As soon as there are 3 or more it overflows.
Removing table-layout:fixed from .data table (style.css:167) solves this issue.
Properties that override other properties within the same selector should throw a warning. I'm not sure if this applies for EVERY case, but definitely for cases such as:
.foo { color: #000; display: inline; color: #FFF; }
Example:
@-webkit-keyframes slideInUp { from { -webkit-transform: translateY(100%); } to { -webkit-transform: translateY(0); } }
Since :hover
should be as far to the right as possible, this is another thing which could be checked.
I'm not really sure where the line should be drawn though. But then again... if it can be turned on and off, it's probably fine to nag if :hover
isn't at the very right.
CSS Lint would be an even more awesome tool for me as a teacher if it would require my students to use proper style rules, especially for white space and indentation. (Note that github won't give me monospace fonts in pre-block, so it's hard to show exactly what I mean.
Rules I like (starting point of conversation):
E.g. .foo *
or just *
.
It's a silly thing to do and easy to catch.
Using0
float
for layout isn't a great idea, but sometimes you have to. CSS Lint simply checks to see if you've usedfloat
more than 10 times, and if so, displays a warning. Using this manyfloats
usually means you need some sort of abstraction to achieve the layout.
I'm left puzzled by this statement. Pointers to good alternative would be welcome.
The properties in the rule are liste like this:
-webkit-border-radius: 3px;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius: 3px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
border-radius: 3px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
It's flagging as warnings missing border-bottom-left-radius and border-bottom-right-radius based on the -moz- properties it sees.
Just a little tweak. :)
in html5boilerplate style.css:
@page { margin: 0.5cm; }
throws an error while this is syntactically an edge case, it's correct to define the page-box.
This line:
h2 a, h2 a:active, h2 a:hover, h2 a:visited, h2 a:link {
gives me five Heading (h2) has already been defined. errors.
I think it would be a good addition to the parser to omit the warning if the following is found.
div {
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@media print {
img { max-width: 100% ; }
@page { margin: 0.5cm; }
}
is the repro
There is a warning that says: padding can't be used with display: inline.
But that's only true on the top and bottom of an element. Padding can be used on the sides of an inline element.
A property with these values: padding: 0 4px 0 6px; - should not be flagged.
Using headers and matching class names (as in OOCSS eg h1, .h1 {}
) returns the error 'Heading has already been defined'
http://csslint.net/about.html links to:
https://github.com/stubbornella/CSS%20Lint[...] (note the space)
in 4 places.
Currently CSS Lint requires the use of all vendor prefixes for gradients. However, for other properties it just says that I should add the standard property at the bottom. This is sub optimal for a number of reasons.
div {
-webkit-animation-name: bounce;
animation-name: bounce;
}
div {
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
}
Ergo CSS Lint should not require the usage of non-prefixed properties for rules that are still in the very early stages of experimental implementations. But a notice could be in order, when people code Webkit or Gecko exclusive code. (It's rarely anything but Webkit these days...)
BTW, this problem is not solved by turning off the rule. I still would like to be notified when I don't use all available prefixes.
It seems we need a lookup table of some sort, based on this table.
There are box model warnings given when a width is used along with top or bottom padding or border. These shouldn't be flagged unless there is a height.
Padding works fine on inline element. So, what's the reason for this rule?
Isn't this what everyone does if you want to add some icon to some link?
It’d be nice to have the option to see the code CSSLint checked at the bottom, like W3 validators do. This would of course be minimised by default.
For a class, if every occurrence of element.my-class is div.my-class, then of course that looks overqualified and unnecessary. But if I have li.my-class dt.my-class and dd.my-class, then they do not appear to be overqualified.
I think this warning should only be displayed if every occurrence of element.class is a reference to the same HTML tag name.
display:inline
will just be ignored when using float
- unless in IE6, where it is used as a fix for the double-margin bug on floats - so the warning text could be altered to reflect this.
If you are overriding styles for headings in media queries (e.g. for smaller screens or for print) you still get a warning.
why oh why?
was: wrong shorthand font syntax should return an error
Rules like these:
.selector {
font: 2em;
}
.selector {
font: bold 2em;
}
Should return an error as the shorthand syntax requires at least to declare a font-size and a font-family.
The above may work in IE6 quirks, but should fail in modern browsers.
E.g.: width:6ch
.
If a ruleset removes floating, i.e. float:none
, and includes a display
value other than block
, it still displays a warning about combined float and certain display values.
Using width: 100% on an element whose parent element has padding will result in the child stretching outside of the parent's bounding box.
I think that's wrong. The Child will only stretch outside of the parents's box, if it has padding/margin/border by itself. It doesn't matter if the parent has padding.
Looks like CSS Lint can’t parse media queries of the form @media (max-width: 30em) {}
yet. Note that it does in fact handle the needlessly verbose @media all and (max-width: 30em) {}
correctly.
(As a side note, it might be a good idea to recommend omitting the all and
in cases like these since it only adds more bytes.)
http://mths.be/60277264855740416
http://mths.be/60278308683784193
You can click on the results table to jump to the line in the source code. However, the cursor doesn't indicate any kind of interaction; it's the default one.
Below in the source code, the cursor changes to pointer if an error is hovered. However, clicking there does nothing. (Tooltips would be nice here, by the way.)
e.g.:
/*!
Somthing very important
*/
Something like this:
https://raw.github.com/gist/1028573/ea0b7300546a74c9743375604aa6534037087fd9/gistfile1.txt
This is what i get:
Sweet project Nicole!
I'd say that "Don't use ID selectors." is a bit controversial. They are the most efficient selector you can write in terms of rendering speed: https://developer.mozilla.org/en/Writing_Efficient_CSS
There are two related CSS Lint rules set right now that absolutely make sense for HTML 4 and XHTML, but as far as I know don't apply to HTML5:
Don't qualify headings Heading elements (h1-h6) should be defined as top-level styles and not scoped to particular areas of the page. Heading styles should only be defined once Heading elements (h1-h6) should have exactly one rule on a site.
In HTML5, you can scope headers to document sections. This allows for re-use of the h1-h6 tags across multiple sections on the same page. HTML5-capable browsers will create the proper hierarchy and default styles for each set.
It seems like the CSS Lint team is working on allowing users to turn on/off each warning, but these rules specifically might need an "* unless you are using HTML5" note in the documentation.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.