Break up CSS; use Grunt.js #1132
Comments
|
I would definitly go for it, but I wouldn't give the print snippet a seperate file, at least I would name it media-queries - thats more suitable. |
|
Nope.js. It invites bloat (look at all the room for expansion!), causes the code to be less linear (and therefore harder to learn and harder to spot cascades between sections) and adds needless dependencies. |
|
Are end-users expected to run the build script to use H5BP? I would be ambivalent in that case. Can we simply not make this breaking up an opt-in (I think @mklabs already did a task?) |
|
My thinking is:
Drawbacks:
Still, there might be a solution. I don't think it would invite bloat. We've been pretty rigorous in stripping the project back and improving its organization. Obviously, catering to people of various levels of experience is important. But I think the project also needs to continue adapting to its use in larger frameworks. Installing node.js and npm is one click away on every platform. Maybe we don't go down this route, this time. But I don't think we should make a habit of avoiding reliance on dependencies that are so easy to install. It's probably worth creating another issue to solicit feedback from developers and understand what people are doing when they build larger frameworks upon this project. |
|
Why not both? Include in the repository both the combined file, and the separate files. The combined file would be the result of the build script, and users can decide to either stick with the provided combined file, or investigate the separate files and use the build script to remake the combined file. Win / win IMO. |
Sadly I have seen cases where one member of the team thinks it is combined, and another thinks it is not. Changes happen at both locations and then there is confusion. |
|
People committing to the repo have different responsibilities than causal users downloading H5BP to use it… let's not lump them together. Just put a word at the top of the combined file to say that it's a. combined, and that githubbers should modify the individual files and re-combine before submitting changes. On 30 Jun 2012, at 7:20 PM, Divya Manian wrote:
|
|
@nimbupani There's indeed a related issue on the node-build-script repo, but I wasn't able to work further on this. I've been pretty busy last month, but I really plan to catch up with the build-script issues later in the week. Hopefully, there will be this new |
Yeah I'd thought about that, and had similar reservations to Divya. But I think this is a good option. We can easily combine the files and put a note in the combined one. I'm thinking about using the Sass-style convention of prefixing partials with an underscore, which could also help clarify the relationship between the files.
I wouldn't worry about the CSS split task. Not worth your time! I don't think it makes sense to have a build task that splits files for development. |
Breaking up the CSS into different files has several benefits: * Normalize.css can be included as a drop-in. This makes it easier to apply upstream changes and track which version of normalize.css is included in HTML5 Boilerplate. * Easier for people to remove or replace parts of the CSS. For example, if someone would rather use their own custom reset, they can pull out normalize.css without any trouble. * Encourages people to use multiple files in development. You wouldn't (or shouldn't) write all your JavaScript in one huge file. The same goes for CSS. * A step towards making it easier to integrate HTML5 Boilerplate into larger application frameworks. Included as part of this change is the addition of a package.json and simple grunt.js file. The package.json file allows us to group various pieces of information about the project, such as the version number. It will also act as the place to list any Node package dependencies, such as the H5BP node-build-script. The grunt.js file sets up grunt 'concat' and 'watch' tasks to combine the separate CSS files into a single main file. People can either edit the main file directly or continue to use the grunt task during development. Using the grunt tasks relies on a user of the boilerplate having Node.js, npm, and grunt installed. These are technologies that can be used on any OS and are particularly well suited for use by Front End developers. Ref #1132
Benefits of disentangling normalize.css from the rest of the project's CSS: * Easier to track normalize.css version. * Easier to update normalize.css. * Easier to remove normalize.css if the user wants. * Clearer distinction between normalizing CSS and the additions that HTML5 Boilerplate provides. Drawback is the additional HTTP request incurred from the extra stylesheet referenced in the HTML. However, we already do something similar for the JS, and anyone serious about performance is going to employ a build process to concatenate and minify CSS/JS. Ref gh-1132 Ref gh-1140
Benefits of disentangling normalize.css from the rest of the project's CSS: * Easier to track normalize.css version. * Easier to update normalize.css. * Easier to remove normalize.css if the user wants. * Clearer distinction between normalizing CSS and the additions that HTML5 Boilerplate provides. Drawback is the additional HTTP request incurred from the extra stylesheet referenced in the HTML. However, we already do something similar for the JS, and anyone serious about performance is going to employ a build process to concatenate and minify CSS/JS. Ref gh-1132 Ref gh-1140
I'd quite like to break the CSS up into separate files. Something like: normalize, base, helpers, print.
We could include a simple grunt.js (like jquery does) for people to easily concatenate and minify them. Not a full build script.
Thoughts? Drawbacks?
The text was updated successfully, but these errors were encountered: